A ♥ for data visualization + interaction
Published
Edited
Aug 31, 2020
2 stars
// place your specification below
embed({
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 500,
"height": 250,
"padding": 5,
"data": [
{
"name": "population",
"url": "https://vega.github.io/vega-datasets/data/population.json"
},
{
"name": "aggregated",
"source": "population",
"transform": [
{
"type": "aggregate",
"fields": ["people"],
"groupby": ["age", "year"],
"ops": ["sum"],
"as": ["aggregatedPeople"]
}
]
},
{
"name": "filtered",
"source": "aggregated",
"transform": [
{
"type": "filter",
"expr": "datum.year === decade"
}
]
},
{
"name": "maxPeople",
"source": "aggregated",
"transform": [
{
"type": "aggregate",
"fields": ["aggregatedPeople"],
"groupby": ["year"],
"ops": ["max"],
"as": ["max_aggregatedPeople"]
}
]
}
],
"signals": [
{
"name": "decade",
"value": 1910,
"bind": {"input": "range", "min": 1850, "max": 2000, "step": 10}
}
],
"scales": [
{
"name": "xscale",
"type": "linear",
"domain": [0, 100],
"range": "width",
"padding": 5
},
{
"name": "yscale",
"type": "linear",
"domain": {"data": "aggregated", "field": "aggregatedPeople"},
"range": "height", "round": true
}
],
"axes": [
{"orient": "bottom", "scale": "xscale", "zindex": 1},
{"orient": "left", "scale": "yscale", "tickCount": 5}
],
"marks": [
{
"type": "rect",
"name": "peopleBars",
"from": {"data": "aggregated"},
"encode": {
"update": {
"x": {"scale": "xscale", "field": "age"},
"width": {"value": 20},
"y": {"scale": "yscale", "field": "aggregatedPeople"},
"y2": {"scale": "yscale", "value": 0}
}
}
}
]
});
embed = require("vega-embed")
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.
