The end-to-end solution for building and hosting better data apps, dashboards, and reports.
aapl = FileAttachment("aapl.csv").csv({typed: true})
Plot.plot({
x: {
round: true,
label: "Trade volume (log₁₀) →"
},
y: {
grid: true
},
marks: [
Plot.rectY(aapl, Plot.binX({y: "count"}, {x: d => Math.log10(d.Volume)})),
Plot.ruleY([0])
]
})
povcalnet = FileAttachment("povcalnet.csv").csv({typed: true})
Plot.plot({
width: 928,
x: {
label: "Population (millions) →"
},
y: {
label: "↑ Proportion living on less than $30 per day (%)",
transform: d => d * 100,
grid: true
},
marks: [
Plot.rectY(povcalnet, Plot.stackX({
filter: d => ["N", "A"].includes(d.CoverageType),
x: "ReqYearPopulation",
order: "HeadCount",
reverse: true,
y2: "HeadCount", // y2 to avoid stacking by y
title: d => `${d.CountryName}\n${(d.HeadCount * 100).toFixed(1)}%`,
insetLeft: 0.2,
insetRight: 0.2
})),
Plot.ruleY([0])
]
})
diamonds = FileAttachment("diamonds.csv").csv({typed: true})
Plot.plot({
height: 640,
color: {
scheme: "bupu",
type: "symlog"
},
marks: [
Plot.rect(diamonds, Plot.bin({fill: "count"}, {x: "carat", y: "price", thresholds: 100}))
]
})
Plot.plot({
height: 640,
round: true,
color: {
scheme: "bupu",
type: "symlog"
},
marks: [
Plot.rect(diamonds, Plot.bin({fill: "count"}, {x: "carat", y: "price", thresholds: 100, inset: 0}))
]
})
Plot.plot({
x: {
round: true,
label: "Trade volume (log₁₀) →"
},
y: {
grid: true
},
marks: [
Plot.rectY(aapl, Plot.binX({y: "count"}, {rx: 8, x: d => Math.log10(d.Volume)})),
Plot.ruleY([0])
]
})
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.
