Web Datavis researcher by day, Indie Game designer by night
Published
Edited
Sep 1, 2019
dashboard(layout)
layout = ({
type: 'hbox',
children: [{
type: 'vbox',
children: [{
type: 'cell',
content: 'viewof color'
},{
type: 'cell',
content: 'infobox'
},{
type: 'cell',
content: 'bar_chart',
height: 'bar_chart_height'
}]
},{
type: 'cell',
content: 'preview'
}]
})
preview = html`<div style="background: ${color}; flex: 1;"></div>`
infobox = md`Current color is **${color}** (${d3.rgb(color).r} red, ${d3.rgb(color).g} green ${d3.rgb(color).b} blue).`
bar_chart = vegalite({
data: { values: [
{primary: 'Blue', value: d3.rgb(color).b},
{primary: 'Green', value: d3.rgb(color).g},
{primary: 'Red', value: d3.rgb(color).r}
] },
mark: "bar",
autosize: "fit",
width: 470,
height: 188,
encoding: {
y: {
field: "primary",
type: "ordinal"
},
x: {
field: "value"
}
}
})
import {dashboard} from '@nitaku/flex-dashboard'
vegalite = require('@observablehq/vega-lite')
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.
