Skip to content

Commit f0d619e

Browse files
mbostockmbostock
authored
svg swatches (#970)
1 parent 68f2f86 commit f0d619e

20 files changed

+4066
-1264
lines changed

‎src/legends/swatches.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,15 @@ export function legendSwatches(color, options) {
1717
return legendItems(
1818
color,
1919
options,
20-
selection => selection.style("--color", color.scale),
21-
className => `.${className}-swatch::before {
22-
content: "";
20+
(selection, scale) => selection.append("svg")
21+
.attr("fill", scale.scale)
22+
.append("rect")
23+
.attr("width", "100%")
24+
.attr("height", "100%"),
25+
className => `.${className}-swatch svg {
2326
width: var(--swatchWidth);
2427
height: var(--swatchHeight);
2528
margin-right: 0.5em;
26-
background: var(--color);
2729
}`
2830
);
2931
}

‎test/output/caltrain.html‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,10 @@
1111
margin-left: 0px;
1212
}
1313

14-
.plot-swatch::before {
15-
content: "";
14+
.plot-swatch svg {
1615
width: var(--swatchWidth);
1716
height: var(--swatchHeight);
1817
margin-right: 0.5em;
19-
background: var(--color);
2018
}
2119

2220
.plot {
@@ -31,7 +29,13 @@
3129
align-items: center;
3230
margin-right: 1em;
3331
}
34-
</style><span class="plot-swatch" style="--color: currentColor;">N</span><span class="plot-swatch" style="--color: peru;">L</span><span class="plot-swatch" style="--color: brown;">B</span>
32+
</style><span class="plot-swatch"><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
33+
<rect width="100%" height="100%"></rect>
34+
</svg>N</span><span class="plot-swatch"><svg fill="peru" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
35+
<rect width="100%" height="100%"></rect>
36+
</svg>L</span><span class="plot-swatch"><svg fill="brown" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
37+
<rect width="100%" height="100%"></rect>
38+
</svg>B</span>
3539
</div><svg class="plot-2" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="240" height="520" viewBox="0 0 240 520" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3640
<style>
3741
.plot-2 {

‎test/output/colorLegendCategorical.html‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,10 @@
1010
margin-left: 0px;
1111
}
1212

13-
.plot-swatch::before {
14-
content: "";
13+
.plot-swatch svg {
1514
width: var(--swatchWidth);
1615
height: var(--swatchHeight);
1716
margin-right: 0.5em;
18-
background: var(--color);
1917
}
2018

2119
.plot {
@@ -30,5 +28,25 @@
3028
align-items: center;
3129
margin-right: 1em;
3230
}
33-
</style><span class="plot-swatch" style="--color: #4e79a7;">A</span><span class="plot-swatch" style="--color: #f28e2c;">B</span><span class="plot-swatch" style="--color: #e15759;">C</span><span class="plot-swatch" style="--color: #76b7b2;">D</span><span class="plot-swatch" style="--color: #59a14f;">E</span><span class="plot-swatch" style="--color: #edc949;">F</span><span class="plot-swatch" style="--color: #af7aa1;">G</span><span class="plot-swatch" style="--color: #ff9da7;">H</span><span class="plot-swatch" style="--color: #9c755f;">I</span><span class="plot-swatch" style="--color: #bab0ab;">J</span>
31+
</style><span class="plot-swatch"><svg fill="#4e79a7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
32+
<rect width="100%" height="100%"></rect>
33+
</svg>A</span><span class="plot-swatch"><svg fill="#f28e2c" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
34+
<rect width="100%" height="100%"></rect>
35+
</svg>B</span><span class="plot-swatch"><svg fill="#e15759" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
36+
<rect width="100%" height="100%"></rect>
37+
</svg>C</span><span class="plot-swatch"><svg fill="#76b7b2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
38+
<rect width="100%" height="100%"></rect>
39+
</svg>D</span><span class="plot-swatch"><svg fill="#59a14f" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
40+
<rect width="100%" height="100%"></rect>
41+
</svg>E</span><span class="plot-swatch"><svg fill="#edc949" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
42+
<rect width="100%" height="100%"></rect>
43+
</svg>F</span><span class="plot-swatch"><svg fill="#af7aa1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
44+
<rect width="100%" height="100%"></rect>
45+
</svg>G</span><span class="plot-swatch"><svg fill="#ff9da7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
46+
<rect width="100%" height="100%"></rect>
47+
</svg>H</span><span class="plot-swatch"><svg fill="#9c755f" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
48+
<rect width="100%" height="100%"></rect>
49+
</svg>I</span><span class="plot-swatch"><svg fill="#bab0ab" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
50+
<rect width="100%" height="100%"></rect>
51+
</svg>J</span>
3452
</div>

‎test/output/colorLegendCategoricalColumns.html‎

Lines changed: 31 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,10 @@
77
margin-left: 0px;
88
}
99

10-
.plot-swatch::before {
11-
content: "";
10+
.plot-swatch svg {
1211
width: var(--swatchWidth);
1312
height: var(--swatchHeight);
1413
margin-right: 0.5em;
15-
background: var(--color);
1614
}
1715

1816
.plot-swatch {
@@ -32,34 +30,54 @@
3230
text-overflow: ellipsis;
3331
}
3432
</style>
35-
<div class="plot-swatch" style="--color: #4e79a7;">
33+
<div class="plot-swatch"><svg fill="#4e79a7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
34+
<rect width="100%" height="100%"></rect>
35+
</svg>
3636
<div class="plot-label" title="Wholesale and Retail Trade">Wholesale and Retail Trade</div>
3737
</div>
38-
<div class="plot-swatch" style="--color: #f28e2c;">
38+
<div class="plot-swatch"><svg fill="#f28e2c" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
39+
<rect width="100%" height="100%"></rect>
40+
</svg>
3941
<div class="plot-label" title="Manufacturing">Manufacturing</div>
4042
</div>
41-
<div class="plot-swatch" style="--color: #e15759;">
43+
<div class="plot-swatch"><svg fill="#e15759" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
44+
<rect width="100%" height="100%"></rect>
45+
</svg>
4246
<div class="plot-label" title="Leisure and hospitality">Leisure and hospitality</div>
4347
</div>
44-
<div class="plot-swatch" style="--color: #76b7b2;">
48+
<div class="plot-swatch"><svg fill="#76b7b2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
49+
<rect width="100%" height="100%"></rect>
50+
</svg>
4551
<div class="plot-label" title="Business services">Business services</div>
4652
</div>
47-
<div class="plot-swatch" style="--color: #59a14f;">
53+
<div class="plot-swatch"><svg fill="#59a14f" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
54+
<rect width="100%" height="100%"></rect>
55+
</svg>
4856
<div class="plot-label" title="Construction">Construction</div>
4957
</div>
50-
<div class="plot-swatch" style="--color: #edc949;">
58+
<div class="plot-swatch"><svg fill="#edc949" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
59+
<rect width="100%" height="100%"></rect>
60+
</svg>
5161
<div class="plot-label" title="Education and Health">Education and Health</div>
5262
</div>
53-
<div class="plot-swatch" style="--color: #af7aa1;">
63+
<div class="plot-swatch"><svg fill="#af7aa1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
64+
<rect width="100%" height="100%"></rect>
65+
</svg>
5466
<div class="plot-label" title="Government">Government</div>
5567
</div>
56-
<div class="plot-swatch" style="--color: #ff9da7;">
68+
<div class="plot-swatch"><svg fill="#ff9da7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
69+
<rect width="100%" height="100%"></rect>
70+
</svg>
5771
<div class="plot-label" title="Finance">Finance</div>
5872
</div>
59-
<div class="plot-swatch" style="--color: #9c755f;">
73+
<div class="plot-swatch"><svg fill="#9c755f" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
74+
<rect width="100%" height="100%"></rect>
75+
</svg>
6076
<div class="plot-label" title="Self-employed">Self-employed</div>
6177
</div>
62-
<div class="plot-swatch" style="--color: #bab0ab;">
78+
<div class="plot-swatch"><svg fill="#bab0ab" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
79+
<rect width="100%" height="100%"></rect>
80+
</svg>
6381
<div class="plot-label" title="Other">Other</div>
6482
</div>
6583
</div>

‎test/output/colorLegendCategoricalReverse.html‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,10 @@
1010
margin-left: 0px;
1111
}
1212

13-
.plot-swatch::before {
14-
content: "";
13+
.plot-swatch svg {
1514
width: var(--swatchWidth);
1615
height: var(--swatchHeight);
1716
margin-right: 0.5em;
18-
background: var(--color);
1917
}
2018

2119
.plot {
@@ -30,5 +28,25 @@
3028
align-items: center;
3129
margin-right: 1em;
3230
}
33-
</style><span class="plot-swatch" style="--color: #4e79a7;">J</span><span class="plot-swatch" style="--color: #f28e2c;">I</span><span class="plot-swatch" style="--color: #e15759;">H</span><span class="plot-swatch" style="--color: #76b7b2;">G</span><span class="plot-swatch" style="--color: #59a14f;">F</span><span class="plot-swatch" style="--color: #edc949;">E</span><span class="plot-swatch" style="--color: #af7aa1;">D</span><span class="plot-swatch" style="--color: #ff9da7;">C</span><span class="plot-swatch" style="--color: #9c755f;">B</span><span class="plot-swatch" style="--color: #bab0ab;">A</span>
31+
</style><span class="plot-swatch"><svg fill="#4e79a7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
32+
<rect width="100%" height="100%"></rect>
33+
</svg>J</span><span class="plot-swatch"><svg fill="#f28e2c" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
34+
<rect width="100%" height="100%"></rect>
35+
</svg>I</span><span class="plot-swatch"><svg fill="#e15759" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
36+
<rect width="100%" height="100%"></rect>
37+
</svg>H</span><span class="plot-swatch"><svg fill="#76b7b2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
38+
<rect width="100%" height="100%"></rect>
39+
</svg>G</span><span class="plot-swatch"><svg fill="#59a14f" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
40+
<rect width="100%" height="100%"></rect>
41+
</svg>F</span><span class="plot-swatch"><svg fill="#edc949" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
42+
<rect width="100%" height="100%"></rect>
43+
</svg>E</span><span class="plot-swatch"><svg fill="#af7aa1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
44+
<rect width="100%" height="100%"></rect>
45+
</svg>D</span><span class="plot-swatch"><svg fill="#ff9da7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
46+
<rect width="100%" height="100%"></rect>
47+
</svg>C</span><span class="plot-swatch"><svg fill="#9c755f" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
48+
<rect width="100%" height="100%"></rect>
49+
</svg>B</span><span class="plot-swatch"><svg fill="#bab0ab" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
50+
<rect width="100%" height="100%"></rect>
51+
</svg>A</span>
3452
</div>

‎test/output/colorLegendCategoricalScheme.html‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,10 @@
1010
margin-left: 0px;
1111
}
1212

13-
.plot-swatch::before {
14-
content: "";
13+
.plot-swatch svg {
1514
width: var(--swatchWidth);
1615
height: var(--swatchHeight);
1716
margin-right: 0.5em;
18-
background: var(--color);
1917
}
2018

2119
.plot {
@@ -30,5 +28,25 @@
3028
align-items: center;
3129
margin-right: 1em;
3230
}
33-
</style><span class="plot-swatch" style="--color: #1f77b4;">A</span><span class="plot-swatch" style="--color: #ff7f0e;">B</span><span class="plot-swatch" style="--color: #2ca02c;">C</span><span class="plot-swatch" style="--color: #d62728;">D</span><span class="plot-swatch" style="--color: #9467bd;">E</span><span class="plot-swatch" style="--color: #8c564b;">F</span><span class="plot-swatch" style="--color: #e377c2;">G</span><span class="plot-swatch" style="--color: #7f7f7f;">H</span><span class="plot-swatch" style="--color: #bcbd22;">I</span><span class="plot-swatch" style="--color: #17becf;">J</span>
31+
</style><span class="plot-swatch"><svg fill="#1f77b4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
32+
<rect width="100%" height="100%"></rect>
33+
</svg>A</span><span class="plot-swatch"><svg fill="#ff7f0e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
34+
<rect width="100%" height="100%"></rect>
35+
</svg>B</span><span class="plot-swatch"><svg fill="#2ca02c" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
36+
<rect width="100%" height="100%"></rect>
37+
</svg>C</span><span class="plot-swatch"><svg fill="#d62728" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
38+
<rect width="100%" height="100%"></rect>
39+
</svg>D</span><span class="plot-swatch"><svg fill="#9467bd" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
40+
<rect width="100%" height="100%"></rect>
41+
</svg>E</span><span class="plot-swatch"><svg fill="#8c564b" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
42+
<rect width="100%" height="100%"></rect>
43+
</svg>F</span><span class="plot-swatch"><svg fill="#e377c2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
44+
<rect width="100%" height="100%"></rect>
45+
</svg>G</span><span class="plot-swatch"><svg fill="#7f7f7f" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
46+
<rect width="100%" height="100%"></rect>
47+
</svg>H</span><span class="plot-swatch"><svg fill="#bcbd22" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
48+
<rect width="100%" height="100%"></rect>
49+
</svg>I</span><span class="plot-swatch"><svg fill="#17becf" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
50+
<rect width="100%" height="100%"></rect>
51+
</svg>J</span>
3452
</div>

‎test/output/colorLegendOrdinal.html‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,10 @@
1010
margin-left: 0px;
1111
}
1212

13-
.plot-swatch::before {
14-
content: "";
13+
.plot-swatch svg {
1514
width: var(--swatchWidth);
1615
height: var(--swatchHeight);
1716
margin-right: 0.5em;
18-
background: var(--color);
1917
}
2018

2119
.plot {
@@ -30,5 +28,25 @@
3028
align-items: center;
3129
margin-right: 1em;
3230
}
33-
</style><span class="plot-swatch" style="--color: rgb(35, 23, 27);">A</span><span class="plot-swatch" style="--color: rgb(72, 96, 230);">B</span><span class="plot-swatch" style="--color: rgb(42, 171, 238);">C</span><span class="plot-swatch" style="--color: rgb(46, 229, 174);">D</span><span class="plot-swatch" style="--color: rgb(106, 253, 106);">E</span><span class="plot-swatch" style="--color: rgb(192, 238, 61);">F</span><span class="plot-swatch" style="--color: rgb(254, 185, 39);">G</span><span class="plot-swatch" style="--color: rgb(254, 110, 26);">H</span><span class="plot-swatch" style="--color: rgb(194, 39, 10);">I</span><span class="plot-swatch" style="--color: rgb(144, 12, 0);">J</span>
31+
</style><span class="plot-swatch"><svg fill="rgb(35, 23, 27)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
32+
<rect width="100%" height="100%"></rect>
33+
</svg>A</span><span class="plot-swatch"><svg fill="rgb(72, 96, 230)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
34+
<rect width="100%" height="100%"></rect>
35+
</svg>B</span><span class="plot-swatch"><svg fill="rgb(42, 171, 238)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
36+
<rect width="100%" height="100%"></rect>
37+
</svg>C</span><span class="plot-swatch"><svg fill="rgb(46, 229, 174)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
38+
<rect width="100%" height="100%"></rect>
39+
</svg>D</span><span class="plot-swatch"><svg fill="rgb(106, 253, 106)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
40+
<rect width="100%" height="100%"></rect>
41+
</svg>E</span><span class="plot-swatch"><svg fill="rgb(192, 238, 61)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
42+
<rect width="100%" height="100%"></rect>
43+
</svg>F</span><span class="plot-swatch"><svg fill="rgb(254, 185, 39)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
44+
<rect width="100%" height="100%"></rect>
45+
</svg>G</span><span class="plot-swatch"><svg fill="rgb(254, 110, 26)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
46+
<rect width="100%" height="100%"></rect>
47+
</svg>H</span><span class="plot-swatch"><svg fill="rgb(194, 39, 10)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
48+
<rect width="100%" height="100%"></rect>
49+
</svg>I</span><span class="plot-swatch"><svg fill="rgb(144, 12, 0)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
50+
<rect width="100%" height="100%"></rect>
51+
</svg>J</span>
3452
</div>

0 commit comments

Comments
 (0)