logo
  • Home
  • Getting Started
  • User Guide
  • Gallery
  • Reference Gallery
  • Developers
  • API
  • Releases
  • FAQ
  • About
  • Home
  • Getting Started
  • User Guide
    • Overview
    • Components
    • APIs
    • Customization
    • Deploy & Export
    • Interact
    • Widgets
    • Parameters
    • Linking
    • Pipelines
    • Templates
    • Server Deployment
    • Building Custom Components
    • Asynchronous and Concurrent Process
    • Authentication
    • Performance and Debugging
    • Django Apps
  • Gallery
    • VTKInteractive
    • VTKSlicer
    • VTKWarp
    • Attractors
    • Gapminders
    • Glaciers
    • Nyc Taxi
    • Portfolio-optimizer
    • Altair Choropleth
    • Clifford Interact
    • Color Speech Recognition
    • Deckgl Game Of Life
    • Defer Data Load
    • File Download Examples
    • Iris Kmeans
    • Loading Spinner
    • Random Number Generator
    • Save Filtered Df
    • Sync Location
    • Temperature Distribution
    • Stocks Altair
    • Stocks Hvplot
    • Stocks Matplotlib
    • Stocks Plotly
    • Distribution Tabs
    • Dynamic Tabs
    • Plot With Columns
    • Dynamic Plot Layout
    • Dynamic Timeseries Image Analysis
    • Dynamic Ui
    • Dynamic Widget Values
    • Action Button
    • Deck Gl Global Power Plants
    • Download Upload Csv
    • Loading Indicator
    • Param Subobjects
    • Precedence
    • Reactive Plots
    • Reactive Tables
    • Hardware Automation
    • Streaming Bokeh
    • Streaming Indicator
    • Streaming Perspective
    • Streaming Tabulator
    • CanvasDraw
    • LeafletHeatMap
    • MaterialUI
    • Bokeh Property Editor
    • Deck Gl Json Editor
    • Holoviews Glyph Link
    • Plotly Link
    • Vega Heatmap Link
    • MatplotlibStyle
    • PlotlyStyle
    • VegaAltairStyle
    • DataTable
    • Folium
    • Deck.gl
  • Reference Gallery
    • Alert
    • Audio
    • Bokeh
    • DataFrame
    • DeckGL
    • ECharts
    • Folium
    • GIF
    • HTML
    • HoloViews
    • IDOM
    • IPyWidget
    • JPG
    • JSON
    • LaTeX
    • Markdown
    • Matplotlib
    • PDF
    • PNG
    • Param
    • Perspective
    • Plotly
    • SVG
    • Str
    • Streamz
    • VTK
    • VTKJS
    • VTKVolume
    • Vega
    • Video
    • Accordion
    • Card
    • Column
    • Divider
    • FlexBox
    • GridBox
    • GridSpec
    • GridStack
    • Row
    • Tabs
    • WidgetBox
    • Bootstrap
    • FastGridTemplate
    • FastListTemplate
    • GoldenLayout
    • Material
    • React
    • Vanilla
    • Notifications
    • BooleanStatus
    • Dial
    • Gauge
    • LinearGauge
    • LoadingSpinner
    • Number
    • Progress
    • Tqdm
    • Trend
    • Ace
    • ArrayInput
    • AutocompleteInput
    • Button
    • CheckBoxGroup
    • CheckButtonGroup
    • Checkbox
    • ColorPicker
    • CrossSelector
    • DataFrame
    • DatePicker
    • DateRangeSlider
    • DateSlider
    • DatetimeInput
    • DatetimePicker
    • DatetimeRangeInput
    • DatetimeRangePicker
    • DatetimeRangeSlider
    • Debugger
    • DiscretePlayer
    • DiscreteSlider
    • EditableFloatSlider
    • EditableIntSlider
    • EditableRangeSlider
    • FileDownload
    • FileInput
    • FileSelector
    • FloatInput
    • FloatSlider
    • IntInput
    • IntRangeSlider
    • IntSlider
    • JSONEditor
    • LiteralInput
    • MenuButton
    • MultiChoice
    • MultiSelect
    • PasswordInput
    • Player
    • RadioBoxGroup
    • RadioButtonGroup
    • RangeSlider
    • Select
    • SpeechToText
    • StaticText
    • Tabulator
    • Terminal
    • TextAreaInput
    • TextEditor
    • TextInput
    • TextToSpeech
    • Toggle
    • ToggleGroup
    • VideoStream
  • Developers
    • Getting Set up
    • Testing
  • API
    • io
    • layout
    • pane
      • panel.vtk Package
    • param
    • pipeline
    • template
      • panel.bootstrap Package
      • panel.fast Package
        • panel.grid Package
        • panel.list Package
      • panel.golden Package
      • panel.material Package
      • panel.react Package
      • panel.theme Package
      • panel.vanilla Package
    • widgets
    • viewable
    • util
  • Releases
  • FAQ
  • About
    • Comparisons
On this page
  • App
Open this page in Binder

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).

previous

Plotly Link

next

MatplotlibStyle

© Copyright 2019-2022 Holoviz contributors.

Last updated on 2022-05-24.