Unlisted
Edited
Sep 23, 2024
1 star
Insert cell
Insert cell
Plot.plot({
marginLeft: 50,
color: {
domain: keys,
range: colorRange,
legend: true
},
fx: {
tickSize: 6
},
y: {
tickFormat: "s",
nice: true,
grid: true
},
x: {
axis: null,
domain: keys
},
marks: [
Plot.barY(data, {
x: "key",
x2: "key",
y: "population",
fill: "key",
fx: "state",
sort: { fx: "y", reduce: "sum", reverse: true }
}),
Plot.ruleY([0])
]
})
Insert cell
Insert cell
Inputs.table(data)
Insert cell
keys = d3.sort(new Set(data.map(d => d.key)), d => parseInt(d.match(/\d+/)[0]))
Insert cell
colorRange = [
"#98abc5",
"#8a89a6",
"#7b6888",
"#6b486b",
"#a05d56",
"#d0743c",
"#ff8c00"
]
Insert cell
data = FileAttachment("data.csv").csv({typed: true})
Insert cell
Insert cell
Insert cell
Plot.plot({
marginLeft: 50,
color: {
domain: keys,
scheme: "Warm",
legend: true
},
facet: {
data,
x: "state"
},
fx: {
axis: "bottom"
},
y: {
tickFormat: "s"
},
x: {
axis: null,
domain: keys
},
marks: [
Plot.ruleX(data, {
x: "key",
y: "population",
stroke: "key",
strokeWidth: 3
}),
Plot.dot(data, {
x: "key",
y: "population",
fill: "key",
r: 5,
sort: { fx: "y", reduce: "sum", reverse: true }
}),
Plot.ruleY([0])
]
})
Insert cell
Insert cell
groupedBarChart(data, {
fx: "state",
x: "key",
y: "population",
keys: ["Under 5 Years", "5 to 13 Years", "14 to 17 Years", "18 to 24 Years", "25 to 44 Years", "45 to 64 Years", "65 Years and Over"],
groups: d3.groupSort(data, v => d3.sum(v, d => d.population), d => d.state).reverse(),
colorRange: ["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]
})
Insert cell
groupedBarChart(data, {
fx: "state",
x: "key",
y: "population",
keys: ["Under 5 Years", "5 to 13 Years", "14 to 17 Years", "18 to 24 Years", "25 to 44 Years", "45 to 64 Years", "65 Years and Over"],
groups: d3.groupSort(data, v => d3.sum(v, d => d.population), d => d.state),
colorRange: ["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"],
type: "lollipop" // 💡
})
Insert cell
function groupedBarChart(data, {
x = "key",
fx = "group",
y = "value",
fy,
keys,
groups,
colorRange,
color = { domain: keys, range: colorRange },
type = "bars",
grid = type !== "lollipop",
...rest
}) {
return Plot.plot({
marginLeft: 50,
color,
facet: {
data,
x: fx,
y: fy
},
fx: {
domain: groups,
axis: "bottom",
label: null,
},
y: {
tickFormat: "s",
nice: true,
grid
},
x: {
axis: null,
domain: keys,
},
marks: type === "lollipop"
? [
Plot.link(data, {x1: x, x2: x, y1: () => 0, y2: y, stroke: x, strokeWidth: 3}),
Plot.dot(data, {x, y, fill: x, r: 5}),
Plot.ruleY([0])
]
: [
Plot.barY(data, {x, x2: x, y, fill: x}),
Plot.ruleY([0])
],
...rest
});
}
Insert cell
Insert cell
groupedBarChart(
[
...d3
.rollup(
penguins,
(v) => ({
"median bill length": d3.median(v, (d) => d.bill_length),
island: v[0].island,
sex: v[0].sex?.[0],
species: v[0].species
}),
(d) => [d.island, d.sex, d.species].join(" / ")
)
.values()
],
{
fx: "island",
x: "species",
y: "median bill length",
fy: "sex",
type: "lollipop",
width: 250,
height: 260,
grid: true
}
)
Insert cell
[
...d3
.rollup(
penguins,
(v) => ({
"median bill length": d3.median(v, (d) => d.bill_length),
island: v[0].island,
sex: v[0].sex?.[0],
species: v[0].species
}),
(d) => [d.island, d.sex, d.species].join(" / ")
)
.values()
]
Insert cell
import {data as penguins} from "@observablehq/plot-exploration-penguins"
Insert cell

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.
Learn more