Scatter chart

Marks on a hairline grid. One ink, or one Crouwel spot on the field.

Density

Module

20304020406080
Scatter data
Labely
Alkmaar18
Haarlem16
Rotterdam22
Groningen26
Amsterdam44

Mark

Press check

Module against density. Marks, not bubbles. One ink on the field.

Density

Module

20304020406080204
Scatter data
Labely
Alkmaar18
Delft28
Haarlem16
Utrecht34
Rotterdam22
Eindhoven40
Groningen26
Amsterdam44

Install

npx @noordvc/raster-cli add scatter-chart

Markup

<div class="rs-chart"><svg viewBox="0 0 240 64" width="240" height="64"><line class="rs-chart-grid" x1="0" x2="240" y1="56" y2="56"/><circle class="rs-chart-mark" cx="36" cy="40" r="2"/><circle class="rs-chart-mark" cx="88" cy="22" r="2"/><circle class="rs-chart-mark" cx="140" cy="30" r="2"/><circle class="rs-chart-mark" cx="196" cy="14" r="2"/></svg></div>

React

import { ScatterChart } from "@/components/raster/chart";

<ScatterChart
  height={204}
  points={marks}
  xLabel="Module"
  yLabel="Density"
  annotations={[{ at: 40, label: "204" }]}
/>

Classes

.rs-chart-mark

Depends on

/chart