Let’s Make a Bar Chart, Part 2 / D3

Bring your data to life.

Workspace

Public

Let’s Make a Bar Chart

Edited

Oct 26, 2023

1 fork

12 stars

Let’s Make a Bar Chart

Let’s Make a Bar Chart, Part 1

Let’s Make a Bar Chart, Part 2

Let’s Make a Bar Chart, Part 3 Let’s Make a Bar Chart, Part 4

html`<svg width="420" height="120" font-family="sans-serif" font-size="10" text-anchor="end">

</g>

</g>

</g>

</g>

</g>

</g>

</svg>`

data = [4, 8, 15, 16, 23, 42]

width = 420

x = d3.scaleLinear()

.domain([0, d3.max(data)])

.range([0, width])

y = d3.scaleBand()

.domain(d3.range(data.length))

.range([0, 20 * data.length])

{

const svg = d3.create("svg")

.attr("width", width)

.attr("height", y.range()[1])

.attr("font-family", "sans-serif")

.attr("font-size", "10")

.attr("text-anchor", "end");

const bar = svg.selectAll("g")

.data(data)

.join("g")

.attr("transform", (d, i) => `translate(0,${y(i)})`);

bar.append("rect")

.attr("fill", "steelblue")

.attr("width", x)

.attr("height", y.bandwidth() - 1);

bar.append("text")

.attr("fill", "white")

.attr("x", d => x(d) - 3)

.attr("y", (y.bandwidth() - 1) / 2)

.attr("dy", "0.35em")

.text(d => d);

return svg.node();

}

x.domain() // quantitative, continuous

y.domain() // ordinal

z = d3.scaleOrdinal()

.domain(["apples", "limes", "blueberries"])

.range(["red", "green", "blue"])

z("apples")

z("limes")

y(0) // the y-coordinate of the first bar’s top edge

y.bandwidth() // the height of each bar

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.

Learn more