Skip to content

Commit c79b3d1

Browse files
mbostockmbostock
committed
better ordinal & threshold opacity legend
1 parent 1c584c7 commit c79b3d1

3 files changed

Lines changed: 46 additions & 23 deletions

File tree

‎src/legends.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,14 @@ function legendOpacity(opacity, {legend = true, color = "currentColor", ...optio
6262
case "swatches":
6363
return legendSwatches({...opacity, scale: (x) => interpolate(opacity.scale(x))}, options);
6464
case "ramp":
65-
return legendRamp({...opacity, interpolate}, options);
65+
return legendRamp(
66+
opacity.type === "threshold"
67+
? {...opacity, range: opacity.range.map(interpolate)}
68+
: opacity.type === "ordinal"
69+
? {...opacity, scale: (x) => interpolate(opacity.scale(x))}
70+
: {...opacity, interpolate},
71+
options
72+
);
6673
default:
6774
throw new Error(`unknown opacity legend type: ${legend}`);
6875
}

‎test/output/ordinalOpacityRamp.html‎

Lines changed: 32 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -12,46 +12,57 @@
1212
white-space: pre;
1313
}
1414
</style>
15-
<image x="0" y="18" width="240" height="10" preserveAspectRatio="none" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAABCAYAAAAxWXB3AAAABmJLR0QA/wD/AP+gvaeTAAAAFUlEQVQ4jWNkYGD4zzAKRsEoGJEAAAFBAQFQiFUuAAAAAElFTkSuQmCC"></image>
15+
<g>
16+
<rect x="0" y="18" width="23" height="10" fill="color-mix(in srgb, transparent, currentColor 0.0%)"></rect>
17+
<rect x="24" y="18" width="23" height="10" fill="color-mix(in srgb, transparent, currentColor 11.1%)"></rect>
18+
<rect x="48" y="18" width="23" height="10" fill="color-mix(in srgb, transparent, currentColor 22.2%)"></rect>
19+
<rect x="72" y="18" width="23" height="10" fill="color-mix(in srgb, transparent, currentColor 33.3%)"></rect>
20+
<rect x="96" y="18" width="23" height="10" fill="color-mix(in srgb, transparent, currentColor 44.4%)"></rect>
21+
<rect x="120" y="18" width="23" height="10" fill="color-mix(in srgb, transparent, currentColor 55.6%)"></rect>
22+
<rect x="144" y="18" width="23" height="10" fill="color-mix(in srgb, transparent, currentColor 66.7%)"></rect>
23+
<rect x="168" y="18" width="23" height="10" fill="color-mix(in srgb, transparent, currentColor 77.8%)"></rect>
24+
<rect x="192" y="18" width="23" height="10" fill="color-mix(in srgb, transparent, currentColor 88.9%)"></rect>
25+
<rect x="216" y="18" width="23" height="10" fill="color-mix(in srgb, transparent, currentColor 100.0%)"></rect>
26+
</g>
1627
<g transform="translate(0,28)" fill="none" text-anchor="middle">
17-
<g class="tick" opacity="1" transform="translate(0.5,0)">
18-
<line stroke="currentColor" y2="6" y1="-10"></line>
28+
<g class="tick" opacity="1" transform="translate(12.5,0)">
29+
<line stroke="currentColor" y2="6"></line>
1930
<text fill="currentColor" y="9" dy="0.71em">0</text>
2031
</g>
21-
<g class="tick" opacity="1" transform="translate(27.167,0)">
22-
<line stroke="currentColor" y2="6" y1="-10"></line>
32+
<g class="tick" opacity="1" transform="translate(36.5,0)">
33+
<line stroke="currentColor" y2="6"></line>
2334
<text fill="currentColor" y="9" dy="0.71em">1</text>
2435
</g>
25-
<g class="tick" opacity="1" transform="translate(53.833,0)">
26-
<line stroke="currentColor" y2="6" y1="-10"></line>
36+
<g class="tick" opacity="1" transform="translate(60.5,0)">
37+
<line stroke="currentColor" y2="6"></line>
2738
<text fill="currentColor" y="9" dy="0.71em">2</text>
2839
</g>
29-
<g class="tick" opacity="1" transform="translate(80.5,0)">
30-
<line stroke="currentColor" y2="6" y1="-10"></line>
40+
<g class="tick" opacity="1" transform="translate(84.5,0)">
41+
<line stroke="currentColor" y2="6"></line>
3142
<text fill="currentColor" y="9" dy="0.71em">3</text>
3243
</g>
33-
<g class="tick" opacity="1" transform="translate(107.167,0)">
34-
<line stroke="currentColor" y2="6" y1="-10"></line>
44+
<g class="tick" opacity="1" transform="translate(108.5,0)">
45+
<line stroke="currentColor" y2="6"></line>
3546
<text fill="currentColor" y="9" dy="0.71em">4</text>
3647
</g>
37-
<g class="tick" opacity="1" transform="translate(133.833,0)">
38-
<line stroke="currentColor" y2="6" y1="-10"></line>
48+
<g class="tick" opacity="1" transform="translate(132.5,0)">
49+
<line stroke="currentColor" y2="6"></line>
3950
<text fill="currentColor" y="9" dy="0.71em">5</text>
4051
</g>
41-
<g class="tick" opacity="1" transform="translate(160.5,0)">
42-
<line stroke="currentColor" y2="6" y1="-10"></line>
52+
<g class="tick" opacity="1" transform="translate(156.5,0)">
53+
<line stroke="currentColor" y2="6"></line>
4354
<text fill="currentColor" y="9" dy="0.71em">6</text>
4455
</g>
45-
<g class="tick" opacity="1" transform="translate(187.167,0)">
46-
<line stroke="currentColor" y2="6" y1="-10"></line>
56+
<g class="tick" opacity="1" transform="translate(180.5,0)">
57+
<line stroke="currentColor" y2="6"></line>
4758
<text fill="currentColor" y="9" dy="0.71em">7</text>
4859
</g>
49-
<g class="tick" opacity="1" transform="translate(213.833,0)">
50-
<line stroke="currentColor" y2="6" y1="-10"></line>
60+
<g class="tick" opacity="1" transform="translate(204.5,0)">
61+
<line stroke="currentColor" y2="6"></line>
5162
<text fill="currentColor" y="9" dy="0.71em">8</text>
5263
</g>
53-
<g class="tick" opacity="1" transform="translate(240.5,0)">
54-
<line stroke="currentColor" y2="6" y1="-10"></line>
64+
<g class="tick" opacity="1" transform="translate(228.5,0)">
65+
<line stroke="currentColor" y2="6"></line>
5566
<text fill="currentColor" y="9" dy="0.71em">9</text>
5667
</g>
5768
</g>

