I map 🗺️ & graph 📈 data 🈸
vegaEmbed(plot)
vegaLite(plot)
plot = Object({
"data": {
"values": [
{"fixed": 3, "variable": 10, "storage": 20},
{"fixed": 8, "variable": 7, "storage": 26}
]
},
"transform": [{"fold": ["variable", "fixed"], "as": ["key", "value"]}],
"mark": "line",
"encoding": {
"x": {"field": "storage", "type": "quantitative"},
"y": {"field": "value", "type": "quantitative"},
"color": {"field": "key", "type": "nominal"}
}
})
vegaEmbed = require("vega-embed@3.18.2/build/vega-embed.min.js")
vegaLite = {
const [Vega, VegaLite] = await Promise.all([
require("vega@4.2.0/build/vega.min.js"),
require("vega-lite@3.0.0-rc3/build/vega-lite.min.js")
]);
return async spec => {
const div = document.createElement("div");
const view = new Vega.View(Vega.parse(VegaLite.compile(spec).spec));
await view.initialize(div).runAsync();
return div;
};
}
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.
