Back to D3

Cyclical schemes

docs/d3-scale-chromatic/cyclical.md

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

Cyclical schemes

To create a cyclical continuous color scale using the Rainbow color scheme:

js
const color = d3.scaleSequential(d3.interpolateRainbow);

interpolateRainbow(t) {#interpolateRainbow}

<ColorRamp :color="d3.interpolateRainbow" />

Source · Given a number t in the range [0,1], returns the corresponding color from d3.interpolateWarm scale from [0.0, 0.5] followed by the d3.interpolateCool scale from [0.5, 1.0], thus implementing the cyclical less-angry rainbow color scheme.

interpolateSinebow(t) {#interpolateSinebow}

<ColorRamp :color="d3.interpolateSinebow" />

Source · Given a number t in the range [0,1], returns the corresponding color from the “sinebow” color scheme by Jim Bumgardner and Charlie Loyd.