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, 2019G2: Streamgraph TransitionsG2: Map DemoG2: Utils
🔧 G2: The Impact of Vaccines
chart = {
const chart = new G2.Chart({
width,
height: 800,
paddingLeft: 60
});
const color = d3.scaleSequentialSqrt(
[0, d3.max(tabluarData, (d) => d.value)],
d3.interpolatePuRd
);
const annotateText = (node) =>
node
.data([0])
.encode("x", 1963)
.encode("y", 1)
.scale("y", { type: "identity", independent: true, guide: null })
.scale("x", { type: "band" })
.style("fill", "black")
.style("textAnchor", "center")
.style("fontSize", 10);
chart
.grid()
.data(tabluarData)
.encode("x", "year")
.encode("y", "name")
.encode("tooltip", { type: "field", value: "value" })
.encode("color", (d) =>
isNaN(d.value) ? "#eee" : d.value === 0 ? "#fff" : color(d.value)
)
.scale("y", { range: [0, 1], domain: data.names })
.scale("x", {
domain: data.years,
guide: {
position: "top",
formatter: (d) => (+d % 10 === 0 ? d : "") + ""
}
})
.scale("color", { guide: null, type: "identity" })
.animate("enter", { type: null });
chart
.annotationLineX()
.data([0])
.encode("x", 1963)
.scale("x", { type: "band" })
.style("stroke", "black");
chart.text().call(annotateText).encode("text", 1963).style("dy", "0.5em");
chart
.text()
.call(annotateText)
.encode("text", "Measles vaccine introduced")
.style("dy", "1.2em")
.style("fontWeight", "bold");
return node(chart.render());
}
{
const options = {
type: "view",
children: [
{
type: "cell",
width,
data: tabluarData,
transform: [{ type: "sortX" }, { type: "sortY" }],
scale: {
color: {
interpolator: d3.interpolatePuRd,
relations: [
[isNaN, "#eee"],
[0, "#fff"]
]
},
y: { range: [0, 1] },
x: { position: "top", formatter: (d) => (+d % 10 === 0 ? d : "") }
},
encode: {
x: "year",
y: "name",
color: "value"
}
},
{ type: "lineX", data: [1663] },
{
type: "text",
encode: {
x: 1963,
text: 1963,
y: { value: 1, visual: true },
translateX: false
},
style: { dy: "0.5em" }
},
{
type: "text",
encode: {
x: 1963,
text: "Measles vaccine introduced",
y: { value: 1, visual: true },
translateX: false
},
style: { dy: "1.2em" }
}
]
};
return md`A better spec...`;
}
d3Chart
import { data, chart as d3Chart } from "@mbostock/the-impact-of-vaccines"
G2 = require("@antv/g2@5.0.0-alpha.0")
import { node } from "@pearmini/g2-utils"
vaccines = FileAttachment("vaccines.json").json()
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.
