A Bar Chart in Plain SVG

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

namespace

The family an element belongs to. SVG elements live in http://www.w3.org/2000/svg; createElementNS creates one in that family.

slot

The share of the plot width that belongs to one bar: the width divided by the number of bars.

gap

The empty part of a slot between two bars.

baseline

The line the bars stand on, at the value 0.

zero line

The baseline when some values are negative: bars above it are positive, bars below it are negative.

missing value

A row with no number at all. It is different from 0: the first means "unknown" or "did not exist", the second means "counted none".

getBBox

A method on an SVG element that returns its bounding box (x, y, width, height) in its own units. It is how you measure a text label.

sort in place

array.sort() rearranges the array it is called on, instead of returning a new one.

1. 1

   Make the bars thinner

   In the first example, change slot * 0.1 to slot * 0.25 (the x offset) and slot * 0.8 to slot * 0.5 (the width). The bars shrink to half a slot and stay centred, because the offset is half of what is left over: (1 − 0.5) ÷ 2 = 0.25.

2. 2

   Sort the other way

   In the third example, change b.total - a.total to a.total - b.total. The log now reads first: Windmill 10486 | last: Quay 58584 and the longest bar is at the bottom. The chart is equally correct; smallest-first is a different story ("who needs help?").

3. 3

   Mark a different gap

   In the second example, change const opened = 4; to const opened = 5; so that May also counts as "not open". The last log line becomes bars with height: 3 | zero-height bars (invisible): 0 | marked n/a: 5. The station opened on 10 May, so May is partly real: choose with care what you hide.

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

1. 1

   The problem this solves: in Phase 0 you placed seven bars by hand. Data changes: next week there may be 12 bars, then 25 stations. You want code that works out each bar's width and position from the number of rows, so any amount of data fits, and a new row only means a longer array.

2. 2

   One rectangle per row, made in the SVG namespace. You loop over the data and make a <rect> for each row with document.createElementNS("http://www.w3.org/2000/svg", "rect"). The NS version is required: document.createElement("rect") makes an HTML element that the browser does not know (HTMLUnknownElement). It accepts the attributes and draws nothing, with no error. Break it shows it.

3. 3

   Slots, gaps and bar width come from the count. Divide the plot width by the number of bars to get a slot: slot = innerWidth ÷ count. Keep a share of each slot empty as a gap (here a fifth) and let the bar take the rest. The bar's x is i × slot + gap ÷ 2, so each bar sits in the middle of its slot. This is what a band scale does (Topic 6.4).

4. 4

   **A bar stands on the baseline, so y is its top edge.** With a scale y(value) that maps 0 to the bottom, the bar's y attribute is y(value) and its height is innerHeight − y(value), down to the baseline. Putting the scale's result straight into height hangs the bars from the top (stage step 1 shows it). When the data has negative numbers, the bar runs from the zero line y(0) to y(value): its top is Math.min(y(value), y(0)) and its height is Math.abs(y(value) − y(0)). A negative height prints an error and draws nothing.

5. 5

   Labels are text, placed by arithmetic. A month name goes under the slot's middle (text-anchor="middle"), and the value goes right above the bar. Long names do not fit under narrow bars, and SVG text does not cut itself with an ellipsis like HTML does. The usual answer is a horizontal bar chart: names on the left, bars to the right, and a left margin measured from the real labels with getBBox() (the third example).

6. 6

   **Sorting changes what people see, and sort changes your data.** Unordered categories (stations) read best sorted by value; ordered ones (months, days) must keep their natural order. array.sort() sorts in place, so sort a copy ([...rows].sort(...)) or the chart's input order changes under you. Zero is not missing: a station that had 0 rides is a real zero, but a station that did not exist yet has no value at all. Draw the first as a bar of height 0 and the second as a marked gap (the second example).

• ↔

  Writing the loop by hand takes about 20 lines and teaches you the geometry. When the chart has to update, animate or react to the mouse, you will want D3's data join (Phase 5) instead of rebuilding every rectangle.

• ↔

  Sorted bars are quick to rank but break the natural order of months or days. When order has meaning (time), keep it. When it has none (stations), sort by value.

• I can draw a bar chart from an array with createElementNS and a loop.

• I can compute slot, gap, bar width and each bar's x from the number of bars.

• I can set y and height so bars stand on the baseline, including bars with negative values.

• I can tell zero from missing and draw each one differently.

• I can sort a copy of the data and pick an order that matches the question.

• I can measure labels with getBBox() and size the margin from them.