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: 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: Streamgraph TransitionsG2: Map DemoG2: Utils
🔧 G2: Stacked Bar Chart, Diverging
chart = {
const chart = new G2.Chart({ width, paddingLeft: 120 });
const xy = (node) =>
node
.encode("x", "speaker")
.encode("y", "proportion")
.transform({
type: "stackY",
orderBy: (d) => Math.abs(politifact.rulings.indexOf(d.ruling) - 3)
})
.scale("x", {
guide: null,
domain: d3.groupSort(
politifact,
(D) => d3.sum(D, (d) => Math.min(0, d.proportion)),
(d) => d.speaker
)
});
chart.coordinate({ type: "transpose" }).data(politifact);
chart
.interval()
.scale("color", {
range: d3.schemeSpectral[politifact.rulings.length],
domain: politifact.rulings
})
.scale("y", {
guide: { formatter: d3.format("~%"), position: "top" },
tickCount: 15
})
.call(xy)
.encode("color", "ruling");
chart.annotationLineY().data([0]).encode("y", 0).style("stroke", "black");
chart
.text()
.encode("text", "speaker")
.call(xy)
.transform({ type: "selectY", selector: "min" })
.encode("series", "speaker")
.style("fill", "black")
.style("textAnchor", "end")
.style("dx", -5)
.style("dy", 5);
chart
.text()
.data([0])
.encode("text", "← more lies · Truthiness · more truths →")
.scale("x", { independent: true, type: "identity" })
.encode("x", 0)
.encode("y", 0)
.style("textAnchor", "center")
.style("fill", "black")
.style("dy", -30);
return node(chart.render());
}
{
const options = {
type: "view",
coorindates: [{ type: "transpose" }],
children: [
{
type: "interval",
data: politifact,
trasnform: [{ type: "stackY", orderBy: "series", diverging: true }], //+
scale: {
x: { display: false },
color: {
range: d3.schemeSpectral[politifact.rulings.length],
domain: politifact.rulings
},
y: { formatter: "~%", position: "top", tickCount: 15 }
},
encode: {
x: "speaker",
y: "proportion",
color: "ruling"
},
labels: [
{
text: "speaker",
textAnchor: "end",
dx: -5,
dy: -5,
transform: [
{
type: "selectY",
selector: "min",
groupBy: "speaker"
}
]
}
]
},
{ type: "annotaion.lineY", data: [0] },
{
type: "text",
data: [0, 0, "← more lies · Truthiness · more truths →"],
scale: { x: { type: "identity" } },
style: { dy: -30 }
}
]
};
return md`A better spec...`;
}
// D3
d3Chart = StackedBarChart(politifact, {
x: (d) => d.proportion,
y: (d) => d.speaker,
z: (d) => d.ruling,
xFormat: "+%",
xLabel: "← more lies · Truthiness · more truths →",
yDomain: d3.groupSort(
politifact,
(D) => d3.sum(D, (d) => -Math.min(0, d.proportion)),
(d) => d.speaker
),
zDomain: politifact.rulings,
colors: d3.schemeSpectral[politifact.rulings.length],
width,
marginLeft: 70
})
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.
