temperature_in_kathmandu_2022_area_chart =
areaChart(sampleCityData, {
x: "datetime",
y: "tempmax",
// Optional
width,
yLabel: "↑ Temp.",
yTickFormat: (d) => `${d3.format(".0f")(d)}°C`,
xLabel: "Date →"
})
temperature_in_kathmandu_and_pokhara_2022_area_chart =
areaChart(sampleData, {
x: "datetime",
y: "tempmax",
grouping: "name",
// Optional
width,
yLabel: "↑ Temp.",
yTickFormat: (d) => `${d3.format(".0f")(d)}°C`,
xLabel: "Date →"
})
areaChart(bls, {
x: "date",
y: "unemployed",
grouping: "industry",
stack: true,
// Optional
width,
yLabel: "↑ Unemployed",
yTickFormat: "s"
})
function areaChart(
data,
{
// Required
x = "x",
y = "y",
grouping,
// Optional
stack = false, // When true, stacks each group
width,
height,
yLabel,
yTickFormat,
xLabel,
xTickFormat,
fillOpacity,
strokeWidth = 0.75,
scheme = schemeCategory10
} = {}
) {
const yParams = stack ? { y } : { y2: y };
fillOpacity = fillOpacity == null && stack ? fillOpacity : 0.125;
const stroke = stack
? "white"
: grouping == null
? main.blue["700"]
: grouping;
scheme = stack ? scheme.slice().reverse() : scheme;
return Plot.plot({
width,
height,
y: { grid: true, label: yLabel, tickFormat: yTickFormat },
x: { label: xLabel, tickFormat: xTickFormat },
color: { legend: true, range: scheme },
marks: [
Plot.areaY(data, {
...yParams,
x,
fill: grouping == null ? main.blue["700"] : grouping,
fillOpacity,
stroke,
strokeWidth
}),
Plot.ruleY([0])
]
});
}
sampleData = rawWeatherData
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.
