Plot.plot({
width,
marginLeft: 75,
marginRight: 100,
marginTop: 50,
color: {
legend: true,
columns: 2,
scheme: "category10",
tickFormat: d => `${d}: ${scenarios.find(s => d.includes(s.id)).label}`,
swatchSize: 20,
style: {
fontSize: "15px"
}
},
x: {
type: "point",
label: "",
domain: yearRange,
tickFormat: d => `${d}`,
},
y: {
transform: d => d / 1e9,
tickFormat: d => `${d} Billion`,
label: "World Population"
},
marks: [
Plot.line(dataRange, {
x: "Year",
y: "value",
z: "Scenario",
marker: "circle",
stroke: "Scenario",
strokeWidth: 2,
}),
Plot.text(dataRange, Plot.selectLast({
x: "Year",
y: "value",
z: "Scenario",
text: d => d.Scenario.split(" ")[0],
textAnchor: "start",
dx: 5,
fontSize: 12,
})),
Plot.ruleY([0]),
]
})
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.
