Materials science // data interaction
vl.render({spec: VLspec})
VLspec = ({
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "Though Vega-Lite supports only one scale per axes, one can create a parallel coordinate plot by folding variables, using `joinaggregate` to normalize their values and using ticks and rules to manually create axes.",
"data": {
"url": "https://raw.githubusercontent.com/vega/vega-datasets/next/data/penguins.json"
},
"vconcat": [
{
"transform": [
{"filter": {"param": "range1"}},
{"filter": "datum['Beak Length (mm)']"},
{"window": [{"op": "count", "as": "index"}]},
{"fold": ["Beak Length (mm)", "Beak Depth (mm)", "Flipper Length (mm)", "Body Mass (g)"]},
{
"joinaggregate": [
{"op": "min", "field": "value", "as": "min"},
{"op": "max", "field": "value", "as": "max"}
],
"groupby": ["key"]
},
{
"calculate": "(datum.value - datum.min) / (datum.max-datum.min)",
"as": "norm_val"
},
{
"calculate": "(datum.min + datum.max) / 2",
"as": "mid"
}
],
"width": 625,
"height": 300,
"layer": [{
"mark": {"type": "rule", "color": "#ccc"},
"encoding": {
"detail": {"aggregate": "count"},
"x": {"field": "key", "axis": {"domain": false, "title": null}}
}
},
{
"mark": "line",
"encoding": {
"color": {"type": "nominal", "field": "Species", "scale": {"domain": ["Adelie", "Chinstrap", "Gentoo"]}},
"detail": {"type": "nominal", "field": "index"},
"opacity": {"value": 0.3},
"x": {"type": "nominal", "field": "key", "axis": {"labelAngle": 0, "orient": "top", "labelOffset": 40, "labelPadding": "10"}},
"y": {"type": "quantitative", "field": "norm_val", "axis": null},
"tooltip": [{
"type": "quantitative",
"field": "Beak Length (mm)"
}, {
"type": "quantitative",
"field": "Beak Depth (mm)"
}, {
"type": "quantitative",
"field": "Flipper Length (mm)"
}, {
"type": "quantitative",
"field": "Body Mass (g)"
}]
}
},
{
"encoding": {
"x": {"type": "nominal", "field": "key"},
"y": {"value": 0}
},
"layer": [
{
"mark": {"type": "tick", "orient": "horizontal", "size": 8, "color": "#ccc"}
},
{
"mark": {"type": "text", "style": "label"},
"encoding": {
"text": {"aggregate": "max", "field": "max"}
}
} ]
}, {
"encoding": {
"x": {"type": "nominal", "field": "key"},
"y": {"value": 150}
},
"layer": [
{
"mark": {"type": "tick", "orient": "horizontal", "size": 5, "color": "#ccc"}
},
{
"mark": {"type": "text", "style": "label"},
"encoding": {
"text": {"aggregate": "min", "field": "mid"}
}
} ]
}, {
"encoding": {
"x": {"type": "nominal", "field": "key"},
"y": {"value": 300}
},
"layer": [
{
"mark": {"type": "tick", "orient": "horizontal", "size": 5, "color": "#ccc"}
},
{
"mark": {"type": "text", "style": "label"},
"encoding": {
"text": {"aggregate": "min", "field": "min"}
}
} ]
}]
},
{
"repeat":{
"column": ["Beak Depth (mm)", "Beak Length (mm)", "Body Mass (g)", "Flipper Length (mm)"],
},
"spec": {
"layer": [
{
"width": 130,
"height": 50,
"params": [
{"name": "range1", "select": {"type": "interval", "resolve": "intersect"}}
],
"mark":{"type": "bar", "color": "#ccc"},
"encoding": {
"x": {"field": {"repeat": "column"}, "type": "quantitative", "scale": {"zero": false, "nice": false, "padding": 5}, "bin": {"maxbins": 20}, "axis": {"labelSeparation": 2}},
"y": {"aggregate": "count", "title": null}
}
},
{
"transform": [{"filter": {"param": "range1"}}],
"mark": "bar",
"encoding": {
"x": {"field": {"repeat": "column"}, "type": "quantitative", "scale": {"zero": false, "nice": false, "padding": 5}, "bin": {"maxbins": 20}},
"y": {"aggregate": "count", "title": null},
"color": {"field": "Species", "type": "nominal"}
}
}
],
}
}
], "config": {"view": {"stroke": null}, "concat": {"spacing": 2}}
})
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.
