The Ambassador program is made up of a group of inclusive, collaborative, and curious minds in the Observable community.
display(map)
viewof plot = {
const plot = Plot.plot({
marginBottom: 60,
height: 200,
width: 200,
x: { tickRotate: 45 },
y: { tickFormat: (d) => d3.format("0.2s")(d).replace(/G/, "B") }, // https://github.com/d3/d3-format/issues/71
style: {
backgroundColor: "white"
},
marks: [
Plot.barY(continents, {
fill: "Continent",
x: "Continent",
y: "Population",
sort: { x: "y", reverse: true },
title: (d) =>
`Continent: ${d.Continent}\nPopulation: ${d3.format(",")(
d.Population
)}\nCentroid ([lat,lng]): [${d.Latitude},${d.Longitude}]`
}),
Plot.ruleX([0])
]
});
// https://observablehq.com/d/c4631d2d07b147bf
d3.select(plot)
.selectAll("rect")
.on("click", function (event, i) {
plot.value = [continents[i].Latitude, continents[i].Longitude];
plot.dispatchEvent(new CustomEvent("input"));
});
plot.value = []; //Intially an empty array. If undefined, Observable will wait for value to be assigned via click
return plot;
}
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.
