Population pyramid

How it’s built

A pyramid is two Bars from the same place, running in opposite directions. The scale covers [-18, 18], the slat draws <Bar to={-d.men} /> and <Bar to={d.women} />, and a Bar with a negative to runs the other way without being told to. format={(v) => Math.abs(v) + "%"} drops the minus sign from the axis, so the left side reads as a percentage rather than as a negative number.

The gallery version adds:

• A spine down the middle. Both Bars start a little away from zero (SPINE), which leaves a clear strip for the age labels to sit in.
• A scale that fits both years. It is worked out from the widest band of either year and rounded up, so switching year moves the bars without moving the axis, and the two years can be compared.
• Order given as a list. In a horizontal chart a list of positions puts the oldest band on top, which is what makes the shape a pyramid.

The simple version

Two bars per slat, growing away from a shared middle. The same structure with almost no styling: a good place to start your own.

The gallery version