Plot.plot({
width: width,
height: (width * 9) / 16,
y: {
axis: "right",
marginRight: 150,
tickFormat: "~s",
label: "New cases (weekly average)",
domain: [0, domainY]
},
x: {
label: null
},
color: {
domain: [true, false],
range: ["#cf3476", "#DCDCDC"]
},
marks: [
Plot.line(
infections.filter((d) => d.id.length <= 3),
{
x: "parsedDate",
y: "new_cases_smoothed",
stroke: (d) => d.id === "ESP",
strokeWidth: (d) => (d.id === "ESP" ? 2.7 : 0.9)
}
),
Plot.ruleY([0]),
Plot.text(
infections.filter((d) => d.id === "ESP"),
Plot.selectMaxY({
x: "parsedDate",
y: "new_cases_smoothed",
z: "location",
text: "id",
fontWeight: "bold",
dy: -10,
stroke: "#fff",
fill: "#333",
strokeWidth: 3
})
)
],
style: {
paintOrder: "stroke"
}
})
vaccinatedClean = vaccinated.filter(d => d.continent !== null)
Plot.plot({
height: 640,
grid: true,
x: {
type: "log",
label: "GDP per capita ($)"
},
y: {
axis: "right",
label: "Population that is fully vaccinated (per 100 people)"
},
r: {
range: [2, 36],
type: "sqrt",
},
color: {
type: log ? "log" : "linear",
scheme: diverging ? "piyg" : "purd",
reverse: diverging ? false : true,
marginLeft: 30
},
marks: [
Plot.dot(vaccinatedClean, {
y: "people_fully_vaccinated_per_hundred",
x: "gdp_per_capita",
r: "population",
fill: "gdp_per_capita",
fillOpacity: .5,
stroke: "gdp_per_capita",
strokeWidth: 2,
mixBlendMode: "multiply",
title: d => `${d.location}\nVaccinated: ${d.people_fully_vaccinated_per_hundred}% \nGDP: $${d.gdp_per_capita} per capita`
}),
Plot.text(
vaccinatedClean
.sort((a,b) => b.population - a.population)
.slice(0,5),
{
y: "people_fully_vaccinated_per_hundred",
x: "gdp_per_capita",
text: "location",
stroke: "#fff",
fill: "#333",
strokeWidth: 3
})
],
style: {
padding: 10,
paintOrder: "stroke"
}
})
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.
