G2: Gallery🔧 G2: Bar Chart🔧 G2: Bar Chart, Horizontal🔧 G2: Bar Chart, Diverging🔧 G2: Stacked Bar Chart, Horizontal🔧 G2: Stacked Bar Chart, Normalized🔧 G2: Bar Chart, Grouped🔧 G2: Stacked Bar Chart, Diverging🔧 G2: Marimekko Chart🔧 G2: World History Timeline🔧 G2: Stacked Bar Chart, Revenue by Music Format, 1973–2018🔧 G2: Bars, Vega-Lite🔧 G2: Pie Chart, ThetaG2: Radical Bars, G24.0🔧 G2: Electricity Usage of Mike Bostock, 2019🔧 G2: The Impact of VaccinesG2: Streamgraph TransitionsG2: Map DemoG2: Utils
🔧 G2: Stacked Bar Chart
chart = {
const chart = new G2.Chart({
width,
paddingLeft: 50
});
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", { guide: { formatter: d3.format("~s") } })
.encode("x", "state")
.encode("y", "population")
.encode("color", "age");
return node(chart.render());
}
Inputs.table(stateages)
{
const options = {
type: "interval",
width: 500,
paddingLeft: 50,
data: stateages,
scale: {
color: { range: d3.schemeSpectral[9] },
y: { formatter: "s" }
},
transform: [{ type: "sortX", channel: "y", reverse: true }],
encode: {
x: "state",
y: "population",
color: "age"
}
};
return md`A better spec...`;
}
// Plot
Plot.plot({
width,
y: { tickFormat: "s" },
color: {
scheme: "spectral",
domain: ages
},
marks: [
Plot.barY(stateages, {
x: "state",
y: "population",
fill: "age",
sort: { x: "y", reverse: true }
}),
Plot.ruleY([0])
]
})
// D3
d3Chart = StackedBarChart(stateages, {
x: (d) => d.state,
y: (d) => d.population / 1e6,
z: (d) => d.age,
xDomain: d3.groupSort(
stateages,
(D) => d3.sum(D, (d) => -d.population),
(d) => d.state
),
yLabel: "↑ Population (millions)",
zDomain: ages,
colors: d3.schemeSpectral[ages.length],
width,
height: 500
})
import { Legend, Swatches } from "@d3/color-legend"
import { stateages, StackedBarChart, ages } from "@d3/stacked-bar-chart"
G2 = require("@antv/g2@5.0.0-alpha.0")
import { node } from "@pearmini/g2-utils"
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.
