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: 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: Bars, Vega-Lite
{
const chart = new G2.Chart();
chart
.interval()
.data([
{ a: "A", b: 28 },
{ a: "B", b: 55 },
{ a: "C", b: 43 },
{ a: "D", b: 91 },
{ a: "E", b: 81 },
{ a: "F", b: 53 },
{ a: "G", b: 19 },
{ a: "H", b: 87 },
{ a: "I", b: 52 }
])
.encode("x", "a")
.encode("y", "b")
.encode("color", "steelblue");
return chart.render().node();
}
{
const chart = new G2.Chart();
chart
.interval()
.data({
type: "fetch",
value: url("data/cars.json")
})
.transform({ type: "groupX", y: "count" })
.encode("x", "Origin")
.encode("color", "steelblue");
return chart.render().node();
}
{
const chart = new G2.Chart();
chart.coordinate({ type: "transpose" });
chart
.interval()
.data({
type: "fetch",
value: url("data/population.json"),
transform: [
{
type: "filterBy",
fields: ["year"],
callback: (d) => d === 2000
}
]
})
.transform({ type: "groupX", y: "sum" })
.scale("y", { guide: { formatter: d3.format("~s") } })
.encode("x", "age")
.encode("y", "people")
.encode("color", "steelblue");
return chart.render().node();
}
{
const chart = new G2.Chart();
const data = (
await fetch(url("data/population.json")).then((res) => res.json())
).filter((d) => d.year === 2000);
chart.coordinate({ type: "transpose" });
chart
.interval()
.data(data)
.transform({ type: "groupX", y: "sum" })
.scale("y", { guide: { formatter: d3.format("~s") } })
.scale("x", {
domain: d3.groupSort(
data,
(D) => -d3.sum(D, (d) => d.people),
(d) => d.age
)
})
.encode("x", "age")
.encode("y", "people")
.encode("color", "steelblue");
return chart.render().node();
}
{
const chart = new G2.Chart();
chart
.interval()
.data([
{ category: "A", group: "x", value: 0.1 },
{ category: "A", group: "y", value: 0.6 },
{ category: "A", group: "z", value: 0.9 },
{ category: "B", group: "x", value: 0.7 },
{ category: "B", group: "y", value: 0.2 },
{ category: "B", group: "z", value: 1.1 },
{ category: "C", group: "x", value: 0.6 },
{ category: "C", group: "y", value: 0.1 },
{ category: "C", group: "z", value: 0.2 }
])
.encode("x", "group")
.encode("color", "category")
.encode("y", "value")
.encode("series", "category")
.scale("color", { range: d3.schemeTableau10 });
return chart.render().node();
}
{
const chart = new G2.Chart({
width
});
const x = (node) => node.encode("x", "Major Genre");
const repeat = (node, field) =>
node
.transform({ type: "groupX", y: "sum" })
.encode("y", field)
.encode("color", () => field)
.encode("series", () => field);
chart.data({ type: "fetch", value: url("data/movies.json") });
chart
.interval()
.call(x)
.call(repeat, "Worldwide Gross")
.scale("y", { guide: { formatter: d3.format("~s") } })
.scale("color", { range: d3.schemeTableau10 });
chart.interval().call(x).call(repeat, "US Gross");
return chart.render().node();
}
{
const options = {
type: "interval",
data: {
type: "fetch",
value: url("data/seattle-weather.csv")
},
transform: [{ type: "unitX", y: "count", unit: "month" }],
scale: {
color: {
domain: ["sun", "fog", "drizzle", "rain", "snow"],
range: ["#e7ba52", "#c7c7c7", "#aec7e8", "#1f77b4", "#9467bd"]
}
},
encode: {
x: "date",
color: "weather"
}
};
return md`${await FileAttachment("image@1.png").image()}`;
}
{
const options = {
type: "interval",
data: {
type: "fetch",
value: url("data/seattle-weather.csv")
},
transform: [{ type: "unitX", y: "count", unit: "month" }],
encode: {
x: "date",
color: "weather"
},
style: {
radius: [3, 3, 0, 0]
}
};
return md`${await FileAttachment("image@4.png").image()}`;
}
{
const options = {
type: "interval",
data: {
type: "fetch",
value: url("data/barley.json")
},
coordinates: [{ type: "transpose" }],
transform: [{ type: "groupX", y: "sum" }],
encode: {
x: "variety",
y: "yield",
color: "site"
}
};
return md`${await FileAttachment("image@6.png").image()}`;
}
{
// TODO
return md`${await FileAttachment("image@7.png").image()}`;
}
{
const chart = new G2.Chart();
chart
.interval()
.data({
type: "fetch",
value: url("data/population.json"),
transform: [{ type: "filterBy", year: (d) => d === 2000 }]
})
.transform({ type: "groupX", y: "sum" })
.transform({ type: "stackY" })
.transform({ type: "normalizeY" })
.scale("color", { type: "ordinal", range: ["#675193", "#ca8861"] })
.encode("x", "age")
.encode("y", "people")
.encode("color", "sex");
return md`${await FileAttachment("image@3.png").image()}`;
}
{
const chart = new G2.Chart({ height: 300 });
chart.coordinate({ type: "transpose" });
chart
.interval()
.data([
{ task: "A", start: 1, end: 3 },
{ task: "B", start: 3, end: 8 },
{ task: "C", start: 8, end: 10 }
])
.encode("x", "task")
.encode("y", ["start", "end"])
.encode("color", "steelblue");
return chart.render().node();
}
{
const chart = new G2.Chart();
chart
.interval()
.data([
{ color: "red", b: 28 },
{ color: "green", b: 55 },
{ color: "blue", b: 43 }
])
.encode("x", "color")
.encode("y", "b")
.encode("color", "color")
.scale("color", { type: "identity" });
return chart.render().node();
}
{
const options = {
type: "interval",
data: {
type: "fetch",
value: url("data/population.json"),
transform: [{ type: "filterBy", callback: (d) => d.year === 2000 }]
},
stack: false,
transform: [{ type: "groupX", y: "sum" }],
encode: {
x: "age",
y: "population"
},
style: {
fillOpacity: 0.7
}
};
return md`${await FileAttachment("image@8.png").image()}`;
}
{
const chart = new G2.Chart();
chart.coordinate({ type: "transpose" });
chart
.interval()
.data({
type: "fetch",
value: url("data/population.json"),
transform: [
{ type: "filterBy", fields: ["year"], callback: (d) => d === 2000 }
]
})
//.transform({ type:'sortX', reverse: true })
.scale("y", {
guide: { formatter: (d) => d3.format("~s")(Math.abs(d)), nice: true }
})
.scale("color", { type: "ordinal", range: ["#675193", "#ca8861"] })
.scale("x", { range: [1, 0] })
.encode("y", (d) => (d.sex === 2 ? -d.people : d.people))
.encode("x", "age")
.encode("color", (d) => (d.sex === 2 ? "Female" : "Male"));
return chart.render().node();
}
{
const chart = new G2.Chart();
const data = (
await fetch(url("data/population.json")).then((res) => res.json())
).filter((d) => d.year === 2000);
const flex = chart.flex().ratio([1, 0.15, 1]);
const symmetry = (node, sex, color, left = false) =>
node
.view()
.call((node) => (left ? node.paddingRight(0) : node.paddingLeft(0)))
.coordinate({ type: "transpose" })
.interval()
.scale("x", { guide: null, range: [1, 0] })
.scale("y", {
range: left ? [0, 1] : [1, 0],
guide: { formatter: d3.format("~s") },
field: ""
})
.data(data.filter((d) => d.sex === sex))
.encode("x", "age")
.encode("y", "people")
.encode("color", color);
flex.call(symmetry, 2, "#675193", true);
flex
.view()
.coordinate({ type: "transpose" })
.text()
.data(data.filter((d) => d.sex === 2))
.scale("y", { type: "identity" })
.scale("x", { guide: null, type: "band" })
.encode("x", "age")
.encode("y", 0.5)
.encode("text", "age")
.style("textAlign", "center")
.style("fill", "black")
.style("dy", "0.25em");
flex.call(symmetry, 1, "#ca8861");
return chart.render().node();
}
{
const chart = new G2.Chart();
const xy = (node) => node.encode("x", "a").encode("y", "b");
chart.coordinate({ type: "transpose" }).data([
{ a: "A", b: 28 },
{ a: "B", b: 55 },
{ a: "C", b: 43 }
]);
chart.interval().call(xy).encode("color", "steelblue");
chart
.text()
.call(xy)
.encode("text", "a")
.style("fill", "black")
.style("dx", 3);
return chart.render().node();
}
{
const chart = new G2.Chart();
const xy = (node) =>
node.encode("x", "Major Genre").transform({ type: "groupX", y: "mean" });
chart
.coordinate({ type: "transpose" })
.data({ type: "fetch", value: url("data/movies.json") });
chart
.interval()
.call(xy)
.encode("y", "IMDB Rating")
.encode("color", "#ddd")
.scale("y", { domain: [0, 10] })
.scale("x", { guide: null });
chart
.text()
.call(xy)
.encode("y", 1)
.encode("text", (d) => d["Major Genre"] + "")
.scale("y", { type: "identity", independent: true, guide: null })
.style("fill", "black")
.style("dx", 3)
.style("textBaseline", "middle");
return chart.render().node();
}
{
const options = {
type: "interval",
data: {
type: "fetch",
value: url("data/seattle-weather.csv"),
format: "csv"
},
transform: [{ type: "unitX", y: "mean", interval: "month" }],
scale: { x: { formatter: (d) => d[0] } },
encode: {
x: "date",
y: "precipitation"
}
};
return md`${await FileAttachment("image@9.png").image()}`;
}
{
const chart = new G2.Chart({
paddingLeft: 80
});
const types = [
"Strongly disagree",
"Disagree",
"Neither agree nor disagree",
"Agree",
"Strongly agree"
];
chart.coordinate({ type: "transpose" });
chart
.interval()
.data(questions)
.transform({
type: "stackY",
orderBy: (d) => Math.abs(types.indexOf(d.type) - 3)
})
.scale("color", {
domain: types,
range: ["#c30d24", "#f3a583", "#cccccc", "#94c6da", "#1770ab"]
})
.scale("y", { nice: true })
.encode("x", "question")
.encode("y", (d) =>
d.type === "Disagree" || d.type === "Strongly disagree"
? -d.percentage
: d.type === "Neither agree nor disagree"
? -d.percentage / 2
: d.percentage
)
.encode("color", "type");
chart.render();
return chart.node();
}
{
const chart = new G2.Chart();
chart
.interval()
.data([
{ a: "A", b: -28 },
{ a: "B", b: 55 },
{ a: "C", b: -33 },
{ a: "D", b: 91 },
{ a: "E", b: 81 },
{ a: "F", b: 53 },
{ a: "G", b: -19 },
{ a: "H", b: 87 },
{ a: "I", b: 52 }
])
.encode("x", "a")
.encode("y", "b")
.encode("color", "steelblue");
chart.annotationLineY().data([0]).encode("y", 0).style("stroke", "black");
chart.render();
return chart.node();
}
{
return md`${await FileAttachment("image@10.png").image()}`
}
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.
