Data Visualization Consultant, and an enthusiastic generalist in building software systems
viewof foo = helpers.labeledSlider({
value: 3,
min: 1,
max: 5,
step: 0.1,
label: "A Slider:"
})
viewof foo2 = helpers.labeledInput({
value: 3,
min: 1,
max: 5,
label: "An Input Box:"
})
helpers.JSONView({
foo: "bar",
baz: 0
},'⇒ ',2)
md`Color Box: ${helpers.colorBox('#ff0000')}`
function colorBox(color, options) {
options = Object.assign({},{
size: '0.8em',
offset: '-0.4em'
}, options);
return html`<span style="display: inline-block; width: ${options.size}; height: ${options.size}; background-color: ${color}; vertical-align: ${options.offset}; margin: 0 2px;"> </span>`
}
md`${tweet("991517711250305024")}`
function tweet(id, options) {
options = Object.assign({},{
cards: 'hidden',
width: 350
}, options);
const div = html`<div>`;
twttr.widgets.createTweet(id, div, options).then(() => div.dispatchEvent(new CustomEvent("load")));
return div;
}
helpers = ({
signature: signature,
defaultCSS: defaultCSS,
labeledSlider: labeledSlider,
labeledInput: labeledInput,
JSONView: JSONView,
colorBox: colorBox,
topo: {
usdt113: usCongressionalDistrictTopo_113
},
text: text,
rasterize,
serialize,
createJsonDownloadButton
})
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.
