Back to D3

Categorical schemes

docs/d3-scale-chromatic/categorical.md

7.9.03.1 KB
Original Source
<script setup> import * as d3 from "d3"; import ColorSwatches from "../components/ColorSwatches.vue"; </script>

Categorical schemes

For example, to create a categorical color scale using the Accent color scheme:

js
const color = d3.scaleOrdinal(d3.schemeAccent);

schemeCategory10 {#schemeCategory10}

<ColorSwatches :colors="d3.schemeCategory10" />

Source · An array of ten categorical colors represented as RGB hexadecimal strings.

schemeAccent {#schemeAccent}

<ColorSwatches :colors="d3.schemeAccent" />

Source · An array of eight categorical colors represented as RGB hexadecimal strings.

schemeDark2 {#schemeDark2}

<ColorSwatches :colors="d3.schemeDark2" />

Source · An array of eight categorical colors represented as RGB hexadecimal strings.

schemeObservable10 {#schemeObservable10}

<ColorSwatches :colors="d3.schemeObservable10" />

Source · An array of ten categorical colors represented as RGB hexadecimal strings.

schemePaired {#schemePaired}

<ColorSwatches :colors="d3.schemePaired" />

Source · An array of twelve categorical colors represented as RGB hexadecimal strings.

schemePastel1 {#schemePastel1}

<ColorSwatches :colors="d3.schemePastel1" />

Source · An array of nine categorical colors represented as RGB hexadecimal strings.

schemePastel2 {#schemePastel2}

<ColorSwatches :colors="d3.schemePastel2" />

Source · An array of eight categorical colors represented as RGB hexadecimal strings.

schemeSet1 {#schemeSet1}

<ColorSwatches :colors="d3.schemeSet1" />

Source · An array of nine categorical colors represented as RGB hexadecimal strings.

schemeSet2 {#schemeSet2}

<ColorSwatches :colors="d3.schemeSet2" />

Source · An array of eight categorical colors represented as RGB hexadecimal strings.

schemeSet3 {#schemeSet3}

<ColorSwatches :colors="d3.schemeSet3" />

Source · An array of twelve categorical colors represented as RGB hexadecimal strings.

schemeTableau10 {#schemeTableau10}

<ColorSwatches :colors="d3.schemeTableau10" />

Source · An array of ten categorical colors authored by Tableau as part of Tableau 10 represented as RGB hexadecimal strings.