Vega Heatmap Link#
Download this notebook from GitHub (right-click to download).
import panel as pn
pn.extension('vega', sizing_mode="stretch_width")
This example demonstrates how to link Panel widgets to a Vega pane by editing the Vega spec using callbacks and triggering updates in the plot.
imdb = {
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {"url": "https://raw.githubusercontent.com/vega/vega/master/docs/data/movies.json"},
"transform": [{
"filter": {"and": [
{"field": "IMDB Rating", "valid": True},
{"field": "Rotten Tomatoes Rating", "valid": True}
]}
}],
"mark": "rect",
"width": "container",
"height": 400,
"encoding": {
"x": {
"bin": {"maxbins":60},
"field": "IMDB Rating",
"type": "quantitative"
},
"y": {
"bin": {"maxbins": 40},
"field": "Rotten Tomatoes Rating",
"type": "quantitative"
},
"color": {
"aggregate": "count",
"type": "quantitative"
}
},
"config": {
"view": {
"stroke": "transparent"
}
}
}
vega = pn.pane.Vega(imdb, height=425)
# Declare range slider to adjust the color limits
color_lims = pn.widgets.RangeSlider(name='Color limits', start=0, end=125, value=(0, 40), step=1)
color_lims.jslink(vega, code={'value': """
target.data.encoding.color.scale = {domain: source.value};
target.properties.data.change.emit()
"""});
# Declare slider to control the number of bins along the x-axis
imdb_bins = pn.widgets.IntSlider(name='IMDB Ratings Bins', start=0, end=125, value=60, step=25)
imdb_bins.jslink(vega, code={'value': """
target.data.encoding.x.bin.maxbins = source.value;
target.properties.data.change.emit()
"""});
# Declare slider to control the number of bins along the y-axis
tomato_bins = pn.widgets.IntSlider(name='Rotten Tomato Ratings Bins', start=0, end=125, value=40, step=25)
tomato_bins.jslink(vega, code={'value': """
target.data.encoding.y.bin.maxbins = source.value;
target.properties.data.change.emit()
"""});
pn.Row(vega, pn.Column(color_lims, imdb_bins, tomato_bins, sizing_mode="fixed", width=400))
App#
Lets wrap it into nice template that can be served via panel serve vega_heatmap_link.ipynb
pn.template.FastListTemplate(
site="Panel", title="Vega Heatmap w. JS Links",
sidebar=[color_lims, imdb_bins, tomato_bins],
main=[
pn.pane.Markdown("This example demonstrates how to link Panel widgets to a **Vega pane** by editing the Vega spec using **js callbacks** and triggering updates in the plot."),
vega
]
).servable();
This web page was generated from a Jupyter notebook and not all interactivity will work on this website. Right click to download and run locally for full Python-backed interactivity.
Download this notebook from GitHub (right-click to download).