values = Array.from({length: 500}, d3.randomNormal())
Plot.lineY(values, Plot.map({y: "cumsum"}, {y: values})).plot({height: 200})
Plot.lineY(values, Plot.mapY("cumsum", {y: values})).plot({height: 200})
temp = FileAttachment("sf-temperatures.csv").csv({typed: true})
Plot.plot({
y: {
grid: true,
label: "↑ Daily temperature range (°F)"
},
marks: [
Plot.areaY(temp, {x: "date", y1: "low", y2: "high", curve: "step", fill: "#ccc"}),
Plot.line(temp, Plot.windowY({x: "date", y: "low", k: 7, curve: "step", stroke: "blue"})),
Plot.line(temp, Plot.windowY({x: "date", y: "high", k: 7, curve: "step", stroke: "red"}))
]
})
stocks = FileAttachment("stocks.csv").csv({typed: true})
Plot.plot({
marginRight: 40,
y: {
type: "log",
grid: true,
label: "↑ Change in price (%)",
tickFormat: (f => x => f((x - 1) * 100))(d3.format("+d"))
},
marks: [
Plot.ruleY([1]),
Plot.line(stocks, Plot.normalizeY({
x: "Date",
y: "Close",
stroke: "Symbol"
})),
Plot.text(stocks, Plot.selectLast(Plot.normalizeY({
x: "Date",
y: "Close",
z: "Symbol",
text: "Symbol",
textAnchor: "start",
dx: 3
})))
]
})
stateage = {
const states = await FileAttachment("us-population-state-age.csv").csv({typed: true});
const ages = states.columns.slice(1);
const stateage = ages.flatMap(age => states.map(d => ({state: d.name, age, population: d[age]})));
stateage.ages = ages;
return stateage;
}
{
const xy = Plot.normalizeX({basis: "sum", z: "state", x: "population", y: "state"});
return Plot.plot({
height: 660,
grid: true,
x: {
axis: "top",
label: "Percent (%) →",
transform: d => d * 100
},
y: {
domain: d3.groupSort(stateage, g => -g.find(d => d.age === "≥80").population / d3.sum(g, d => d.population), d => d.state),
axis: null
},
color: {
scheme: "spectral",
domain: stateage.ages
},
marks: [
Plot.ruleX([0]),
Plot.ruleY(stateage, Plot.groupY({x1: "min", x2: "max"}, xy)),
Plot.dot(stateage, {...xy, fill: "age"}),
Plot.text(stateage, Plot.selectMinX({...xy, textAnchor: "end", dx: -6, text: "state"}))
]
});
}
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.
