Published
Edited
Feb 29, 2020
html`
<h1>This Chart is Very Very Narrow</h1>
<div class="my-container" style="padding: 40px; width: 80%; background: #eee;">
${await renderTimeseries()}
</div>
`
renderTimeseries = async () => {
const data = await dataSets["population.json"]().then(data =>
data.map(d => ({
date: new Date(d.year, 0),
...d
}))
);
const chart = vl
.markLine()
.data(data)
.width("container")
.autosize({
// type: "fit-x", // comment this back in to totally break to chart.
resize: true,
contains: "padding"
})
.encode(
vl.x().fieldT('date'),
vl.y().average("people"),
vl.color().fieldN("sex")
);
return chart.render();
}
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.
