Gallery / Points & scatter

point

Two and a half thousand points on canvas

Above the automatic threshold ggsvelte renders marks to canvas instead of SVG, which is what keeps a scatter this size interactive.

Two and a half thousand points on canvas

Source

Svelte, builder, JSON

<script lang="ts">
  import {
    GeomPoint,
    GGPlot,
    Labs,
    ScaleColorManual,
    ThemeDark,
  } from "@ggsvelte/svelte";

  import { CANVAS_SCATTER_MARKS, cloud } from "./data.js";

  const title = `${CANVAS_SCATTER_MARKS.toLocaleString("en-US")} points on a canvas stratum`;
  const subtitle =
    "Above the automatic threshold the marks go to canvas instead of SVG; the cloud is seeded, because the subject here is the render path";
</script>

<GGPlot
  data={cloud}
  aes={{ x: "x", y: "y", color: "cluster" }}
  width={640}
  height={400}
>
  <ThemeDark />
  <ScaleColorManual domain={["a", "b"]} values={["#da702c", "#4385be"]} />
  <Labs {title} {subtitle} x="x" y="y" color="Cluster" />
  <GeomPoint size={1.2} alpha={0.4} />
</GGPlot>

Meta

Details

Family
Points & scatter
Source
point/canvas-scatter
Rendering
Canvas marks with SVG chrome
Techniques

point · canvas · performance · theme