I'm a professor of mathematics at the University of North Carolina Asheville. I've also done a fair amount of consulting work over the years focusing on scientific and data visualization.
I'm happy to be part of the first Observable Ambassador's cohort.
jumpy_barplot = Plot.barY(alphabet.slice(0, n1), {
x: "letter",
y: "frequency",
fill: "steelblue"
}).plot({
round: fil_fix ? false : true,
paddingOuter: 0,
inset: 10,
width: 650,
height: 300,
x: { domain: alphabet.map((o) => o.letter).slice(0, n1) }
})
stable_barplot = {
let w = 650;
let h = 300;
let pad = 50;
let svg = d3.create("svg").attr("viewBox", [0, 0, w, h]);
// Here's where scaleBand is used:
let x_scale = d3
.scaleBand()
.domain(alphabet.map((o) => o.letter).slice(0, n2))
.range([pad, w - pad])
.padding(0.2);
// The y_scale is just linear
let max = d3.max(alphabet.map((o) => o.frequency).slice(0, n2));
let y_scale = d3
.scaleLinear()
.domain([0, max])
.range([h - pad, pad]);
svg
.append("g")
.selectAll("rect")
.data(d3.sort(alphabet, (o) => -o.freqency).slice(0, n2))
.join("rect")
.attr("x", (d) => x_scale(d.letter))
.attr("y", (d) => y_scale(d.frequency))
.attr("height", (d) => y_scale(0) - y_scale(d.frequency))
.attr("width", x_scale.bandwidth())
.attr("fill", "steelblue");
// Note that the axis setup is pretty much the same as with
// a linear scale.
let x_axis = svg
.append("g")
.attr("transform", `translate(0,${h - pad})`)
.call(d3.axisBottom(x_scale).tickSizeOuter(0));
let y_axis = svg
.append("g")
.attr("transform", `translate(${pad})`)
.call(d3.axisLeft(y_scale).ticks(5).tickSizeOuter(0));
y_axis.select("path.domain").attr("stroke", null);
return svg.node();
}
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.
