country = ['Ecuador']
data = _data.filter(d => country.includes(d.location))
.map(d => ({parsedDate: new Date(d.date), ...d}))
.filter(d => d.num_sequences > 0) //Filter to keep only the counts
.filter( d => variants.includes(d.variant)) //Filter to keep only the main variants
Plot.plot({
y: {
label: "↑ Percentage of sequenced samples that fall into the category variant",
tickFormat: "%",
},
x:{
label: "2021"
},
marks: [
Plot.ruleY([0]),
Plot.areaY(data, Plot.stackY({
offset: "expand",
x: "parsedDate",
y: "perc_sequences",
fill: "variant",
curve: "basis",
order: "appearance"})),
Plot.text(data, Plot.selectFirst(Plot.stackY({
x: "parsedDate",
y: "perc_sequences",
z: "variant",
order: "appearance",
offset: "expand",
fill: "#333333",
text: "variant",
fontWeight: "bold",
textAnchor: "start", dx: 6, dy: 5,
}))),
],
color
})
Plot.plot({
y: {
label: "↑ Percentage of sequenced samples that fall into the category variant",
tickFormat: "%",
},
x:{
label: "2021"
},
marks: [
Plot.ruleY([0]),
Plot.areaY(data, Plot.stackY({
offset: "expand",
x: "parsedDate",
y: "perc_sequences",
fill: "variant",
curve: "basis",
order: "variant"})),
Plot.text(data, Plot.selectFirst(Plot.stackY({
x: "parsedDate",
y: "perc_sequences",
z: "variant",
order: "variant",
offset: "expand",
fill: "#333333",
text: "variant",
fontWeight: "bold",
textAnchor: "start", dx: 15, dy: 5,
}))),
],
color
})
Color Selection:
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.
