G2: Gallery🔧 G2: Bar Chart🔧 G2: Bar Chart, Horizontal🔧 G2: Bar Chart, Diverging🔧 G2: Stacked Bar Chart🔧 G2: Stacked Bar Chart, Horizontal🔧 G2: Stacked Bar Chart, Normalized🔧 G2: Bar Chart, Grouped🔧 G2: Stacked Bar Chart, Diverging🔧 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: Marimekko Chart
chart = {
const chart = new G2.Chart({
width: 1152,
height: 1152,
paddingLeft: 0,
paddingRight: 0
});
const xy = (node) =>
node
.transform({ type: "stackY", reverse: true })
.transform({ type: "normalizeY" })
.encode("x", "x")
.encode("y", (d) => +d.value);
chart.data(data);
chart
.interval()
.scale("y", { guide: null, padding: 0 })
.scale("color", { range: d3.schemeTableau10, guide: null })
.scale("x", {
paddingOuter: 0,
paddingInner: 0.01,
field: "",
guide: { position: "top" },
flex: d3
.rollups(
data,
(v) => d3.sum(v, (d) => d.value),
(d) => d.x
)
.map((d) => d[1])
})
.call(xy)
.encode("color", "y")
.style("fillOpacity", 0.3);
chart
.text()
.call(xy)
.encode("text", "y")
.style("dx", -250)
.style("dy", "1em")
.style("fill", "white")
.style("fontSize", 10);
chart
.text()
.call(xy)
.encode("text", "value")
.style("dx", -250)
.style("dy", "2em")
.style("fill", "white")
.style("fontSize", 10);
return node(chart.render());
}
{
const options = {
type: "interval",
transform: [
{ type: "stackY", reverse: true },
{ type: "normalizeY" },
{ type: "normalize", channel: "fillOpacity", basis: "sum" } // +
],
labels: [
// +
{ text: "y", position: "left top", dy: "1em" },
{ text: "value", position: "left top", dy: "2em" }
],
scale: {
x: {
padding: 0,
title: false,
position: "top",
formatter: (d, f) => `${d}, ${f}`, // +
flex: d3.rollups(
// +
data,
(v) => d3.sum(v, (d) => d.value),
(d) => d.x
)
},
y: { padding: 0, display: false },
color: { display: false, range: d3.schemeTableau10 }
},
encode: {
x: "x",
y: { value: "value", format: "+" }, // +
color: "y",
fillOpacity: "value"
},
style: {
inset: 10 // +
}
};
return md`A better spec...`;
}
G2 = require("@antv/g2@5.0.0-alpha.0")
import { node } from "@pearmini/g2-utils"
data
import { data } from "@d3/marimekko-chart"
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.
