Public
Edited
Oct 15, 2022
Insert cell
Insert cell
viewof table = Inputs.table(olympians)
Insert cell
olympians
Insert cell
Plot.plot({
marks: [
Plot.barX(olympians, Plot.groupY({x: "count"}, {y: "nationality", sort: {y: "x", reverse: true, limit: 10}})),
Plot.ruleX([0])
]
})
Insert cell
viewof sport = Inputs.select(sports, {label: "Sport:"})
Insert cell
Plot.plot({
marks: [
Plot.rectY(sport, Plot.binX({y: "count"}, {x: "weight", fill: "sex"})),
Plot.ruleY([0])
],
color: {
legend: true
},
x: {
domain: [0, 200]
}
})
Insert cell
Insert cell
sports = d3.group(olympians, d => d.sport)
Insert cell
map = {
const container = yield htl.html`<div style="height: 500px;">`;
const map = L.map(container).setView([51.0, 6.9], 13);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "© <a href=https://www.openstreetmap.org/copyright>OpenStreetMap</a> contributors"
}).addTo(map);
}
Insert cell

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.
Learn more