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: The Impact of VaccinesG2: Streamgraph TransitionsG2: Map DemoG2: Utils
🔧 G2: Electricity Usage of Mike Bostock, 2019
{
let [min, max] = d3.extent(data, (d) => d.usage);
max = Math.max(-min, max);
const color = d3.scaleDiverging([-max, 0, max], (t) =>
d3.interpolateRdBu(1 - t)
);
const formatMonth = d3.timeFormat("%b %-d");
const formatDate = d3.timeFormat("%-d");
const formatDay = (d) => (d.getDate() === 1 ? formatMonth : formatDate)(d);
const formatHour = (d) =>
d === 0 ? "12 AM" : d === 12 ? "12 PM" : (d % 12) + "";
return G2.render({
type: "grid",
width,
height: 4000,
data,
scale: {
x: { guide: { formatter: formatHour, position: "top" } },
y: { guide: { formatter: (d) => formatDay(new Date(d)) } },
color: { type: "identity" }
},
encode: {
x: (d) => d.date.getHours(),
y: (d) => +d3.timeDay(d.date),
color: (d) => color(d.usage)
},
animate: { enter: { type: null } }
});
}
{
const formatMonth = d3.timeFormat("%b %-d");
const formatDate = d3.timeFormat("%-d");
const formatDay = (d) => (d.getDate() === 1 ? formatMonth : formatDate)(d);
const formatHour = (d) =>
d === 0 ? "12 AM" : d === 12 ? "12 PM" : (d % 12) + "";
const options = {
type: "cell",
width,
data,
scale: {
x: { formatter: formatHour, position: "top" },
y: { formatter: formatDay },
color: {
type: "diverging",
interpolator: (t) => d3.interpolateRdBu(1 - t)
}
},
encode: {
x: (d) => d.date.getHours(),
y: (d) => d3.timeDay(d.date),
color: "usage"
}
};
return md`A better spec...`;
}
chart
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.
