Published
Edited
Sep 6, 2022
Insert cell
Insert cell
chart = {
const chart = new G2.Chart({
width,
height: 1200,
paddingLeft: 50
});

chart.coordinate({ type: "transpose" });

chart
.interval()
.data(stateages)
.scale("color", { range: d3.schemeSpectral[ages.length] })
.scale("x", {
domain: d3.groupSort(
stateages,
(D) => d3.sum(D, (d) => -d.population),
(d) => d.state
)
})
.scale("y", {
tickCount: 20,
guide: { formatter: d3.format("~s"), position: "top" }
})
.encode("x", "state")
.encode("y", "population")
.encode("color", "age");

return node(chart.render());
}
Insert cell
Insert cell
Insert cell
{
const options = {
type: "interval",
width: 500,
paddingLeft: 50,
data: stateages,
coordinates: [{ type: "transpose" }],
scale: {
color: { range: d3.schemeSpectral[9] },
y: { formatter: "s", position: "top", tickCount: 20 }
},
transform: [{ type: "sortX", y: "sum", reverse: true }],
encode: {
x: "state",
y: "population",
color: "age"
}
};
return md`A better spec...`;
}
Insert cell
Insert cell
Plot.plot({
width,
x: { axis: "top", tickFormat: "s" },
color: { scheme: "spectral", domain: ages },
marks: [
Plot.barX(stateages, {
y: "state",
x: "population",
fill: "age",
sort: { y: "x", reverse: true }
}),
Plot.ruleX([0])
]
})
Insert cell
d3Chart = StackedBarChart(stateages, {
x: (d) => d.population / 1e6,
y: (d) => d.state,
z: (d) => d.age,
xLabel: "Population (millions) →",
yDomain: d3.groupSort(
stateages,
(D) => d3.sum(D, (d) => d.population),
(d) => d.state
), // sort y by x
zDomain: ages,
colors: d3.schemeSpectral[ages.length],
width
})
Insert cell
Insert cell
Insert cell
Insert cell
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