Gallery / Rectangles & grids

tile

Cholera in England and Wales, 1849

Every day of the epidemic from Farr's weekly returns, laid out as a calendar of square tiles so the summer peak reads as a block.

Cholera in England and Wales, 1849

Source

Svelte, builder, JSON

<script lang="ts">
  import {
    CoordFixed,
    GeomTile,
    GGPlot,
    GuideColorbar,
    Inspect,
    Labs,
    ScaleFillContinuous,
    ScaleXDiscrete,
    ScaleYDiscrete,
    ThemeLight,
  } from "@ggts-sh/svelte";

  import { cholera1849 } from "./data.js";
</script>

<!--
  1200×380 (not the default 640×400): a 53-week × 7-day calendar needs a wide,
  short frame so CoordFixed can keep each band cell square and large enough
  to read. Theme turns grid off so incomplete weeks are real holes.
-->
<GGPlot
  data={cholera1849}
  aes={{ x: "week", y: "weekday", fill: "deaths" }}
  width={1200}
  height={380}
>
  <GeomTile />
  <CoordFixed />
  <ScaleFillContinuous scheme="viridis" />
  <!-- Weeks are numeric but read as a band — one column per week. -->
  <ScaleXDiscrete />
  <!-- Weekday domain reversed so Sunday sits at the top of a calendar. -->
  <ScaleYDiscrete
    domain={["Sat", "Fri", "Thu", "Wed", "Tue", "Mon", "Sun"]}
    breaks={["Mon", "Wed", "Fri"]}
  />
  <ThemeLight grid="none" gridX={false} gridY={false} />
  <GuideColorbar channel="fill" position="bottom" direction="horizontal" />
  <Labs
    title="Cholera in England and Wales, 1849"
    subtitle="53,293 deaths. Peak 1,121 on 6 September"
    x="Week of 1849"
    y=""
    fill="Deaths"
  />
  <Inspect mode="exact" pin />
</GGPlot>

Meta

Details

Family
Rectangles & grids
Source
tile/heatmap
Rendering
SVG
Techniques

tile · heatmap · categorical · calendar