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-LiteG2: Radical Bars, G24.0🔧 G2: Electricity Usage of Mike Bostock, 2019🔧 G2: The Impact of VaccinesG2: Streamgraph TransitionsG2: Map DemoG2: Utils
🔧 G2: Pie Chart, Theta
chart = {
const chart = new G2.Chart({
width,
height: 800
});
const names = new Set(population.map((d) => d.name));
const colors = d3.quantize(
(t) => d3.interpolateSpectral(t * 0.8 + 0.1),
names.size
);
chart.coordinate({ type: "theta" });
chart
.interval()
.data(population)
.scale("color", { range: colors, guide: null })
.encode("y", "value")
.encode("color", "name")
.encode("label", "name")
.encode("tooltip", "value")
.style("label", { position: "inside" })
.style("stroke", "white");
return node(chart.render());
}
Improvements:
[ ] Add QuantizeSequential Scale.
[ ] inside position support radius position.
[ ] Support inset options for interval.
[ ] Path animation
{
const options = {
type: "interval",
coordinates: [{ type: "theta" }],
scale: {
color: {
guide: null,
interpolator: (t) => d3.interpolateSpectral(t * 0.8 + 0.1)
}
},
encode: {
y: "value",
color: "name",
label: "name"
},
style: {
inset: 0.1
},
children: [
{
type: "text",
encode: { text: "name" },
transform: [{ type: "hideOverlap" }],
style: { position: "inside", radius: 0.8 }
},
{
text: "text",
encode: { text: "value" },
transform: [{ type: "hideOverlap" }],
style: { position: "inside", radius: 0.8, dy: "1em" }
}
]
};
return md`A better spec...`;
}
PieChart(population, {
name: (d) => d.name,
value: (d) => d.value,
width,
height: 500
})
import { PieChart } from "@d3/pie-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.
