dataviz engineer w/ passion for algorithms, maps & music
Published
Edited
Aug 2, 2019
1 fork
20 stars
target = html`<div id="chart" style="max-width: 600px"></div>`
notebook = (await import("https://api.observablehq.com/@d3/bivariate-choropleth.js?v=3")).default
Runtime = await import("@observablehq/runtime@4/dist/runtime.js")
customWidth = function () {
return (new Runtime.Library).Generators.observe(function (change) {
let width = change(target.clientWidth);
function resized() {
let w = target.clientWidth;
if (w !== width) change(width = w);
}
window.addEventListener("resize", resized);
return function () {
window.removeEventListener("resize", resized);
};
});
}
runtime = new Runtime.Runtime(Object.assign(new Runtime.Library, { width: customWidth }))
document
.querySelector("#chart")
.appendChild(await runtime.module(notebook).value("chart"));
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.
