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: 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: World History Timeline
chart = {
const chart = new G2.Chart({
width,
height: 1000,
paddingLeft: 30
});
chart
.coordinate({ type: "transpose" })
.data(data)
.call((chart) =>
order === "time"
? chart
: chart.transform({
type: "connector",
callback: (data) =>
groupSort(
data,
([, values]) => d3.min(values, (d) => d.start),
(d) => d.region
)
})
);
chart
.interval()
.scale("x", {
guide: null
})
.scale("color", { range: d3.schemeSet2 })
.scale("y", {
guide: { formatter: (d) => Math.abs(d) + (d < 0 ? "BC" : "AC") }
})
.encode("x", "civilization")
.encode("y", ["start", "end"])
.encode("color", "region");
chart
.text()
.encode("x", "civilization")
.encode("y", (d) => (d.end > -1500 && d.start > -3000 ? d.start : d.end))
.encode("text", "civilization")
.style("textAnchor", "end")
.style("fontSize", 10)
.style("fill", "black")
.style("dy", 5)
.style("dx", -5);
return node(chart.render());
}
{
const options = {
type: "view",
coordinates: [{ type: "transpose" }],
children: [
{
type: "interval",
transform: order === "region" && [
{ type: "sortX", group: "color", channel: "y" }
],
scale: {
color: { range: d3.schemeSet2 },
y: { formatter: (d) => Math.abs(d) + (d < 0 ? "BC" : "AC") },
x: { display: null }
},
encode: {
x: "civilization",
y: ["start", "end"],
color: "region"
},
labels: [
{
text: "civilization",
position: (d) =>
d.end > -1500 && d.start > -3000 ? "start" : "end",
textAnchor: (d) =>
d.end > -1500 && d.start > -3000 ? "start" : "end"
}
]
},
{
type: "axisY",
style: { position: "top", scales: ["y"] }
}
]
};
return md`A better spec...`;
}
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.
