All charts/Heatmap

Rainfall per month

Cities against months, the value in every cell that has room.

1 The data _data/rainfall.json json

[
  { "city": "Amsterdam", "month": "Jan", "mm": 66 },
  { "city": "Amsterdam", "month": "Feb", "mm": 49 },
  { "city": "Amsterdam", "month": "Mar", "mm": 57 },
  { "city": "Amsterdam", "month": "Apr", "mm": 41 },
  { "city": "Amsterdam", "month": "May", "mm": 51 },
  { "city": "Amsterdam", "month": "Jun", "mm": 62 },
  { "city": "Amsterdam", "month": "Jul", "mm": 77 },
  { "city": "Amsterdam", "month": "Aug", "mm": 84 },
  { "city": "Amsterdam", "month": "Sep", "mm": 84 },
  { "city": "Amsterdam", "month": "Oct", "mm": 82 },
  { "city": "Amsterdam", "month": "Nov", "mm": 85 },
  { "city": "Amsterdam", "month": "Dec", "mm": 80 },
  { "city": "London", "month": "Jan", "mm": 55 },
  { "city": "London", "month": "Feb", "mm": 41 },
  { "city": "London", "month": "Mar", "mm": 42 },
  { "city": "London", "month": "Apr", "mm": 44 },
  { "city": "London", "month": "May", "mm": 49 },
  { "city": "London", "month": "Jun", "mm": 45 },
  { "city": "London", "month": "Jul", "mm": 45 },
  { "city": "London", "month": "Aug", "mm": 50 },
  { "city": "London", "month": "Sep", "mm": 49 },
  { "city": "London", "month": "Oct", "mm": 69 },
  { "city": "London", "month": "Nov", "mm": 59 },
  { "city": "London", "month": "Dec", "mm": 55 },
  { "city": "Madrid", "month": "Jan", "mm": 34 },
  { "city": "Madrid", "month": "Feb", "mm": 34 },
  { "city": "Madrid", "month": "Mar", "mm": 26 },
  { "city": "Madrid", "month": "Apr", "mm": 45 },
  { "city": "Madrid", "month": "May", "mm": 48 },
  { "city": "Madrid", "month": "Jun", "mm": 21 },
  { "city": "Madrid", "month": "Jul", "mm": 11 },
  { "city": "Madrid", "month": "Aug", "mm": 10 },
  { "city": "Madrid", "month": "Sep", "mm": 24 },
  { "city": "Madrid", "month": "Oct", "mm": 59 },
  { "city": "Madrid", "month": "Nov", "mm": 52 },
  { "city": "Madrid", "month": "Dec", "mm": 52 },
  { "city": "Rome", "month": "Jan", "mm": 67 },
  { "city": "Rome", "month": "Feb", "mm": 73 },
  { "city": "Rome", "month": "Mar", "mm": 58 },
  { "city": "Rome", "month": "Apr", "mm": 81 },
  { "city": "Rome", "month": "May", "mm": 53 },
  { "city": "Rome", "month": "Jun", "mm": 34 },
  { "city": "Rome", "month": "Jul", "mm": 19 },
  { "city": "Rome", "month": "Aug", "mm": 37 },
  { "city": "Rome", "month": "Sep", "mm": 73 },
  { "city": "Rome", "month": "Oct", "mm": 113 },
  { "city": "Rome", "month": "Nov", "mm": 115 },
  { "city": "Rome", "month": "Dec", "mm": 82 }
]

2 The chart tag heatmap/rainfall.pad pad

{chart 'heatmap', data='rainfall', x='month', y='city', value='mm', title='Rainfall in millimetres', width=640, height=300}

3 The result inline SVG · no JavaScript