Crafting Visual Stories with Data.
Published
Edited
Jul 17, 2018
1 fork
spec = ({
width: 400,
height: 400,
padding: 5,
signals: [
{ name: "method", value: "squarify",
bind: {input: "select", options: ["squarify", "resquarify", "binary", "dice", "slice", "slicedice"]} },
{ name: "ratio", value: 1.6108, bind: {input: "range", min: 0.2, max: 5, step: 0.1}}
],
data: [
{name: "gapminder",
url: dataurl,
transform: [
{ type: "stratify", key: "continent", parentKey: "country"},
{ type: "treemap", field: "value", method: {signal: "method"}, ratio: {signal: "ratio"},
size: [{"signal": "width"}, {"signal": "height"}]}]
},
{ name: "nodes",
source: "gapminder",
transform: [{ type: "filter", expr: "datum.children" }]
},
{
name: "leaves",
source: "gapminder",
transform: [{ type: "filter", expr: "!datum.children" }]
}
],
scales: [{ name: "color", type: "ordinal", range: {scheme: "category20"}}],
marks: [
{ type: "rect",
from: {data: "nodes"},
encode: {
enter: {fill: {scale: "color", field: "nodes", opacity: 0.5}},
update: { x: {field: "x0"}, x2: {field: "x1"}, y: {field: "y0"}, y2: {field: "y1"}}
}
},
{ type: "rect",
from: {data: "leaves"},
encode: {
enter: { stroke: {"value": "#fff"}},
update: { x: {field: "x0"}, x2: {field: "x1"}, y: {field: "y0"}, y2: {field: "y1"}}
}
}
]
})
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.
