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;
}
vega(
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"title": {"text": "A Scone", "dy": -12},
"description": "A scone pie chart with labels.",
"background": "#F6F6F6",
"padding": {"top": 24, "right": 24, "bottom": 24, "left": 24},
"data": {
"values": [
{"category": "Self-raising flour", "quantity": 62.5},
{"category": "Salt & sugar", "quantity": 2.44},
{"category": "Cold butter", "quantity": 20},
{"category": "Buttermilk", "quantity": 120},
]
},
"encoding": {
"theta": {"field": "quantity", "type": "quantitative", "stack": true},
"color": {
"field": "quantity",
"type": "nominal",
"scale": { "range": ["#FDBAAB", "#FFEBA5", "#99C3E1", "#90D1C5"] },
"legend": null
},
"order": {"field": "quantity", "sort": "descending"},
"tooltip": [
{"field": "category", "type": "nominal"},
{"field": "quantity", "type": "quantitative"}
]
},
"layer": [{
"mark": {"type": "arc", "outerRadius": 150, "stroke": "#fff"}
}, {
"mark": {"type": "text", "radius": 175, "fill": "#202630"},
"encoding": {
"text": {"field": "category", "type": "nominal"}
}
}],
"view": {"stroke": null}
}
)
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.
