In [ ]:
import holoviews as hv
from holoviews import opts

from holoviews.plotting.links import DataLink

hv.extension('bokeh')

This example demonstrates how to use a DataLink to join two elements displaying the same data, a choropleth of the Texas unemployment rate alongside a Table of the same data. By linking the two selecting a polygon will highlight it in the table and vice versa.

Declare data

In [ ]:
from bokeh.sampledata.us_counties import data as counties
from bokeh.sampledata.unemployment import data as unemployment

counties = [dict(county, Unemployment=unemployment[cid])
            for cid, county in counties.items()
            if county["state"] == "tx"]

county_data = [(county['detailed name'], county['Unemployment']) for county in counties]

choropleth = hv.Polygons(counties, ['lons', 'lats'], [('detailed name', 'County'), 'Unemployment'], label='Texas Unemployment')
table = hv.Table(county_data, [('detailed name', 'County'), 'Unemployment'])

print(len(choropleth.data), len(table))

Declare Plot

As shown above the two elements have the same length meaning that they can be linked. Linking the data in this way allows cross-selecting, e.g. by selecting one or more rows in the Table we can see the polygon for the county highlight in the choropleth:

In [ ]:
# Link the choropleth and the table
DataLink(choropleth, table)

(choropleth + table).opts(
    opts.Table(height=428),
    opts.Polygons(width=500, height=500,  tools=['hover', 'tap'], xaxis=None, 
                  yaxis=None, color_index='Unemployment'))