chart = {
const chart = new G2.Chart({ width, height: 500 });
chart
.interval()
.data(alphabet)
.transform({ type: "sortBy", fields: ["frequency"], order: "DES" })
.scale("y", { guide: { formatter: d3.format(".0%") } })
.encode("x", "letter")
.encode("y", "frequency")
.encode("color", "steelblue");
return node(chart.render());
}
{
const options = {
type: "interval",
width,
height: 500,
data: alphabet,
transform: [{ type: "sortX", orderBy: "y", reverse: true }], // +
scale: {
y: { formatter: ".0%" } // +
},
encode: {
x: "letter",
y: "frequency",
color: "steelblue"
}
};
return md`A better spec...`;
}
// Plot
Plot.plot({
width: width,
height: 500,
y: { grid: true, tickFormat: ".0%" },
marks: [
Plot.barY(alphabet, {
x: "letter",
y: "frequency",
fill: "steelblue",
sort: { x: "y", reverse: true }
})
]
})
// VegaLite
vegalite({
mark: "bar",
autosize: { type: "fit" },
width,
height: 500,
data: { values: alphabet },
encoding: {
x: {
field: "letter",
type: "ordinal",
sort: { field: "frequency", order: "descending" }
},
y: { field: "frequency", type: "quantitative" }
}
})
// D3
BarChart(alphabet, {
x: (d) => d.letter,
y: (d) => d.frequency,
xDomain: d3.groupSort(
alphabet,
([d]) => -d.frequency,
(d) => d.letter
), // sort by descending frequency
yFormat: "%",
yLabel: "↑ Frequency",
width,
height: 500,
color: "steelblue"
})
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.
