G2: Gallery🔧 G2: Bar Chart🔧 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, 2019🔧 G2: The Impact of VaccinesG2: Streamgraph TransitionsG2: Map DemoG2: Utils
🔧 G2: Bar Chart, Horizontal
chart = {
const chart = new G2.Chart({
width,
height: 800
});
const xy = (node) => node.encode("x", "letter").encode("y", "frequency");
chart.coordinate({ type: "transpose" }).data(alphabet);
chart
.interval()
.transform({ type: "sortBy", fields: ["frequency"], order: "DES" })
.scale("y", { guide: { position: "top", formatter: d3.format(".0%") } })
.call(xy)
.encode("color", "steelblue");
chart
.text()
.call(xy)
.encode("text", (d) =>
d.frequency > 0.005 ? d3.format(".1%")(d.frequency) : ""
)
.encode("color", (d) => (d.frequency > 0.005 ? "white" : "black"))
.scale("color", { type: "identity", independent: true })
.style("textAnchor", "end")
.style("textBaseline", "middle")
.style("fontSize", 12)
.style("dx", -5);
return node(chart.render());
}
{
const options = {
type: "view",
data: alphabet,
coordinates: [{ type: "transpose" }],
width,
children: [
{
type: "interval",
transform: [{ type: "sortX", channel: "y", reverse: true }],
scale: { y: { formatter: ".1%" } },
encode: { x: "letter", y: "frequency", color: "steelblue" }
},
{
type: "text",
encode: {
x: "letter",
y: "frequency",
text: (d) => d3.format(".1%")(d.frequency),
color: (d) => (d.frequency > 0.005 ? "white" : "black"),
textAnchor: (d) => (d.frequency > 0.005 ? "end" : "start"),
dx: (d) => (d.frequency > 0.005 ? -5 : 5)
},
style: {
textBaseline: "middle",
fontSize: 12
}
}
]
};
return md`A better spec...`;
}
{
const options = {
type: "interval",
width,
data: alphabet,
coordinates: [{ type: "transpose" }], // +
transform: [
{ type: "sortX", channel: "y", reverse: true },
{ type: "adjustLabelPosition" },
{ type: "adjustLabelColor" }
],
scale: { y: { formatter: ".1%" } },
encode: {
x: "letter",
y: "frequency",
color: "steelblue"
},
labels: [{ text: "frequency", baseline: "middle", fontSize: 12 }]
// children: [
// {
// type: "text",
// transform: [{ type: "adjustPosition" }, { type: "adjustColor" }],
// encode: {
// text: { value: "frequency", formatter: ".1%" }
// },
// style: {
// baseline: "middle",
// fontSize: 12
// }
// }
// ]
};
return md`The best spec...`;
}
// D3
BarChart(alphabet, {
x: (d) => d.frequency,
y: (d) => d.letter,
yDomain: d3.groupSort(
alphabet,
([d]) => -d.frequency,
(d) => d.letter
), // sort by descending frequency
xFormat: "%",
xLabel: "Frequency →",
width,
color: "steelblue"
})
import { node } from "@pearmini/g2-utils"
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.
