data.view(5)
parsedate = d3.timeParse("%Y")
data2 = data
.select(0, 2, 3, 4)
.rename({
"El Masnou": "El_Masnou",
"Premià de Mar": "Premia_Mar",
"Vilassar de Mar": "Vilassarde_Mar"
})
.derive({
YEAR: aq.escape((d) => parsedate(d.ANY))
})
.fold(["El_Masnou", "Premia_Mar", "Vilassarde_Mar"], {
as: ["CITY", "values"]
})
.objects()
DOM.download(
new Blob([d3.csvFormat(data2)], { type: "text/csv" }),
"cities.csv"
)
Plot.plot({
y: {
grid: false,
label: "Cities"
},
color: {
type: "ordinal",
range: ["#f20666", "#662e9b", "red"],
legend: true
},
marks: [
Plot.ruleY([0]),
Plot.lineY(data2, {
x: "YEAR",
y: "values",
z: "CITY",
stroke: "CITY",
tip: true
}),
Plot.tip([`(2020)`], {
x: "2015",
y: 95,
dx: -20,
anchor: "right"
})
]
})
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.
