Filled 2D density bands

<script lang="ts">
  import {
    CoordFixed,
    GeomDensity2dFilled,
    GeomPoint,
    GGPlot,
    Inspect,
    Labs,
    ScaleColorDiscrete,
    ThemeMap,
  } from "@ggts-sh/svelte";

  import { choleraDeaths, waterPumps } from "./data.js";
</script>

<GGPlot data={choleraDeaths} aes={{ x: "x", y: "y" }} width={640} height={400}>
  <GeomDensity2dFilled bins={6} n={48} alpha={0.8} />
  <GeomPoint
    alpha={0.55}
    size={1.6}
    aes={{ color: { value: "Deaths", scale: true } }}
  />
  <GeomPoint
    data={waterPumps}
    aes={{ x: "x", y: "y", color: { value: "Pumps", scale: true } }}
    size={4}
    shape="cross"
  />
  <ScaleColorDiscrete domain={["Deaths", "Pumps"]} scheme="wsj_dem_rep" />
  <CoordFixed />
  <ThemeMap />
  <Labs
    title="Filled density bands over points"
    subtitle="Cholera deaths in Soho, 1854"
    x=""
    y=""
    fill="Density"
    color=""
  />
  <Inspect mode="xy" pin maxDistance={24} />
</GGPlot>