The end-to-end solution for building and hosting better data apps, dashboards, and reports.
alphabet = FileAttachment("alphabet.csv").csv({typed: true})
Plot.plot({
marks: [
Plot.barY(alphabet, {x: "letter", y: "frequency"})
]
})
Plot.plot({
y: {
grid: true
},
marks: [
Plot.barY(alphabet, {x: "letter", y: "frequency", fill: "#bab0ab"}),
Plot.ruleY([0])
]
})
Plot.plot({
y: {
label: "↑ Frequency (%)",
grid: true
},
marks: [
Plot.barY(alphabet, {x: "letter", y: d => d.frequency * 100}),
Plot.ruleY([0])
]
})
Plot.plot({
y: {
label: "↑ Frequency (%)",
grid: true,
transform: d => d * 100
},
marks: [
Plot.barY(alphabet, {x: "letter", y: "frequency"}),
Plot.ruleY([0])
]
})
Plot.plot({
x: {
padding: 0
},
y: {
grid: true
},
marks: [
Plot.barY(alphabet, {x: "letter", y: "frequency", insetLeft: 0.5, insetRight: 0.5}),
Plot.ruleY([0])
]
})
Plot.plot({
x: {
domain: d3.sort(alphabet, d => -d.frequency).map(d => d.letter)
},
y: {
grid: true
},
marks: [
Plot.barY(alphabet, {x: "letter", y: "frequency"}),
Plot.ruleY([0])
]
})
civilizations = FileAttachment("civilizations.csv").csv({typed: true})
Plot.plot({
height: civilizations.length * 16,
marginLeft: 120,
x: {
axis: "top",
grid: true,
tickFormat: formatYear
},
y: {
axis: null,
domain: d3.sort(civilizations, d => d.start).map(d => d.civilization)
},
marks: [
Plot.barX(civilizations, {
x1: "start",
x2: "end",
y: "civilization"
}),
Plot.text(civilizations, {
x: "start",
y: "civilization",
text: "civilization",
textAnchor: "end",
dx: -6
})
]
})
formatYear = year => year < 0 ? `${-year} BC` : `${year} AD`
popchange = FileAttachment("us-state-population-2010-2019.csv").csv({typed: true})
Plot.plot({
height: 780,
marginLeft: 100,
grid: true,
x: {
axis: "top",
round: true,
label: "← decrease · Change in population, 2010–2019 (%) · increase →",
labelAnchor: "center",
tickFormat: "+",
transform: d => d * 100
},
y: {
label: null,
domain: d3.sort(popchange, d => (d[2010] - d[2019]) / d[2010]).map(d => d.State)
},
color: {
range: ["#e15759", "#4e79a7"]
},
marks: [
Plot.barX(popchange, {
y: "State",
x: d => (d[2019] - d[2010]) / d[2010],
fill: d => Math.sign(d[2019] - d[2010])
}),
Plot.ruleX([0])
]
})
frequencies = alphabet.map(d => d.frequency)
Plot.plot({
y: {
grid: true
},
marks: [
Plot.barY(frequencies, {x: (d, i) => i}),
Plot.ruleY([0])
]
})
hadcrut = (await FileAttachment("hadcrut-annual.txt").text())
.trim().split(/\n/g) // split into lines
.map(line => line.split(/\s+/g)) // split each line into fields
.map(([year, anomaly]) => ({ // extract the year and median anomaly
year: new Date(Date.UTC(year, 0, 1)),
anomaly: +anomaly
}))
Plot.plot({
x: {
round: true
},
color: {
scheme: "BuRd"
},
marks: [
Plot.barX(hadcrut, {
x: "year",
interval: "year", // yearly data
inset: 0, // no gaps
fill: "anomaly"
})
]
})
Plot.plot({
x: {
label: "Frequency (%)",
transform: d => d * 100
},
marks: [
Plot.ruleX([0, 1]),
Plot.barX(alphabet, Plot.stackX({order: "letter", x: "frequency", fill: "#ccc", insetLeft: 1})),
Plot.textX(alphabet, Plot.stackX({order: "letter", x: "frequency", text: "letter", insetLeft: 1}))
]
})
Plot.plot({
x: {
domain: d3.sort(alphabet, d => -d.frequency).map(d => d.letter)
},
y: {
grid: true
},
marks: [
Plot.barY([1 / 26], {fill: "orange", fillOpacity: 0.4}),
Plot.barY(alphabet, {x: "letter", y: "frequency"}),
Plot.ruleY([0])
]
})
stateage = {
const data = await FileAttachment("us-population-state-age.csv").csv({typed: true});
const ages = data.columns.slice(1); // convert wide data to tidy data
return Object.assign(ages.flatMap(age => data.map(d => ({state: d.name, age, population: d[age]}))), {ages});
}
Plot.plot({
x: {
axis: null,
domain: stateage.ages
},
y: {
grid: true,
tickFormat: "s"
},
color: {
domain: stateage.ages,
scheme: "spectral"
},
fx: {
domain: d3.groupSort(stateage, v => d3.sum(v, d => -d.population), d => d.state).slice(0, 6),
label: null,
tickSize: 6
},
marks: [
Plot.barY(stateage, {fx: "state", x: "age", y: "population", fill: "age", title: "age"}),
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.
