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)
.transform({ type: "normalizeY" })
.scale("color", { range: d3.schemeSpectral[ages.length] })
.scale("x", {
domain: d3.groupSort(
stateages,
(D) => -D[0].population / d3.sum(D, (d) => d.population),
(d) => d.state
)
})
.scale("y", {
tickCount: 20,
guide: { position: "top", formatter: d3.format(".0%") }
})
.encode("x", "state")
.encode("y", "population")
.encode("color", "age");

return node(chart.render());
}
Insert cell
Insert cell
chart.options()
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: ".0%", position: "top", tickCount: 20 }
},
transform: [
{ type: "normalizeY" },
{ type: "sortX", channel: "y1", reducer: "first", reverse: true }
],
encode: {
x: "state",
y: "population",
color: "age"
}
};
return md`A better spec...`;
}
Insert cell
Insert cell
// Plot
Plot.plot({
width,
x: { axis: "top", percent: true },
color: { scheme: "spectral", domain: ages },
marks: [
Plot.barX(stateages, {
y: "state",
x: "population",
fill: "age",
offset: "expand",
sort: { y: "x2", reduce: "first", reverse: true }
}),
Plot.ruleX([0, 1])
]
})
Insert cell
// D3
StackedBarChart(stateages, {
x: (d) => d.population,
y: (d) => d.state,
z: (d) => d.age,
yDomain: d3.groupSort(
stateages,
(D) => D[0].population / d3.sum(D, (d) => d.population), // proportion of first age group
(d) => d.state // sort y by x
),
zDomain: ages,
colors: d3.schemeSpectral[ages.length],
width
})
Insert cell
Insert cell
G2 = require("@antv/g2@5.0.0-alpha.0")
Insert cell
import {
stateages,
StackedBarChart,
ages
} from "@d3/stacked-normalized-horizontal-bar"
Insert cell
import { node } from "@pearmini/g2-utils"
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