Map

A choropleth of the 36 states and the FCT, with the sequential ramp as its key.

Petrol price by state, with the key

₦1,070 ₦1,380 no data

Shapes are stand-ins here. The real component draws the 36 states and the FCT.

HTML

<div class="p234-map">
  <svg class="p234-map__svg" viewBox="0 0 440 180" role="img" aria-label="Petrol price by state. Prices are highest in the south east and lowest in the north west. Two states have no data.">
    <g class="p234-map__shape" fill="var(--p234-color-chart-seq-1)">
      <rect x="10" y="20" width="80" height="55" rx="2"></rect>
      <rect x="10" y="85" width="80" height="55" rx="2"></rect>
    </g>
    <g class="p234-map__shape" fill="var(--p234-color-chart-seq-2)">
      <rect x="98" y="20" width="80" height="55" rx="2"></rect>
    </g>
    <g class="p234-map__shape" fill="var(--p234-color-chart-seq-3)">
      <rect x="98" y="85" width="80" height="55" rx="2"></rect>
      <rect x="186" y="20" width="80" height="55" rx="2"></rect>
    </g>
    <g class="p234-map__shape" fill="var(--p234-color-chart-seq-4)">
      <rect x="186" y="85" width="80" height="55" rx="2"></rect>
    </g>
    <g class="p234-map__shape" fill="var(--p234-color-chart-seq-5)">
      <rect x="274" y="20" width="80" height="55" rx="2"></rect>
    </g>
    <g class="p234-map__shape p234-map__shape--nodata">
      <rect x="274" y="85" width="80" height="55" rx="2"></rect>
      <rect x="362" y="20" width="66" height="55" rx="2"></rect>
    </g>
  </svg>
  <div class="p234-map__key">
    <span class="p234-map__bound">&#8358;1,070</span>
    <span class="p234-map__steps">
      <span class="p234-map__step" style="background:var(--p234-color-chart-seq-1)"></span>
      <span class="p234-map__step" style="background:var(--p234-color-chart-seq-2)"></span>
      <span class="p234-map__step" style="background:var(--p234-color-chart-seq-3)"></span>
      <span class="p234-map__step" style="background:var(--p234-color-chart-seq-4)"></span>
      <span class="p234-map__step" style="background:var(--p234-color-chart-seq-5)"></span>
    </span>
    <span class="p234-map__bound">&#8358;1,380</span>
    <span class="p234-map__bound" style="display:flex;align-items:center;gap:var(--p234-space-3);margin-left:var(--p234-space-5)">
      <span class="p234-map__step" style="background:var(--p234-color-paper-sunk);width:1.25rem"></span> no data
    </span>
  </div>
</div>
<p class="p234-chart__source" style="margin-top:var(--p234-space-4)">Shapes are stand-ins here. The real component draws the 36 states and the FCT.</p>

Sequential, always

A map of "how much" uses the one-hue ramp, light to dark. Never a rainbow: a rainbow turns a quantity into categories and invents boundaries the data does not have. The ramp is gated by the build for readable steps, so a shrunk map on a phone still shows five distinguishable levels.

No data is a real state

Several states are routinely missing from a release. They get the recessed grey and a key entry of their own. Colouring them as the lowest value is a lie that looks like data.

A map is not a table

A reader who wants their own state does not want to find it on a map, they want to read a row. Always pair the map with the directory or a table of the same numbers, and let a state be reachable by name.

Rules

Give the SVG role="img" and a label describing the pattern, not just the title.
Put the range bounds at each end of the key, with the unit.
Make each shape a link or a button where a state has its own page.
Keep the hover outline on the ink colour so it reads over any ramp step.

Do not put labels inside the shapes. At phone width they do not fit, and the key plus a table does the job.
Do not use the diverging ramp for an amount. That is for a change with a sign.

Tokens this component reads

--p234-color-chart-seq-1--p234-color-chart-seq-2--p234-color-chart-seq-3--p234-color-chart-seq-4--p234-color-chart-seq-5--p234-color-paper--p234-color-paper-sunk--p234-color-ink--p234-color-ink-muted--p234-type-data-sm-*--p234-space-3--p234-space-5--p234-measure-wide