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: 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: Map DemoG2: Utils
G2: Streamgraph Transitions
{
const area = {
type: "area",
paddingLeft: 0,
paddingRight: 0,
paddingBottom: 0,
paddingTop: 0,
axis: false,
data,
scale: {
color: { type: "identity" }
},
encode: {
x: "x",
y: "y",
color: "color",
series: "series",
key: (d) => `(${d.x}, ${d.y})`,
shape: "smooth"
}
};
const chart = G2.render({
type: "timingKeyframe",
width: width,
height: 500,
direction: "alternate",
iterationCount: 10,
duration: 1500,
children: [
area,
{ ...area, transform: [{ type: "stackY" }] },
{ ...area, transform: [{ type: "stackY" }, { type: "normalizeY" }] },
{ ...area, transform: [{ type: "stackY" }, { type: "symmetryY" }] }
]
});
return chart;
}
import { bumps } from "@d3/streamgraph-transitions"
G2 = require("@antv/g2@5.0.0-beta.4/dist/g2.min.js")
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.
