viewof chart = vega({
"config": {
"view": {"continuousWidth": 400, "continuousHeight": 300, "strokeWidth": 0},
"axis": {"gridDash": [2, 7], "labelFontSize": 12}
},
"data": {
"url": "https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/unemployment-across-industries.json"
},
"mark": "area",
"encoding": {
"color": {
"field": "series",
"legend": {"title": ""},
"scale": {"scheme": "category20c"},
"type": "nominal"
},
"opacity": {
"condition": {"value": 1, "selection": "selector003"},
"value": 0.2
},
"tooltip": [
{"field": "series", "type": "nominal"},
{"field": "date", "type": "temporal"},
{"field": "count", "title": "count (thousands)", "type": "quantitative"}
],
"x": {
"axis": {
"domain": false,
"format": "%Y",
"labelAlign": "center",
"tickSize": 0
},
"field": "date",
"timeUnit": "yearmonth",
"title": "",
"type": "temporal"
},
"y": {
"aggregate": "sum",
"axis": null,
"field": "count",
"stack": "center",
"type": "quantitative"
}
},
"height": 300,
"selection": {
"selector003": {"type": "multi", "fields": ["series"], "bind": "legend"}
},
"title": {
"anchor": "start",
"text": "Streamplot chart, US unemployment (2000-2010)",
"fontSize": 15
},
"width": 450,
"$schema": "https://vega.github.io/schema/vega-lite/v4.17.0.json"
})
vega = {
const v = window.vega = await require("vega@3");
const vl = window.vl = await require("vega-lite@2");
const ve = await require("vega-embed@6");
async function vega(spec, options) {
const div = document.createElement("div");
div.value = (await ve(div, spec, options)).view;
return div;
}
vega.changeset = v.changeset;
return vega;
}
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.
