ggsvelte
GitHub
Navigate

Palettes

Sequential color ramps

Sequential ramps encode continuous fill. Categorical schemes color discrete series — see Color palettes.

Scheme names as scale inputs: Palettes reference. How to set a ramp on a plot: ScaleColorContinuous. Narrative guide: Scales and guides.

  1. viridis
  2. magma
  3. plasma
  4. inferno
  5. cividis
  6. turbo
  7. Blues
  8. Greens
  9. Reds
  10. Oranges
  11. Purples
  12. Greys
  13. YlOrRd
  14. YlGnBu
  15. BuPu
  16. RdYlBu
  17. RdBu
  18. BrBG
  19. Spectral
  20. PuOr
  21. tableau_seq_blue_green
  22. tableau_seq_blue_light
  23. tableau_seq_orange_light
  24. tableau_seq_blue
  25. tableau_seq_orange
  26. tableau_seq_green
  27. tableau_seq_red
  28. tableau_seq_purple
  29. tableau_seq_brown
  30. tableau_seq_gray
  31. tableau_seq_gray_warm
  32. tableau_seq_blue_teal
  33. tableau_seq_orange_gold
  34. tableau_seq_green_gold
  35. tableau_seq_red_gold
  36. tableau_div_orange_blue
  37. tableau_div_red_green
  38. tableau_div_green_blue
  39. tableau_div_red_blue
  40. tableau_div_red_black
  41. tableau_div_gold_purple
  42. tableau_div_red_green_gold
  43. tableau_div_sunset_sunrise
  44. tableau_div_orange_blue_white
  45. tableau_div_red_green_white
  46. tableau_div_green_blue_white
  47. tableau_div_red_blue_white
  48. tableau_div_red_black_white
  49. tableau_div_orange_blue_light
  50. tableau_div_temperature

Behavior

Read on the colorbar

Continuous fill on a Macdonell man-count grid. Reverse, custom range, and pinned domain should read clearly on the colorbar — not only on a few cells.

  1. Viridis

  2. Reversed

  3. Custom range

  4. Pinned domain

Authoring fragment

<script lang="ts">
  import { GeomRaster, GGPlot, Labs, Scale } from "@ggsvelte/svelte";

  // Macdonell man-count grid (48 cells in the live demos).
  const grid = [
    { x: 0, y: 0, z: 12 },
    { x: 1, y: 0, z: 28 },
    { x: 2, y: 0, z: 41 },
    // …
  ];
</script>

<GGPlot
  data={grid}
  aes={{ x: "x", y: "y", fill: "z" }}
  height={400}
>
  <Scale
    value={{
      fill: { type: "sequential", scheme: "viridis" },
      // reverse: true
      // domain: [15, 40]  // pin inside actual man counts
      // range: ["#2d1e2f", "#3d5a80", "#e76f51"]
    }}
  />
  <Labs title="Macdonell stature × finger counts" x="Finger index" y="Height index" />
  <GeomRaster />
</GGPlot>