Skip to content

Commit 4a84bd3

Browse files
mbostockmbostock
authored
easier piecewise range (#1715)
1 parent 558a5e9 commit 4a84bd3

10 files changed

+227
-139
lines changed

‎src/scales/quantitative.js‎

Lines changed: 11 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
max,
1111
median,
1212
min,
13+
piecewise,
1314
quantile,
1415
quantize,
1516
reverse as reverseof,
@@ -24,7 +25,6 @@ import {
2425
} from "d3";
2526
import {finite, negative, positive} from "../defined.js";
2627
import {arrayify, constant, maybeNiceInterval, maybeRangeInterval, orderof, slice} from "../options.js";
27-
import {warn} from "../warnings.js";
2828
import {color, length, opacity, radius, registry} from "./index.js";
2929
import {ordinalRange, quantitativeScheme} from "./schemes.js";
3030

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

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

100-
// Sometimes interpolate is a named interpolator, such as "lab" for Lab color
101-
// space. Other times interpolate is a function that takes two arguments and
102-
// is used in conjunction with the range. And other times the interpolate
103-
// function is a “fixed” interpolator on the [0, 1] interval, as when a
104-
// color scheme such as interpolateRdBu is used.
105-
if (typeof interpolate !== "function") {
106-
interpolate = maybeInterpolator(interpolate);
107-
}
99+
// Disambiguate between a two-argument interpolator that is used in
100+
// conjunction with the range, and a one-argument “fixed” interpolator on the
101+
// [0, 1] interval as with the RdBu color scheme.
108102
if (interpolate.length === 1) {
109103
if (reverse) {
110104
interpolate = flip(interpolate);

‎test/output/warnMisalignedLinearRangeReverse.html‎ renamed to ‎test/output/colorPiecewiseLinearDomain.html‎

Lines changed: 19 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -17,27 +17,23 @@
1717
<g transform="translate(0,28)" fill="none" text-anchor="middle" font-variant="tabular-nums">
1818
<g class="tick" opacity="1" transform="translate(0.5,0)">
1919
<line stroke="currentColor" y2="6" y1="-10"></line>
20-
<text fill="currentColor" y="9" dy="0.71em">10</text>
21-
</g>
22-
<g class="tick" opacity="1" transform="translate(48.5,0)">
23-
<line stroke="currentColor" y2="6" y1="-10"></line>
24-
<text fill="currentColor" y="9" dy="0.71em">8</text>
20+
<text fill="currentColor" y="9" dy="0.71em">0</text>
2521
</g>
26-
<g class="tick" opacity="1" transform="translate(96.5,0)">
22+
<g class="tick" opacity="1" transform="translate(60.5,0)">
2723
<line stroke="currentColor" y2="6" y1="-10"></line>
28-
<text fill="currentColor" y="9" dy="0.71em">6</text>
24+
<text fill="currentColor" y="9" dy="0.71em">5</text>
2925
</g>
30-
<g class="tick" opacity="1" transform="translate(144.5,0)">
26+
<g class="tick" opacity="1" transform="translate(120.5,0)">
3127
<line stroke="currentColor" y2="6" y1="-10"></line>
32-
<text fill="currentColor" y="9" dy="0.71em">4</text>
28+
<text fill="currentColor" y="9" dy="0.71em">10</text>
3329
</g>
34-
<g class="tick" opacity="1" transform="translate(192.5,0)">
30+
<g class="tick" opacity="1" transform="translate(180.5,0)">
3531
<line stroke="currentColor" y2="6" y1="-10"></line>
36-
<text fill="currentColor" y="9" dy="0.71em">2</text>
32+
<text fill="currentColor" y="9" dy="0.71em">15</text>
3733
</g>
3834
<g class="tick" opacity="1" transform="translate(240.5,0)">
3935
<line stroke="currentColor" y2="6" y1="-10"></line>
40-
<text fill="currentColor" y="9" dy="0.71em">0</text>
36+
<text fill="currentColor" y="9" dy="0.71em">20</text>
4137
</g>
4238
</g>
4339
</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">
@@ -82,17 +78,16 @@
8278
<text y="0.71em" transform="translate(566,30)">10</text>
8379
</g>
8480
<g aria-label="cell">
85-
<rect x="26" width="49" y="0" height="30" fill="rgb(0, 0, 255)"></rect>
86-
<rect x="80" width="49" y="0" height="30" fill="rgb(26, 0, 230)"></rect>
87-
<rect x="134" width="49" y="0" height="30" fill="rgb(51, 0, 204)"></rect>
88-
<rect x="188" width="49" y="0" height="30" fill="rgb(77, 0, 179)"></rect>
89-
<rect x="242" width="49" y="0" height="30" fill="rgb(102, 0, 153)"></rect>
90-
<rect x="296" width="49" y="0" height="30" fill="rgb(128, 0, 128)"></rect>
91-
<rect x="350" width="49" y="0" height="30" fill="rgb(153, 0, 102)"></rect>
92-
<rect x="404" width="49" y="0" height="30" fill="rgb(179, 0, 77)"></rect>
93-
<rect x="458" width="49" y="0" height="30" fill="rgb(204, 0, 51)"></rect>
94-
<rect x="512" width="49" y="0" height="30" fill="rgb(230, 0, 26)"></rect>
95-
<rect x="566" width="49" y="0" height="30" fill="rgb(255, 0, 0)"></rect>
81+
<rect x="26" width="49" y="0" height="30" fill="rgb(255, 0, 0)"></rect>
82+
<rect x="80" width="49" y="0" height="30" fill="rgb(242, 0, 13)"></rect>
83+
<rect x="134" width="49" y="0" height="30" fill="rgb(230, 0, 26)"></rect>
84+
<rect x="188" width="49" y="0" height="30" fill="rgb(217, 0, 38)"></rect>
85+
<rect x="242" width="49" y="0" height="30" fill="rgb(204, 0, 51)"></rect>
86+
<rect x="296" width="49" y="0" height="30" fill="rgb(191, 0, 64)"></rect>
87+
<rect x="350" width="49" y="0" height="30" fill="rgb(179, 0, 77)"></rect>
88+
<rect x="404" width="49" y="0" height="30" fill="rgb(166, 0, 89)"></rect>
89+
<rect x="458" width="49" y="0" height="30" fill="rgb(153, 0, 102)"></rect>
90+
<rect x="512" width="49" y="0" height="30" fill="rgb(140, 0, 115)"></rect>
91+
<rect x="566" width="49" y="0" height="30" fill="rgb(128, 0, 128)"></rect>
9692
</g>
97-
<text x="640" y="20" dy="-1em" text-anchor="end" font-family="initial">⚠️<title>1 warning. Please check the console.</title></text>
9893
</svg></figure>

‎test/output/colorPiecewiseLinearDomainReverse.html‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<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">
2+
<style>
3+
.plot-ramp {
4+
display: block;
5+
background: white;
6+
height: auto;
7+
height: intrinsic;
8+
max-width: 100%;
9+
overflow: visible;
10+
}
11+
12+
.plot-ramp text {
13+
white-space: pre;
14+
}
15+
</style>
16+
<image x="0" y="18" width="240" height="10" preserveAspectRatio="none" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAABCAYAAAAxWXB3AAAABmJLR0QA/wD/AP+gvaeTAAAAGElEQVQ4jWNkYPj/n5HhP8MoHsWjeORhAB1BAQ+ixasiAAAAAElFTkSuQmCC"></image>
17+
<g transform="translate(0,28)" fill="none" text-anchor="middle" font-variant="tabular-nums">
18+
<g class="tick" opacity="1" transform="translate(0.5,0)">
19+
<line stroke="currentColor" y2="6" y1="-10"></line>
20+
<text fill="currentColor" y="9" dy="0.71em">0</text>
21+
</g>
22+
<g class="tick" opacity="1" transform="translate(60.5,0)">
23+
<line stroke="currentColor" y2="6" y1="-10"></line>
24+
<text fill="currentColor" y="9" dy="0.71em">5</text>
25+
</g>
26+
<g class="tick" opacity="1" transform="translate(120.5,0)">
27+
<line stroke="currentColor" y2="6" y1="-10"></line>
28+
<text fill="currentColor" y="9" dy="0.71em">10</text>
29+
</g>
30+
<g class="tick" opacity="1" transform="translate(180.5,0)">
31+
<line stroke="currentColor" y2="6" y1="-10"></line>
32+
<text fill="currentColor" y="9" dy="0.71em">15</text>
33+
</g>
34+
<g class="tick" opacity="1" transform="translate(240.5,0)">
35+
<line stroke="currentColor" y2="6" y1="-10"></line>
36+
<text fill="currentColor" y="9" dy="0.71em">20</text>
37+
</g>
38+
</g>
39+
</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">
40+
<style>
41+
.plot {
42+
display: block;
43+
background: white;
44+
height: auto;
45+
height: intrinsic;
46+
max-width: 100%;
47+
}
48+
49+
.plot text,
50+
.plot tspan {
51+
white-space: pre;
52+
}
53+
</style>
54+
<g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(25,0)">
55+
<path transform="translate(26,30)" d="M0,0L0,6"></path>
56+
<path transform="translate(80,30)" d="M0,0L0,6"></path>
57+
<path transform="translate(134,30)" d="M0,0L0,6"></path>
58+
<path transform="translate(188,30)" d="M0,0L0,6"></path>
59+
<path transform="translate(242,30)" d="M0,0L0,6"></path>
60+
<path transform="translate(296,30)" d="M0,0L0,6"></path>
61+
<path transform="translate(350,30)" d="M0,0L0,6"></path>
62+
<path transform="translate(404,30)" d="M0,0L0,6"></path>
63+
<path transform="translate(458,30)" d="M0,0L0,6"></path>
64+
<path transform="translate(512,30)" d="M0,0L0,6"></path>
65+
<path transform="translate(566,30)" d="M0,0L0,6"></path>
66+
</g>
67+
<g aria-label="x-axis tick label" transform="translate(25,9.5)">
68+
<text y="0.71em" transform="translate(26,30)">0</text>
69+
<text y="0.71em" transform="translate(80,30)">1</text>
70+
<text y="0.71em" transform="translate(134,30)">2</text>
71+
<text y="0.71em" transform="translate(188,30)">3</text>
72+
<text y="0.71em" transform="translate(242,30)">4</text>
73+
<text y="0.71em" transform="translate(296,30)">5</text>
74+
<text y="0.71em" transform="translate(350,30)">6</text>
75+
<text y="0.71em" transform="translate(404,30)">7</text>
76+
<text y="0.71em" transform="translate(458,30)">8</text>
77+
<text y="0.71em" transform="translate(512,30)">9</text>
78+
<text y="0.71em" transform="translate(566,30)">10</text>
79+
</g>
80+
<g aria-label="cell">
81+
<rect x="26" width="49" y="0" height="30" fill="rgb(0, 0, 255)"></rect>
82+
<rect x="80" width="49" y="0" height="30" fill="rgb(13, 0, 242)"></rect>
83+
<rect x="134" width="49" y="0" height="30" fill="rgb(26, 0, 230)"></rect>
84+
<rect x="188" width="49" y="0" height="30" fill="rgb(38, 0, 217)"></rect>
85+
<rect x="242" width="49" y="0" height="30" fill="rgb(51, 0, 204)"></rect>
86+
<rect x="296" width="49" y="0" height="30" fill="rgb(64, 0, 191)"></rect>
87+
<rect x="350" width="49" y="0" height="30" fill="rgb(77, 0, 179)"></rect>
88+
<rect x="404" width="49" y="0" height="30" fill="rgb(89, 0, 166)"></rect>
89+
<rect x="458" width="49" y="0" height="30" fill="rgb(102, 0, 153)"></rect>
90+
<rect x="512" width="49" y="0" height="30" fill="rgb(115, 0, 140)"></rect>
91+
<rect x="566" width="49" y="0" height="30" fill="rgb(128, 0, 128)"></rect>
92+
</g>
93+
</svg></figure>

‎test/output/warnMisalignedLinearDomain.html‎ renamed to ‎test/output/colorPiecewiseLinearRange.html‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
white-space: pre;
1414
}
1515
</style>
16-
<image x="0" y="18" width="240" height="10" preserveAspectRatio="none" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAABCAYAAAAxWXB3AAAABmJLR0QA/wD/AP+gvaeTAAAAGElEQVQ4jWP8z8Dw/z8DI8MoHsWjeORhABlhAQ9+GPb9AAAAAElFTkSuQmCC"></image>
16+
<image x="0" y="18" width="240" height="10" preserveAspectRatio="none" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAABCAYAAAAxWXB3AAAABmJLR0QA/wD/AP+gvaeTAAAAIElEQVQ4jWP8z8Dw/x8DE8MoHpn4PyMDAwPjv1E8QjEAncEAkBlnMcQAAAAASUVORK5CYII="></image>
1717
<g transform="translate(0,28)" fill="none" text-anchor="middle" font-variant="tabular-nums">
1818
<g class="tick" opacity="1" transform="translate(0.5,0)">
1919
<line stroke="currentColor" y2="6" y1="-10"></line>
@@ -83,16 +83,15 @@
8383
</g>
8484
<g aria-label="cell">
8585
<rect x="26" width="49" y="0" height="30" fill="rgb(255, 0, 0)"></rect>
86-
<rect x="80" width="49" y="0" height="30" fill="rgb(230, 0, 26)"></rect>
87-
<rect x="134" width="49" y="0" height="30" fill="rgb(204, 0, 51)"></rect>
88-
<rect x="188" width="49" y="0" height="30" fill="rgb(179, 0, 77)"></rect>
89-
<rect x="242" width="49" y="0" height="30" fill="rgb(153, 0, 102)"></rect>
90-
<rect x="296" width="49" y="0" height="30" fill="rgb(128, 0, 128)"></rect>
91-
<rect x="350" width="49" y="0" height="30" fill="rgb(102, 0, 153)"></rect>
92-
<rect x="404" width="49" y="0" height="30" fill="rgb(77, 0, 179)"></rect>
93-
<rect x="458" width="49" y="0" height="30" fill="rgb(51, 0, 204)"></rect>
94-
<rect x="512" width="49" y="0" height="30" fill="rgb(26, 0, 230)"></rect>
95-
<rect x="566" width="49" y="0" height="30" fill="rgb(0, 0, 255)"></rect>
86+
<rect x="80" width="49" y="0" height="30" fill="rgb(204, 0, 51)"></rect>
87+
<rect x="134" width="49" y="0" height="30" fill="rgb(153, 0, 102)"></rect>
88+
<rect x="188" width="49" y="0" height="30" fill="rgb(102, 0, 153)"></rect>
89+
<rect x="242" width="49" y="0" height="30" fill="rgb(51, 0, 204)"></rect>
90+
<rect x="296" width="49" y="0" height="30" fill="rgb(0, 0, 255)"></rect>
91+
<rect x="350" width="49" y="0" height="30" fill="rgb(0, 26, 204)"></rect>
92+
<rect x="404" width="49" y="0" height="30" fill="rgb(0, 51, 153)"></rect>
93+
<rect x="458" width="49" y="0" height="30" fill="rgb(0, 77, 102)"></rect>
94+
<rect x="512" width="49" y="0" height="30" fill="rgb(0, 102, 51)"></rect>
95+
<rect x="566" width="49" y="0" height="30" fill="rgb(0, 128, 0)"></rect>
9696
</g>
97-
<text x="640" y="20" dy="-1em" text-anchor="end" font-family="initial">⚠️<title>1 warning. Please check the console.</title></text>
9897
</svg></figure>

‎test/output/warnMisalignedLinearRange.html‎ renamed to ‎test/output/colorPiecewiseLinearRangeHcl.html‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
white-space: pre;
1414
}
1515
</style>
16-
<image x="0" y="18" width="240" height="10" preserveAspectRatio="none" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAABCAYAAAAxWXB3AAAABmJLR0QA/wD/AP+gvaeTAAAAGElEQVQ4jWP8z8Dw/z8DI8MoHsWjeORhABlhAQ9+GPb9AAAAAElFTkSuQmCC"></image>
16+
<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>
1717
<g transform="translate(0,28)" fill="none" text-anchor="middle" font-variant="tabular-nums">
1818
<g class="tick" opacity="1" transform="translate(0.5,0)">
1919
<line stroke="currentColor" y2="6" y1="-10"></line>
@@ -83,16 +83,15 @@
8383
</g>
8484
<g aria-label="cell">
8585
<rect x="26" width="49" y="0" height="30" fill="rgb(255, 0, 0)"></rect>
86-
<rect x="80" width="49" y="0" height="30" fill="rgb(230, 0, 26)"></rect>
87-
<rect x="134" width="49" y="0" height="30" fill="rgb(204, 0, 51)"></rect>
88-
<rect x="188" width="49" y="0" height="30" fill="rgb(179, 0, 77)"></rect>
89-
<rect x="242" width="49" y="0" height="30" fill="rgb(153, 0, 102)"></rect>
90-
<rect x="296" width="49" y="0" height="30" fill="rgb(128, 0, 128)"></rect>
91-
<rect x="350" width="49" y="0" height="30" fill="rgb(102, 0, 153)"></rect>
92-
<rect x="404" width="49" y="0" height="30" fill="rgb(77, 0, 179)"></rect>
93-
<rect x="458" width="49" y="0" height="30" fill="rgb(51, 0, 204)"></rect>
94-
<rect x="512" width="49" y="0" height="30" fill="rgb(26, 0, 230)"></rect>
95-
<rect x="566" width="49" y="0" height="30" fill="rgb(0, 0, 255)"></rect>
86+
<rect x="80" width="49" y="0" height="30" fill="rgb(255, 0, 61)"></rect>
87+
<rect x="134" width="49" y="0" height="30" fill="rgb(255, 0, 108)"></rect>
88+
<rect x="188" width="49" y="0" height="30" fill="rgb(227, 0, 161)"></rect>
89+
<rect x="242" width="49" y="0" height="30" fill="rgb(169, 0, 213)"></rect>
90+
<rect x="296" width="49" y="0" height="30" fill="rgb(0, 0, 255)"></rect>
91+
<rect x="350" width="49" y="0" height="30" fill="rgb(0, 91, 255)"></rect>
92+
<rect x="404" width="49" y="0" height="30" fill="rgb(0, 112, 228)"></rect>
93+
<rect x="458" width="49" y="0" height="30" fill="rgb(0, 121, 147)"></rect>
94+
<rect x="512" width="49" y="0" height="30" fill="rgb(0, 127, 70)"></rect>
95+
<rect x="566" width="49" y="0" height="30" fill="rgb(0, 128, 0)"></rect>
9696
</g>
97-
<text x="640" y="20" dy="-1em" text-anchor="end" font-family="initial">⚠️<title>1 warning. Please check the console.</title></text>
9897
</svg></figure>

0 commit comments

Comments
 (0)