The end-to-end solution for building and hosting better data apps, dashboards, and reports.
states = FileAttachment("us-population-state-age.csv").csv({typed: true})
ages = states.columns.slice(1)
stateages = ages.flatMap(age => states.map(d => ({state: d.name, age, population: d[age]}))) // pivot
Plot.plot({
marginLeft: 50,
grid: true,
x: {
axis: "top",
label: "Percent (%) →",
transform: d => d * 100
},
y: {
domain: ages,
label: "Age"
},
marks: [
Plot.ruleX([0]),
Plot.tickX(stateages, Plot.normalizeX({basis: "sum", z: "state", x: "population", y: "age"}))
]
})
Plot.plot({
x: {
domain: [-4, 4]
},
marks: [
Plot.tickX({length: 500}, {x: d3.randomNormal(), strokeOpacity: 0.2}),
]
})
morley = FileAttachment("morley.csv").csv({typed: true})
Plot.plot({
x: {
grid: true,
inset: 6
},
marks: [
Plot.ruleY(morley, Plot.groupY({x1: iqr1, x2: iqr2}, {x: "Speed", y: "Expt"})),
Plot.barX(morley, Plot.groupY({x1: quartile1, x2: quartile3}, {x: "Speed", y: "Expt", fill: "#ccc"})),
Plot.tickX(morley, Plot.groupY({x: "median"}, {x: "Speed", y: "Expt", strokeWidth: 2})),
]
})
aapl = FileAttachment("aapl.csv").csv({typed: true})
Plot.plot({
y: {
grid: true
},
marks: [
Plot.tickY([0], {stroke: "red"}),
Plot.line(aapl, {x: "Date", y: "Close"})
]
})
iqr1 = V => Math.max(d3.min(V), quartile1(V) * 2.5 - quartile3(V) * 1.5)
iqr2 = V => Math.min(d3.max(V), quartile3(V) * 2.5 - quartile1(V) * 1.5)
quartile1 = V => d3.quantile(V, 0.25)
quartile3 = V => d3.quantile(V, 0.75)
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.
