Crafting Visual Stories with Data.
spec = ({
width: 400,
height: 400,
data: {values: imagePixel},
mark: "rect",
transform: [
{window: [{op: "row_number", as: "index"}]},
{calculate: "ceil(datum.index/4)", as: "pixel" },
{calculate: "ceil(datum.pixel/40)", as: "Y" },
{calculate: "datum.pixel - (datum.Y - 1) * 40", as: "X"},
{window: [
{op: "nth_value", param: 1, field: "data", as: "red"},
{op: "nth_value", param: 2, field: "data", as: "green"},
{op: "nth_value", param: 3, field: "data", as: "blue"},
{op: "nth_value", param: 4, field: "data", as: "alpha"}
], groupby: ["pixel"]},
{filter: "datum.alpha !== null"},
{calculate: "rgb(datum.red, datum.green, datum.blue)", as: "color"}
],
encoding: {
x: {field: "X", type: 'ordinal', axis: {labelAngle: 0}, scale: {padding: 0}},
y: {field: "Y", type: 'ordinal', scale: {padding: 0}},
color: {field: "color", type: "nominal", scale: null},
tooltip: [
{field: "X", type: "ordinal"},
{field: "Y", type: "ordinal"},
{field: "color", type: "nominal"}
]
}
})
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.