‎test/output/ordinalOpacityThreshold.html‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,12 @@
1212
white-space: pre;
1313
}
1414
</style>
15-
<image x="0" y="18" width="240" height="10" preserveAspectRatio="none" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAABCAYAAAAxWXB3AAAABmJLR0QA/wD/AP+gvaeTAAAAFUlEQVQ4jWNkYGD4zzAKRsEoGJEAAAFBAQFQiFUuAAAAAElFTkSuQmCC"></image>
15+
<g>
16+
<rect x="0" y="18" width="60" height="10" fill="color-mix(in srgb, transparent, currentColor 20.0%)"></rect>
17+
<rect x="60" y="18" width="60" height="10" fill="color-mix(in srgb, transparent, currentColor 40.0%)"></rect>
18+
<rect x="120" y="18" width="60" height="10" fill="color-mix(in srgb, transparent, currentColor 60.0%)"></rect>
19+
<rect x="180" y="18" width="60" height="10" fill="color-mix(in srgb, transparent, currentColor 80.0%)"></rect>
20+
</g>
1621
<g transform="translate(0,28)" fill="none" text-anchor="middle" font-variant="tabular-nums">
1722
<g class="tick" opacity="1" transform="translate(60.5,0)">
1823
<line stroke="currentColor" y2="6" y1="-10"></line>

0 commit comments

Comments
 (0)