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: 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, Revenue by Music Format, 1973–2018
chart = {
const chart = new G2.Chart({ width, height: 600 });
const colors = new Map([
["LP/EP", "#2A5784"],
["Vinyl Single", "#43719F"],
["8 - Track", "#5B8DB8"],
["Cassette", "#7AAAD0"],
["Cassette Single", "#9BC7E4"],
["Other Tapes", "#BADDF1"],
["Kiosk", "#E1575A"],
["CD", "#EE7423"],
["CD Single", "#F59D3D"],
["SACD", "#FFC686"],
["DVD Audio", "#9D7760"],
["Music Video (Physical)", "#F1CF63"],
["Download Album", "#7C4D79"],
["Download Single", "#9B6A97"],
["Ringtones & Ringbacks", "#BE89AC"],
["Download Music Video", "#D5A5C4"],
["Other Digital", "#EFC9E6"],
["Synchronization", "#BBB1AC"],
["Paid Subscription", "#24693D"],
["On-Demand Streaming (Ad-Supported)", "#398949"],
["Other Ad-Supported Streaming", "#61AA57"],
["SoundExchange Distributions", "#7DC470"],
["Limited Tier Paid Subscription", "#B4E0A7"]
]);
chart
.interval()
.data(data)
.transform({ type: "stackY", orderBy: "maxIndex", reverse: true })
.scale("color", {
domain: Array.from(colors.keys()),
range: Array.from(colors.values()),
guide: { size: 100, autoWrap: true, maxRows: 4, cols: 7 }
})
.scale("x", {
guide: { label: { autoHide: "greedy", showLast: false } }
})
.scale("y", {
field: "Revenue (billions, adj.)",
guide: { formatter: (d) => `${d / 1e9}` }
})
.scale("tooltip", { field: "vallue" })
.encode("x", "year")
.encode("y", "value")
.encode("color", "name")
.encode("tooltip", (d) => `${(d.value / 1e9).toFixed(2)}B`)
.encode("title", (d) => `${d.name}, ${d.year}`);
return node(chart.render());
}
{
const options = {
type: "interval",
height: 600,
paddingBottom: 100,
data: {
value: data,
formatter: { value: (d) => `${d.value / 1e9}B` }
},
transform: [
{ type: "stackY", orderBy: ["maxIndex", "value"], reverse: true }
],
scale: {
y: { title: "Revenue (billions, adj.)" },
x: { label: (d) => (d % 2 === 0 ? d : "") },
color: {
direction: "vertical",
rows: 4,
relations: [
["LP/EP", "#2A5784"],
["Vinyl Single", "#43719F"],
["8 - Track", "#5B8DB8"],
["Cassette", "#7AAAD0"],
["Cassette Single", "#9BC7E4"],
["Other Tapes", "#BADDF1"],
["Kiosk", "#E1575A"],
["CD", "#EE7423"],
["CD Single", "#F59D3D"],
["SACD", "#FFC686"],
["DVD Audio", "#9D7760"],
["Music Video (Physical)", "#F1CF63"],
["Download Album", "#7C4D79"],
["Download Single", "#9B6A97"],
["Ringtones & Ringbacks", "#BE89AC"],
["Download Music Video", "#D5A5C4"],
["Other Digital", "#EFC9E6"],
["Synchronization", "#BBB1AC"],
["Paid Subscription", "#24693D"],
["On-Demand Streaming (Ad-Supported)", "#398949"],
["Other Ad-Supported Streaming", "#61AA57"],
["SoundExchange Distributions", "#7DC470"],
["Limited Tier Paid Subscription", "#B4E0A7"]
]
}
},
encode: {
x: "year",
y: "value",
color: "name",
title: (d) => `${d.name}, ${d.year}`
}
};
return md`A better spec...`;
}
d3Chart
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.
