Public
Edited
Jul 18, 2023
{
const plts = cities.map((city, cityIdx) => {
const data = rawData.filter((d) => d.cityCN === city),
color = colorScheme[cityIdx % 10];
const plt = Plot.plot({
width: width / 3,
height: width / 5,
x: { nice: true, domain: [2010, 2024] },
y: { nice: true },
color: {
nice: true,
legend: true,
scheme: "BuRd",
domain: [30, 40],
type: "linear"
},
grid: true,
marks: [
Plot.frame({ stroke: "#3333" }),
Plot.linearRegressionY(data, {
x: "year",
y: "high",
fill: color,
stroke: color,
opacity: 0.8
}),
Plot.dot(data, {
x: "year",
y: "high",
fill: "high",
stroke: "#3333",
tip: true
})
]
});
return htl.html`
<div>
<h2 style="color: ${color}">
${city}
</h2>
${plt}
</div>
`;
});
return htl.html`
<div style='display: flex; flex-flow: wrap'>
${plts}
</div>
`;
}
colorScheme = d3.schemeTableau10
cities = [...new Set(rawData.map((d) => d.cityCN))].sort(
(a, b) =>
rawData.findLast((d) => d.cityCN === b).high -
rawData.findLast((d) => d.cityCN === a).high
)
data_table.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
d3 = require("d3")
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.
