Skip to content

Commit

Permalink
easier piecewise range (#1715)
Browse files Browse the repository at this point in the history
  • Loading branch information
mbostock authored Jun 25, 2023
1 parent 558a5e9 commit 4a84bd3
Show file tree
Hide file tree
Showing 10 changed files with 227 additions and 139 deletions.
28 changes: 11 additions & 17 deletions src/scales/quantitative.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
max,
median,
min,
piecewise,
quantile,
quantize,
reverse as reverseof,
Expand All @@ -24,7 +25,6 @@ import {
} from "d3";
import {finite, negative, positive} from "../defined.js";
import {arrayify, constant, maybeNiceInterval, maybeRangeInterval, orderof, slice} from "../options.js";
import {warn} from "../warnings.js";
import {color, length, opacity, radius, registry} from "./index.js";
import {ordinalRange, quantitativeScheme} from "./schemes.js";

Expand Down Expand Up @@ -81,30 +81,24 @@ export function createScaleQ(
) {
interval = maybeRangeInterval(interval, type);
if (type === "cyclical" || type === "sequential") type = "linear"; // shorthand for color schemes
if (typeof interpolate !== "function") interpolate = maybeInterpolator(interpolate); // named interpolator
reverse = !!reverse;

// If an explicit range is specified, ensure that the domain and range have
// the same length; truncate to whichever one is shorter.
// If an explicit range is specified, and it has a different length than the
// domain, then redistribute the range using a piecewise interpolator.
if (range !== undefined) {
const n = (domain = arrayify(domain)).length;
const m = (range = arrayify(range)).length;
if (n > m) {
domain = domain.slice(0, m);
warn(`Warning: the ${key} scale domain contains extra elements.`);
} else if (m > n) {
range = range.slice(0, n);
warn(`Warning: the ${key} scale range contains extra elements.`);
if (n !== m) {
if (interpolate.length === 1) throw new Error("invalid piecewise interpolator"); // e.g., turbo
interpolate = piecewise(interpolate, range);
range = undefined;
}
}

// Sometimes interpolate is a named interpolator, such as "lab" for Lab color
// space. Other times interpolate is a function that takes two arguments and
// is used in conjunction with the range. And other times the interpolate
// function is a “fixed” interpolator on the [0, 1] interval, as when a
// color scheme such as interpolateRdBu is used.
if (typeof interpolate !== "function") {
interpolate = maybeInterpolator(interpolate);
}
// Disambiguate between a two-argument interpolator that is used in
// conjunction with the range, and a one-argument “fixed” interpolator on the
// [0, 1] interval as with the RdBu color scheme.
if (interpolate.length === 1) {
if (reverse) {
interpolate = flip(interpolate);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,27 +17,23 @@
<g transform="translate(0,28)" fill="none" text-anchor="middle" font-variant="tabular-nums">
<g class="tick" opacity="1" transform="translate(0.5,0)">
<line stroke="currentColor" y2="6" y1="-10"></line>
<text fill="currentColor" y="9" dy="0.71em">10</text>
</g>
<g class="tick" opacity="1" transform="translate(48.5,0)">
<line stroke="currentColor" y2="6" y1="-10"></line>
<text fill="currentColor" y="9" dy="0.71em">8</text>
<text fill="currentColor" y="9" dy="0.71em">0</text>
</g>
<g class="tick" opacity="1" transform="translate(96.5,0)">
<g class="tick" opacity="1" transform="translate(60.5,0)">
<line stroke="currentColor" y2="6" y1="-10"></line>
<text fill="currentColor" y="9" dy="0.71em">6</text>
<text fill="currentColor" y="9" dy="0.71em">5</text>
</g>
<g class="tick" opacity="1" transform="translate(144.5,0)">
<g class="tick" opacity="1" transform="translate(120.5,0)">
<line stroke="currentColor" y2="6" y1="-10"></line>
<text fill="currentColor" y="9" dy="0.71em">4</text>
<text fill="currentColor" y="9" dy="0.71em">10</text>
</g>
<g class="tick" opacity="1" transform="translate(192.5,0)">
<g class="tick" opacity="1" transform="translate(180.5,0)">
<line stroke="currentColor" y2="6" y1="-10"></line>
<text fill="currentColor" y="9" dy="0.71em">2</text>
<text fill="currentColor" y="9" dy="0.71em">15</text>
</g>
<g class="tick" opacity="1" transform="translate(240.5,0)">
<line stroke="currentColor" y2="6" y1="-10"></line>
<text fill="currentColor" y="9" dy="0.71em">0</text>
<text fill="currentColor" y="9" dy="0.71em">20</text>
</g>
</g>
</svg><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
Expand Down Expand Up @@ -82,17 +78,16 @@
<text y="0.71em" transform="translate(566,30)">10</text>
</g>
<g aria-label="cell">
<rect x="26" width="49" y="0" height="30" fill="rgb(0, 0, 255)"></rect>
<rect x="80" width="49" y="0" height="30" fill="rgb(26, 0, 230)"></rect>
<rect x="134" width="49" y="0" height="30" fill="rgb(51, 0, 204)"></rect>
<rect x="188" width="49" y="0" height="30" fill="rgb(77, 0, 179)"></rect>
<rect x="242" width="49" y="0" height="30" fill="rgb(102, 0, 153)"></rect>
<rect x="296" width="49" y="0" height="30" fill="rgb(128, 0, 128)"></rect>
<rect x="350" width="49" y="0" height="30" fill="rgb(153, 0, 102)"></rect>
<rect x="404" width="49" y="0" height="30" fill="rgb(179, 0, 77)"></rect>
<rect x="458" width="49" y="0" height="30" fill="rgb(204, 0, 51)"></rect>
<rect x="512" width="49" y="0" height="30" fill="rgb(230, 0, 26)"></rect>
<rect x="566" width="49" y="0" height="30" fill="rgb(255, 0, 0)"></rect>
<rect x="26" width="49" y="0" height="30" fill="rgb(255, 0, 0)"></rect>
<rect x="80" width="49" y="0" height="30" fill="rgb(242, 0, 13)"></rect>
<rect x="134" width="49" y="0" height="30" fill="rgb(230, 0, 26)"></rect>
<rect x="188" width="49" y="0" height="30" fill="rgb(217, 0, 38)"></rect>
<rect x="242" width="49" y="0" height="30" fill="rgb(204, 0, 51)"></rect>
<rect x="296" width="49" y="0" height="30" fill="rgb(191, 0, 64)"></rect>
<rect x="350" width="49" y="0" height="30" fill="rgb(179, 0, 77)"></rect>
<rect x="404" width="49" y="0" height="30" fill="rgb(166, 0, 89)"></rect>
<rect x="458" width="49" y="0" height="30" fill="rgb(153, 0, 102)"></rect>
<rect x="512" width="49" y="0" height="30" fill="rgb(140, 0, 115)"></rect>
<rect x="566" width="49" y="0" height="30" fill="rgb(128, 0, 128)"></rect>
</g>
<text x="640" y="20" dy="-1em" text-anchor="end" font-family="initial">⚠️<title>1 warning. Please check the console.</title></text>
</svg></figure>
93 changes: 93 additions & 0 deletions test/output/colorPiecewiseLinearDomainReverse.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
<figure style="max-width: initial;"><svg class="plot-ramp" font-family="system-ui, sans-serif" font-size="10" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
.plot-ramp {
display: block;
background: white;
height: auto;
height: intrinsic;
max-width: 100%;
overflow: visible;
}

.plot-ramp text {
white-space: pre;
}
</style>
<image x="0" y="18" width="240" height="10" preserveAspectRatio="none" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAABCAYAAAAxWXB3AAAABmJLR0QA/wD/AP+gvaeTAAAAGElEQVQ4jWNkYPj/n5HhP8MoHsWjeORhAB1BAQ+ixasiAAAAAElFTkSuQmCC"></image>
<g transform="translate(0,28)" fill="none" text-anchor="middle" font-variant="tabular-nums">
<g class="tick" opacity="1" transform="translate(0.5,0)">
<line stroke="currentColor" y2="6" y1="-10"></line>
<text fill="currentColor" y="9" dy="0.71em">0</text>
</g>
<g class="tick" opacity="1" transform="translate(60.5,0)">
<line stroke="currentColor" y2="6" y1="-10"></line>
<text fill="currentColor" y="9" dy="0.71em">5</text>
</g>
<g class="tick" opacity="1" transform="translate(120.5,0)">
<line stroke="currentColor" y2="6" y1="-10"></line>
<text fill="currentColor" y="9" dy="0.71em">10</text>
</g>
<g class="tick" opacity="1" transform="translate(180.5,0)">
<line stroke="currentColor" y2="6" y1="-10"></line>
<text fill="currentColor" y="9" dy="0.71em">15</text>
</g>
<g class="tick" opacity="1" transform="translate(240.5,0)">
<line stroke="currentColor" y2="6" y1="-10"></line>
<text fill="currentColor" y="9" dy="0.71em">20</text>
</g>
</g>
</svg><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
.plot {
display: block;
background: white;
height: auto;
height: intrinsic;
max-width: 100%;
}

.plot text,
.plot tspan {
white-space: pre;
}
</style>
<g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(25,0)">
<path transform="translate(26,30)" d="M0,0L0,6"></path>
<path transform="translate(80,30)" d="M0,0L0,6"></path>
<path transform="translate(134,30)" d="M0,0L0,6"></path>
<path transform="translate(188,30)" d="M0,0L0,6"></path>
<path transform="translate(242,30)" d="M0,0L0,6"></path>
<path transform="translate(296,30)" d="M0,0L0,6"></path>
<path transform="translate(350,30)" d="M0,0L0,6"></path>
<path transform="translate(404,30)" d="M0,0L0,6"></path>
<path transform="translate(458,30)" d="M0,0L0,6"></path>
<path transform="translate(512,30)" d="M0,0L0,6"></path>
<path transform="translate(566,30)" d="M0,0L0,6"></path>
</g>
<g aria-label="x-axis tick label" transform="translate(25,9.5)">
<text y="0.71em" transform="translate(26,30)">0</text>
<text y="0.71em" transform="translate(80,30)">1</text>
<text y="0.71em" transform="translate(134,30)">2</text>
<text y="0.71em" transform="translate(188,30)">3</text>
<text y="0.71em" transform="translate(242,30)">4</text>
<text y="0.71em" transform="translate(296,30)">5</text>
<text y="0.71em" transform="translate(350,30)">6</text>
<text y="0.71em" transform="translate(404,30)">7</text>
<text y="0.71em" transform="translate(458,30)">8</text>
<text y="0.71em" transform="translate(512,30)">9</text>
<text y="0.71em" transform="translate(566,30)">10</text>
</g>
<g aria-label="cell">
<rect x="26" width="49" y="0" height="30" fill="rgb(0, 0, 255)"></rect>
<rect x="80" width="49" y="0" height="30" fill="rgb(13, 0, 242)"></rect>
<rect x="134" width="49" y="0" height="30" fill="rgb(26, 0, 230)"></rect>
<rect x="188" width="49" y="0" height="30" fill="rgb(38, 0, 217)"></rect>
<rect x="242" width="49" y="0" height="30" fill="rgb(51, 0, 204)"></rect>
<rect x="296" width="49" y="0" height="30" fill="rgb(64, 0, 191)"></rect>
<rect x="350" width="49" y="0" height="30" fill="rgb(77, 0, 179)"></rect>
<rect x="404" width="49" y="0" height="30" fill="rgb(89, 0, 166)"></rect>
<rect x="458" width="49" y="0" height="30" fill="rgb(102, 0, 153)"></rect>
<rect x="512" width="49" y="0" height="30" fill="rgb(115, 0, 140)"></rect>
<rect x="566" width="49" y="0" height="30" fill="rgb(128, 0, 128)"></rect>
</g>
</svg></figure>
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
white-space: pre;
}
</style>
<image x="0" y="18" width="240" height="10" preserveAspectRatio="none" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAABCAYAAAAxWXB3AAAABmJLR0QA/wD/AP+gvaeTAAAAGElEQVQ4jWP8z8Dw/z8DI8MoHsWjeORhABlhAQ9+GPb9AAAAAElFTkSuQmCC"></image>
<image x="0" y="18" width="240" height="10" preserveAspectRatio="none" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAABCAYAAAAxWXB3AAAABmJLR0QA/wD/AP+gvaeTAAAAIElEQVQ4jWP8z8Dw/x8DE8MoHpn4PyMDAwPjv1E8QjEAncEAkBlnMcQAAAAASUVORK5CYII="></image>
<g transform="translate(0,28)" fill="none" text-anchor="middle" font-variant="tabular-nums">
<g class="tick" opacity="1" transform="translate(0.5,0)">
<line stroke="currentColor" y2="6" y1="-10"></line>
Expand Down Expand Up @@ -83,16 +83,15 @@
</g>
<g aria-label="cell">
<rect x="26" width="49" y="0" height="30" fill="rgb(255, 0, 0)"></rect>
<rect x="80" width="49" y="0" height="30" fill="rgb(230, 0, 26)"></rect>
<rect x="134" width="49" y="0" height="30" fill="rgb(204, 0, 51)"></rect>
<rect x="188" width="49" y="0" height="30" fill="rgb(179, 0, 77)"></rect>
<rect x="242" width="49" y="0" height="30" fill="rgb(153, 0, 102)"></rect>
<rect x="296" width="49" y="0" height="30" fill="rgb(128, 0, 128)"></rect>
<rect x="350" width="49" y="0" height="30" fill="rgb(102, 0, 153)"></rect>
<rect x="404" width="49" y="0" height="30" fill="rgb(77, 0, 179)"></rect>
<rect x="458" width="49" y="0" height="30" fill="rgb(51, 0, 204)"></rect>
<rect x="512" width="49" y="0" height="30" fill="rgb(26, 0, 230)"></rect>
<rect x="566" width="49" y="0" height="30" fill="rgb(0, 0, 255)"></rect>
<rect x="80" width="49" y="0" height="30" fill="rgb(204, 0, 51)"></rect>
<rect x="134" width="49" y="0" height="30" fill="rgb(153, 0, 102)"></rect>
<rect x="188" width="49" y="0" height="30" fill="rgb(102, 0, 153)"></rect>
<rect x="242" width="49" y="0" height="30" fill="rgb(51, 0, 204)"></rect>
<rect x="296" width="49" y="0" height="30" fill="rgb(0, 0, 255)"></rect>
<rect x="350" width="49" y="0" height="30" fill="rgb(0, 26, 204)"></rect>
<rect x="404" width="49" y="0" height="30" fill="rgb(0, 51, 153)"></rect>
<rect x="458" width="49" y="0" height="30" fill="rgb(0, 77, 102)"></rect>
<rect x="512" width="49" y="0" height="30" fill="rgb(0, 102, 51)"></rect>
<rect x="566" width="49" y="0" height="30" fill="rgb(0, 128, 0)"></rect>
</g>
<text x="640" y="20" dy="-1em" text-anchor="end" font-family="initial">⚠️<title>1 warning. Please check the console.</title></text>
</svg></figure>
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
white-space: pre;
}
</style>
<image x="0" y="18" width="240" height="10" preserveAspectRatio="none" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAABCAYAAAAxWXB3AAAABmJLR0QA/wD/AP+gvaeTAAAAGElEQVQ4jWP8z8Dw/z8DI8MoHsWjeORhABlhAQ9+GPb9AAAAAElFTkSuQmCC"></image>
<image x="0" y="18" width="240" height="10" preserveAspectRatio="none" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAABCAYAAAAxWXB3AAAABmJLR0QA/wD/AP+gvaeTAAAAq0lEQVQ4jZWSSQ7CMAxFnxMQ3XD/Q8IOiaHNwMaKEuMGWDz9Ka1UNVKhwoGRqARH95A/+l+7WT8/U5Xej8QhF7MXV+OQi9lHYvPZbLlT632ETCBpTg1pflO/qd8IrARWhJXAC+FJ4IFwJ3BDuCBcF4EzsAAn4KjYq+Bdidmv6NX6b9DnChQQhexo1jO5y442n8yeJrvj3Wec937sO3noStcXpzf7VK0330DmDakio4Fv+3ATAAAAAElFTkSuQmCC"></image>
<g transform="translate(0,28)" fill="none" text-anchor="middle" font-variant="tabular-nums">
<g class="tick" opacity="1" transform="translate(0.5,0)">
<line stroke="currentColor" y2="6" y1="-10"></line>
Expand Down Expand Up @@ -83,16 +83,15 @@
</g>
<g aria-label="cell">
<rect x="26" width="49" y="0" height="30" fill="rgb(255, 0, 0)"></rect>
<rect x="80" width="49" y="0" height="30" fill="rgb(230, 0, 26)"></rect>
<rect x="134" width="49" y="0" height="30" fill="rgb(204, 0, 51)"></rect>
<rect x="188" width="49" y="0" height="30" fill="rgb(179, 0, 77)"></rect>
<rect x="242" width="49" y="0" height="30" fill="rgb(153, 0, 102)"></rect>
<rect x="296" width="49" y="0" height="30" fill="rgb(128, 0, 128)"></rect>
<rect x="350" width="49" y="0" height="30" fill="rgb(102, 0, 153)"></rect>
<rect x="404" width="49" y="0" height="30" fill="rgb(77, 0, 179)"></rect>
<rect x="458" width="49" y="0" height="30" fill="rgb(51, 0, 204)"></rect>
<rect x="512" width="49" y="0" height="30" fill="rgb(26, 0, 230)"></rect>
<rect x="566" width="49" y="0" height="30" fill="rgb(0, 0, 255)"></rect>
<rect x="80" width="49" y="0" height="30" fill="rgb(255, 0, 61)"></rect>
<rect x="134" width="49" y="0" height="30" fill="rgb(255, 0, 108)"></rect>
<rect x="188" width="49" y="0" height="30" fill="rgb(227, 0, 161)"></rect>
<rect x="242" width="49" y="0" height="30" fill="rgb(169, 0, 213)"></rect>
<rect x="296" width="49" y="0" height="30" fill="rgb(0, 0, 255)"></rect>
<rect x="350" width="49" y="0" height="30" fill="rgb(0, 91, 255)"></rect>
<rect x="404" width="49" y="0" height="30" fill="rgb(0, 112, 228)"></rect>
<rect x="458" width="49" y="0" height="30" fill="rgb(0, 121, 147)"></rect>
<rect x="512" width="49" y="0" height="30" fill="rgb(0, 127, 70)"></rect>
<rect x="566" width="49" y="0" height="30" fill="rgb(0, 128, 0)"></rect>
</g>
<text x="640" y="20" dy="-1em" text-anchor="end" font-family="initial">⚠️<title>1 warning. Please check the console.</title></text>
</svg></figure>
Loading

0 comments on commit 4a84bd3

Please sign in to comment.