I map 🗺️ & graph 📈 data 🈸
Daily Chicago Taxi TripsChicago Towed Vehicles SummaryChicago Towed VehiclesChicago Traffic Crash PlotsVega Viewer 📈Vega DatasetsChicago Crimes Arrow Data Vega-Lite API VizChicago Crimes Arrow Data Vega VizChicago Crimes by TypeChicago Crimes by LocationChicago Community Areas VegaVega Fold Transform FixVega Notebooks
Observing Vega Signals
viewof theme = dropdown([undefined, 'dark', 'excel', 'ggplot2', 'quartz', 'vox', 'fivethirtyeight', 'latimes'])
viewof chart = vegaEmbed({
"$schema": "https://vega.github.io/schema/vega-lite/v3.json",
"title": "Interactive Vega Bar Chart",
"description": "bar chart with highlighting on hover and multi-bar selection on click",
"width": 240, "height": 240,
"data": {"values": [{"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43}]},
"selection": {
"highlight": {"type": "single", "empty": "none", "on": "mouseover"},
"select": {"type": "multi"},
"barSelection": {"fields": ["a"], "on": "click", "type": "multi"}
},
"mark": {"type": "bar", "fill": "#4C78A8", "stroke": "black", "cursor": "pointer"},
"encoding": {
"x": {"field": "a", "type": "ordinal"},
"y": {"field": "b", "type": "quantitative"},
"fillOpacity": {"condition": {"selection": "select", "value": 1}, "value": 0.8},
"strokeWidth": {"condition": {"selection": "highlight", "value": 1}, "value": 0.5}
},
"config": {
"scale": {"bandPaddingInner": 0.2},
"axis": {"labelColor": "#333", "labelFontSize": 12, "labelFontWeight": "bold"},
"axisBottom": {"labelColor": "#666"}
}
}, {theme: theme})
barSelection = Generators.observe(notify => {
const barSelection = (name, value) => notify(value);
chart.addSignalListener("barSelection", barSelection);
notify(chart.signal("barSelection"));
return () => chart.removeSignalListener("barSelection", barSelection);
})
vegaEmbed = require("vega-embed@4")
import {dropdown} from "@jgrunik/inputs"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
