group = {
const chart = new G2.Chart({ width, paddingLeft: 50 });
chart
.interval()
.data(stateages)
.scale("color", {
range: d3.schemeSpectral[ages.length]
})
.scale("y", { guide: { formatter: d3.format("~s") } })
.scale("x", {
domain: d3
.groupSort(
stateages,
(D) => d3.sum(D, (d) => -d.population),
(d) => d.state
)
.slice(0, 6)
})
.encode("x", "state")
.encode("y", "population")
.encode("color", "age")
.encode("series", "age");
return node(chart.render());
}
facet = {
const chart = new G2.Chart({ width, paddingLeft: 50 });
const rect = chart
.rect()
.scale("x", {
guide: { position: "bottom" },
domain: d3
.groupSort(
stateages,
(D) => d3.sum(D, (d) => -d.population),
(d) => d.state
)
.slice(0, 6)
})
.data(stateages)
.encode("x", "state");
rect
.interval()
.frame(false)
.scale("x", { guide: null })
.scale("y", { guide: { formatter: d3.format("~s"), grid: false } })
.scale("color", { range: d3.schemeSpectral[ages.length] })
.encode("x", "age")
.encode("y", "population")
.encode("color", "age");
return node(chart.render());
}
{
const options = {
type: "interval",
width,
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",
series: "age"
}
};
return md`A better spec for group...`;
}
Plot.plot({
x: { axis: null, domain: ages },
y: { tickFormat: "s" },
color: { scheme: "spectral", domain: ages },
facet: { data: stateages, x: "state" },
width,
marks: [
Plot.barY(stateages, {
x: "age",
y: "population",
title: "age",
fill: "age",
sort: { fx: "y", reduce: "sum", limit: 6, reverse: true }
}),
Plot.ruleY([0])
]
})
GroupedBarChart(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
)
.slice(0, 6), // top 6
yLabel: "↑ Population (millions)",
zDomain: ages,
colors: d3.schemeSpectral[ages.length],
width,
height: 500
})
import { stateages, GroupedBarChart, ages } from "@d3/grouped-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.
