Skip to content

Commit acddca6

Browse files
FilFil
committed
upgrade opacity legends: support for display-p3 colors, checkerboard, dark mode
1 parent 2a2ef29 commit acddca6

17 files changed

Lines changed: 1236 additions & 287 deletions

‎src/legends.js‎

Lines changed: 22 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import {rgb} from "d3";
1+
import {select} from "d3";
22
import {createContext} from "./context.js";
33
import {legendRamp} from "./legends/ramp.js";
44
import {isSymbolColorLegend, legendSwatches, legendSymbols} from "./legends/swatches.js";
55
import {inherit, isScaleOptions} from "./options.js";
6+
import {getFilterId} from "./style.js";
67
import {normalizeScale} from "./scales.js";
78

89
const legendRegistry = new Map([
@@ -56,16 +57,30 @@ function legendColor(color, {legend = true, ...options}) {
5657
}
5758
}
5859

59-
function legendOpacity({type, interpolate, ...scale}, {legend = true, color = rgb(0, 0, 0), ...options}) {
60+
function legendOpacity({type, interpolate, ...scale}, {legend = true, color = "currentColor", ...options}) {
6061
if (!interpolate) throw new Error(`${type} opacity scales are not supported`);
6162
if (legend === true) legend = "ramp";
6263
if (`${legend}`.toLowerCase() !== "ramp") throw new Error(`${legend} opacity legends are not supported`);
63-
return legendColor({type, ...scale, interpolate: interpolateOpacity(color)}, {legend, ...options});
64-
}
64+
const svg = legendColor({type, ...scale, interpolate: (t) => `rgba(0,0,0,${t})`}, {legend, ...options});
65+
if (!svg) return;
66+
const s = select(svg);
67+
const image = s.select("image");
68+
const x = +image.attr("x");
69+
const y = +image.attr("y");
70+
const w = +image.attr("width");
71+
const h = +image.attr("height");
72+
const pid = getFilterId();
73+
const fid = getFilterId();
74+
75+
// Checkerboard
76+
const pattern = s.append("pattern").attr("id", pid).attr("y", y).attr("width", h).attr("height", h).attr("patternUnits", "userSpaceOnUse"); // prettier-ignore
77+
pattern.append("path").attr("d", `M0,0h${h / 2}v${h / 2}H0ZM${h / 2},${h / 2}h${h / 2}v${h / 2}H${h / 2}Z`).attr("fill", "color-mix(in srgb, var(--plot-background), currentColor 20%)"); // prettier-ignore
78+
s.insert("rect", "image").attr("x", x).attr("y", y).attr("width", w).attr("height", h).attr("fill", `url(#${pid})`); // prettier-ignore
6579

66-
function interpolateOpacity(color) {
67-
const {r, g, b} = rgb(color) || rgb(0, 0, 0); // treat invalid color as black
68-
return (t) => `rgba(${r},${g},${b},${t})`;
80+
// Color
81+
image.attr("filter", `url(#${fid})`);
82+
s.append("filter").attr("id", fid).call((f) => { f.append("feFlood").attr("flood-color", color); f.append("feComposite").attr("in2", "SourceGraphic").attr("operator", "in"); }); // prettier-ignore
83+
return svg;
6984
}
7085

7186
export function createLegends(scales, context, options) {

‎src/style.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,17 @@ export function setOffset(o) {
1313
}
1414

1515
let nextClipId = 0;
16+
let nextFilterId = 0;
1617
let nextPatternId = 0;
1718

1819
export function getClipId() {
1920
return `plot-clip-${++nextClipId}`;
2021
}
2122

23+
export function getFilterId() {
24+
return `plot-filter-${++nextFilterId}`;
25+
}
26+
2227
export function getPatternId() {
2328
return `plot-pattern-${++nextPatternId}`;
2429
}

‎test/output/opacityLegend.html‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
<div style="display: flex; gap: 20px;">
2+
<div style="background-color: white; color: black; color-scheme: light; padding: 20px;"><svg class="plot-ramp" font-family="system-ui, sans-serif" font-size="10" width="240" height="50" viewBox="0 0 240 50" style="--plot-background: white" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3+
<style>
4+
:where(.plot-ramp) {
5+
display: block;
6+
height: auto;
7+
height: intrinsic;
8+
max-width: 100%;
9+
overflow: visible;
10+
}
11+
12+
:where(.plot-ramp text) {
13+
white-space: pre;
14+
}
15+
</style>
16+
<rect x="0" y="18" width="240" height="10" fill="url(#plot-filter-1)"></rect>
17+
<image x="0" y="18" width="240" height="10" preserveAspectRatio="none" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAABCAYAAAAxWXB3AAAABmJLR0QA/wD/AP+gvaeTAAAAWUlEQVQ4jd2SSwoAIAhEx+5/6DZCg/gZqFWBoCZPRzScZwCW+8tjozjmO6tqJxbnlX4K57Y2m3n6Z44h36eqMXK4X2SrO+rmV7hZbeVPepR7UrX9pOWllewNAjMBAXvLNnYAAAAASUVORK5CYII=" filter="url(#plot-filter-2)"></image>
18+
<g transform="translate(0,28)" fill="none" text-anchor="middle" font-variant="tabular-nums">
19+
<g class="tick" opacity="1" transform="translate(0.5,0)">
20+
<line stroke="currentColor" y2="6" y1="-10"></line>
21+
<text fill="currentColor" y="9" dy="0.71em">0</text>
22+
</g>
23+
<g class="tick" opacity="1" transform="translate(48.5,0)">
24+
<line stroke="currentColor" y2="6" y1="-10"></line>
25+
<text fill="currentColor" y="9" dy="0.71em">2</text>
26+
</g>
27+
<g class="tick" opacity="1" transform="translate(96.5,0)">
28+
<line stroke="currentColor" y2="6" y1="-10"></line>
29+
<text fill="currentColor" y="9" dy="0.71em">4</text>
30+
</g>
31+
<g class="tick" opacity="1" transform="translate(144.5,0)">
32+
<line stroke="currentColor" y2="6" y1="-10"></line>
33+
<text fill="currentColor" y="9" dy="0.71em">6</text>
34+
</g>
35+
<g class="tick" opacity="1" transform="translate(192.5,0)">
36+
<line stroke="currentColor" y2="6" y1="-10"></line>
37+
<text fill="currentColor" y="9" dy="0.71em">8</text>
38+
</g>
39+
<g class="tick" opacity="1" transform="translate(240.5,0)">
40+
<line stroke="currentColor" y2="6" y1="-10"></line>
41+
<text fill="currentColor" y="9" dy="0.71em">10</text>
42+
</g>
43+
</g>
44+
<text x="0" y="12" fill="currentColor" font-weight="bold">Quantitative</text>
45+
<pattern id="plot-filter-1" y="18" width="10" height="10" patternUnits="userSpaceOnUse">
46+
<path d="M0,0h5v5H0ZM5,5h5v5H5Z" fill="color-mix(in srgb, var(--plot-background), currentColor 20%)"></path>
47+
</pattern>
48+
<filter id="plot-filter-2">
49+
<feFlood flood-color="currentColor"></feFlood>
50+
<feComposite in2="SourceGraphic" operator="in"></feComposite>
51+
</filter>
52+
</svg></div>
53+
<div style="background-color: black; color: white; color-scheme: dark; padding: 20px;"><svg class="plot-ramp" font-family="system-ui, sans-serif" font-size="10" width="240" height="50" viewBox="0 0 240 50" style="--plot-background: black" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
54+
<style>
55+
:where(.plot-ramp) {
56+
display: block;
57+
height: auto;
58+
height: intrinsic;
59+
max-width: 100%;
60+
overflow: visible;
61+
}
62+
63+
:where(.plot-ramp text) {
64+
white-space: pre;
65+
}
66+
</style>
67+
<rect x="0" y="18" width="240" height="10" fill="url(#plot-filter-3)"></rect>
68+
<image x="0" y="18" width="240" height="10" preserveAspectRatio="none" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAABCAYAAAAxWXB3AAAABmJLR0QA/wD/AP+gvaeTAAAAWUlEQVQ4jd2SSwoAIAhEx+5/6DZCg/gZqFWBoCZPRzScZwCW+8tjozjmO6tqJxbnlX4K57Y2m3n6Z44h36eqMXK4X2SrO+rmV7hZbeVPepR7UrX9pOWllewNAjMBAXvLNnYAAAAASUVORK5CYII=" filter="url(#plot-filter-4)"></image>
69+
<g transform="translate(0,28)" fill="none" text-anchor="middle" font-variant="tabular-nums">
70+
<g class="tick" opacity="1" transform="translate(0.5,0)">
71+
<line stroke="currentColor" y2="6" y1="-10"></line>
72+
<text fill="currentColor" y="9" dy="0.71em">0</text>
73+
</g>
74+
<g class="tick" opacity="1" transform="translate(48.5,0)">
75+
<line stroke="currentColor" y2="6" y1="-10"></line>
76+
<text fill="currentColor" y="9" dy="0.71em">2</text>
77+
</g>
78+
<g class="tick" opacity="1" transform="translate(96.5,0)">
79+
<line stroke="currentColor" y2="6" y1="-10"></line>
80+
<text fill="currentColor" y="9" dy="0.71em">4</text>
81+
</g>
82+
<g class="tick" opacity="1" transform="translate(144.5,0)">
83+
<line stroke="currentColor" y2="6" y1="-10"></line>
84+
<text fill="currentColor" y="9" dy="0.71em">6</text>
85+
</g>
86+
<g class="tick" opacity="1" transform="translate(192.5,0)">
87+
<line stroke="currentColor" y2="6" y1="-10"></line>
88+
<text fill="currentColor" y="9" dy="0.71em">8</text>
89+
</g>
90+
<g class="tick" opacity="1" transform="translate(240.5,0)">
91+
<line stroke="currentColor" y2="6" y1="-10"></line>
92+
<text fill="currentColor" y="9" dy="0.71em">10</text>
93+
</g>
94+
</g>
95+
<text x="0" y="12" fill="currentColor" font-weight="bold">Quantitative</text>
96+
<pattern id="plot-filter-3" y="18" width="10" height="10" patternUnits="userSpaceOnUse">
97+
<path d="M0,0h5v5H0ZM5,5h5v5H5Z" fill="color-mix(in srgb, var(--plot-background), currentColor 20%)"></path>
98+
</pattern>
99+
<filter id="plot-filter-4">
100+
<feFlood flood-color="currentColor"></feFlood>
101+
<feComposite in2="SourceGraphic" operator="in"></feComposite>
102+
</filter>
103+
</svg></div>
104+
</div>

‎test/output/opacityLegend.svg‎

Lines changed: 0 additions & 43 deletions
This file was deleted.

‎test/output/opacityLegendCSS4.html‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
<div style="display: flex; gap: 20px;">
2+
<div style="background-color: white; color: black; color-scheme: light; padding: 20px;"><svg class="plot-ramp" font-family="system-ui, sans-serif" font-size="10" width="240" height="50" viewBox="0 0 240 50" style="--plot-background: white" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3+
<style>
4+
:where(.plot-ramp) {
5+
display: block;
6+
height: auto;
7+
height: intrinsic;
8+
max-width: 100%;
9+
overflow: visible;
10+
}
11+
12+
:where(.plot-ramp text) {
13+
white-space: pre;
14+
}
15+
</style>
16+
<rect x="0" y="18" width="240" height="10" fill="url(#plot-filter-25)"></rect>
17+
<image x="0" y="18" width="240" height="10" preserveAspectRatio="none" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAABCAYAAAAxWXB3AAAABmJLR0QA/wD/AP+gvaeTAAAAWUlEQVQ4jd2SSwoAIAhEx+5/6DZCg/gZqFWBoCZPRzScZwCW+8tjozjmO6tqJxbnlX4K57Y2m3n6Z44h36eqMXK4X2SrO+rmV7hZbeVPepR7UrX9pOWllewNAjMBAXvLNnYAAAAASUVORK5CYII=" filter="url(#plot-filter-26)"></image>
18+
<g transform="translate(0,28)" fill="none" text-anchor="middle" font-variant="tabular-nums">
19+
<g class="tick" opacity="1" transform="translate(0.5,0)">
20+
<line stroke="currentColor" y2="6" y1="-10"></line>
21+
<text fill="currentColor" y="9" dy="0.71em">0.0</text>
22+
</g>
23+
<g class="tick" opacity="1" transform="translate(48.5,0)">
24+
<line stroke="currentColor" y2="6" y1="-10"></line>
25+
<text fill="currentColor" y="9" dy="0.71em">0.2</text>
26+
</g>
27+
<g class="tick" opacity="1" transform="translate(96.5,0)">
28+
<line stroke="currentColor" y2="6" y1="-10"></line>
29+
<text fill="currentColor" y="9" dy="0.71em">0.4</text>
30+
</g>
31+
<g class="tick" opacity="1" transform="translate(144.5,0)">
32+
<line stroke="currentColor" y2="6" y1="-10"></line>
33+
<text fill="currentColor" y="9" dy="0.71em">0.6</text>
34+
</g>
35+
<g class="tick" opacity="1" transform="translate(192.5,0)">
36+
<line stroke="currentColor" y2="6" y1="-10"></line>
37+
<text fill="currentColor" y="9" dy="0.71em">0.8</text>
38+
</g>
39+
<g class="tick" opacity="1" transform="translate(240.5,0)">
40+
<line stroke="currentColor" y2="6" y1="-10"></line>
41+
<text fill="currentColor" y="9" dy="0.71em">1.0</text>
42+
</g>
43+
</g>
44+
<text x="0" y="12" fill="currentColor" font-weight="bold">oklch</text>
45+
<pattern id="plot-filter-25" y="18" width="10" height="10" patternUnits="userSpaceOnUse">
46+
<path d="M0,0h5v5H0ZM5,5h5v5H5Z" fill="color-mix(in srgb, var(--plot-background), currentColor 20%)"></path>
47+
</pattern>
48+
<filter id="plot-filter-26">
49+
<feFlood flood-color="oklch(70% 0.35 145)"></feFlood>
50+
<feComposite in2="SourceGraphic" operator="in"></feComposite>
51+
</filter>
52+
</svg></div>
53+
<div style="background-color: black; color: white; color-scheme: dark; padding: 20px;"><svg class="plot-ramp" font-family="system-ui, sans-serif" font-size="10" width="240" height="50" viewBox="0 0 240 50" style="--plot-background: black" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
54+
<style>
55+
:where(.plot-ramp) {
56+
display: block;
57+
height: auto;
58+
height: intrinsic;
59+
max-width: 100%;
60+
overflow: visible;
61+
}
62+
63+
:where(.plot-ramp text) {
64+
white-space: pre;
65+
}
66+
</style>
67+
<rect x="0" y="18" width="240" height="10" fill="url(#plot-filter-27)"></rect>
68+
<image x="0" y="18" width="240" height="10" preserveAspectRatio="none" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAABCAYAAAAxWXB3AAAABmJLR0QA/wD/AP+gvaeTAAAAWUlEQVQ4jd2SSwoAIAhEx+5/6DZCg/gZqFWBoCZPRzScZwCW+8tjozjmO6tqJxbnlX4K57Y2m3n6Z44h36eqMXK4X2SrO+rmV7hZbeVPepR7UrX9pOWllewNAjMBAXvLNnYAAAAASUVORK5CYII=" filter="url(#plot-filter-28)"></image>
69+
<g transform="translate(0,28)" fill="none" text-anchor="middle" font-variant="tabular-nums">
70+
<g class="tick" opacity="1" transform="translate(0.5,0)">
71+
<line stroke="currentColor" y2="6" y1="-10"></line>
72+
<text fill="currentColor" y="9" dy="0.71em">0.0</text>
73+
</g>
74+
<g class="tick" opacity="1" transform="translate(48.5,0)">
75+
<line stroke="currentColor" y2="6" y1="-10"></line>
76+
<text fill="currentColor" y="9" dy="0.71em">0.2</text>
77+
</g>
78+
<g class="tick" opacity="1" transform="translate(96.5,0)">
79+
<line stroke="currentColor" y2="6" y1="-10"></line>
80+
<text fill="currentColor" y="9" dy="0.71em">0.4</text>
81+
</g>
82+
<g class="tick" opacity="1" transform="translate(144.5,0)">
83+
<line stroke="currentColor" y2="6" y1="-10"></line>
84+
<text fill="currentColor" y="9" dy="0.71em">0.6</text>
85+
</g>
86+
<g class="tick" opacity="1" transform="translate(192.5,0)">
87+
<line stroke="currentColor" y2="6" y1="-10"></line>
88+
<text fill="currentColor" y="9" dy="0.71em">0.8</text>
89+
</g>
90+
<g class="tick" opacity="1" transform="translate(240.5,0)">
91+
<line stroke="currentColor" y2="6" y1="-10"></line>
92+
<text fill="currentColor" y="9" dy="0.71em">1.0</text>
93+
</g>
94+
</g>
95+
<text x="0" y="12" fill="currentColor" font-weight="bold">oklch</text>
96+
<pattern id="plot-filter-27" y="18" width="10" height="10" patternUnits="userSpaceOnUse">
97+
<path d="M0,0h5v5H0ZM5,5h5v5H5Z" fill="color-mix(in srgb, var(--plot-background), currentColor 20%)"></path>
98+
</pattern>
99+
<filter id="plot-filter-28">
100+
<feFlood flood-color="oklch(70% 0.35 145)"></feFlood>
101+
<feComposite in2="SourceGraphic" operator="in"></feComposite>
102+
</filter>
103+
</svg></div>
104+
</div>

0 commit comments

Comments
 (0)