legends

observablehq · Oct 2, 2024 · cac2324 · cac2324
1 parent b703132
commit cac2324
Show file tree

Hide file tree

Showing 120 changed files with 1,935 additions and 1,933 deletions.
diff --git a/src/legends/ramp.js b/src/legends/ramp.js
@@ -29,6 +29,8 @@ export function legendRamp(color, options) {
   if (tickFormat === null) tickFormat = () => null;
 
   const svg = create("svg", context)
+    .attr("xmlns", "http://www.w3.org/2000/svg")
+    .attr("xmlns:xlink", "http://www.w3.org/1999/xlink")
     .attr("class", `${className}-ramp`)
     .attr("font-family", "system-ui, sans-serif")
     .attr("font-size", 10)

diff --git a/src/legends/swatches.js b/src/legends/swatches.js
@@ -19,6 +19,8 @@ export function legendSwatches(color, {opacity, ...options} = {}) {
   return legendItems(color, options, (selection, scale, width, height) =>
     selection
       .append("svg")
+      .attr("xmlns", "http://www.w3.org/2000/svg")
+      .attr("xmlns:xlink", "http://www.w3.org/1999/xlink")
       .attr("width", width)
       .attr("height", height)
       .attr("fill", scale.scale)
@@ -53,6 +55,8 @@ export function legendSymbols(
   return legendItems(symbol, options, (selection, scale, width, height) =>
     selection
       .append("svg")
+      .attr("xmlns", "http://www.w3.org/2000/svg")
+      .attr("xmlns:xlink", "http://www.w3.org/1999/xlink")
       .attr("viewBox", "-8 -8 16 16")
       .attr("width", width)
       .attr("height", height)

diff --git a/test/output/athletesSortNationality.html b/test/output/athletesSortNationality.html
@@ -24,25 +24,25 @@
         align-items: center;
         margin-right: 1em;
       }
-    </style><span class="plot-swatch"><svg width="15" height="15" fill="#4269d0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    </style><span class="plot-swatch"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15" height="15" fill="#4269d0">
         <rect width="100%" height="100%"></rect>
-      </svg>ESP</span><span class="plot-swatch"><svg width="15" height="15" fill="#efb118" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      </svg>ESP</span><span class="plot-swatch"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15" height="15" fill="#efb118">
         <rect width="100%" height="100%"></rect>
-      </svg>KOR</span><span class="plot-swatch"><svg width="15" height="15" fill="#ff725c" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      </svg>KOR</span><span class="plot-swatch"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15" height="15" fill="#ff725c">
         <rect width="100%" height="100%"></rect>
-      </svg>CAN</span><span class="plot-swatch"><svg width="15" height="15" fill="#6cc5b0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      </svg>CAN</span><span class="plot-swatch"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15" height="15" fill="#6cc5b0">
         <rect width="100%" height="100%"></rect>
-      </svg>MDA</span><span class="plot-swatch"><svg width="15" height="15" fill="#3ca951" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      </svg>MDA</span><span class="plot-swatch"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15" height="15" fill="#3ca951">
         <rect width="100%" height="100%"></rect>
-      </svg>NZL</span><span class="plot-swatch"><svg width="15" height="15" fill="#ff8ab7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      </svg>NZL</span><span class="plot-swatch"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15" height="15" fill="#ff8ab7">
         <rect width="100%" height="100%"></rect>
-      </svg>AUS</span><span class="plot-swatch"><svg width="15" height="15" fill="#a463f2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      </svg>AUS</span><span class="plot-swatch"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15" height="15" fill="#a463f2">
         <rect width="100%" height="100%"></rect>
-      </svg>USA</span><span class="plot-swatch"><svg width="15" height="15" fill="#97bbf5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      </svg>USA</span><span class="plot-swatch"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15" height="15" fill="#97bbf5">
         <rect width="100%" height="100%"></rect>
-      </svg>ETH</span><span class="plot-swatch"><svg width="15" height="15" fill="#9c6b4e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      </svg>ETH</span><span class="plot-swatch"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15" height="15" fill="#9c6b4e">
         <rect width="100%" height="100%"></rect>
-      </svg>BRN</span><span class="plot-swatch"><svg width="15" height="15" fill="#9498a0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      </svg>BRN</span><span class="plot-swatch"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15" height="15" fill="#9498a0">
         <rect width="100%" height="100%"></rect>
       </svg>IOA</span>
   </div><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400">

diff --git a/test/output/athletesSortNullLimit.html b/test/output/athletesSortNullLimit.html
@@ -24,25 +24,25 @@
         align-items: center;
         margin-right: 1em;
       }
-    </style><span class="plot-swatch"><svg width="15" height="15" fill="#4269d0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    </style><span class="plot-swatch"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15" height="15" fill="#4269d0">
         <rect width="100%" height="100%"></rect>
-      </svg>ESP</span><span class="plot-swatch"><svg width="15" height="15" fill="#efb118" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      </svg>ESP</span><span class="plot-swatch"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15" height="15" fill="#efb118">
         <rect width="100%" height="100%"></rect>
-      </svg>KOR</span><span class="plot-swatch"><svg width="15" height="15" fill="#ff725c" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      </svg>KOR</span><span class="plot-swatch"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15" height="15" fill="#ff725c">
         <rect width="100%" height="100%"></rect>
-      </svg>CAN</span><span class="plot-swatch"><svg width="15" height="15" fill="#6cc5b0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      </svg>CAN</span><span class="plot-swatch"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15" height="15" fill="#6cc5b0">
         <rect width="100%" height="100%"></rect>
-      </svg>MDA</span><span class="plot-swatch"><svg width="15" height="15" fill="#3ca951" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      </svg>MDA</span><span class="plot-swatch"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15" height="15" fill="#3ca951">
         <rect width="100%" height="100%"></rect>
-      </svg>NZL</span><span class="plot-swatch"><svg width="15" height="15" fill="#ff8ab7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      </svg>NZL</span><span class="plot-swatch"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15" height="15" fill="#ff8ab7">
         <rect width="100%" height="100%"></rect>
-      </svg>AUS</span><span class="plot-swatch"><svg width="15" height="15" fill="#a463f2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      </svg>AUS</span><span class="plot-swatch"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15" height="15" fill="#a463f2">
         <rect width="100%" height="100%"></rect>
-      </svg>USA</span><span class="plot-swatch"><svg width="15" height="15" fill="#97bbf5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      </svg>USA</span><span class="plot-swatch"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15" height="15" fill="#97bbf5">
         <rect width="100%" height="100%"></rect>
-      </svg>ETH</span><span class="plot-swatch"><svg width="15" height="15" fill="#9c6b4e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      </svg>ETH</span><span class="plot-swatch"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15" height="15" fill="#9c6b4e">
         <rect width="100%" height="100%"></rect>
-      </svg>BRN</span><span class="plot-swatch"><svg width="15" height="15" fill="#9498a0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      </svg>BRN</span><span class="plot-swatch"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15" height="15" fill="#9498a0">
         <rect width="100%" height="100%"></rect>
       </svg>IOA</span>
   </div><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400">

diff --git a/test/output/bigintOrdinal.html b/test/output/bigintOrdinal.html
@@ -1,4 +1,4 @@
-<figure class="plot-d6a7b5-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">
+<figure class="plot-d6a7b5-figure" style="max-width: initial;"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="plot-ramp" font-family="system-ui, sans-serif" font-size="10" width="240" height="50" viewBox="0 0 240 50">
     <style>
       :where(.plot-ramp) {
         display: block;

diff --git a/test/output/binFillFirstEmpty.html b/test/output/binFillFirstEmpty.html
@@ -24,11 +24,11 @@
         align-items: center;
         margin-right: 1em;
       }
-    </style><span class="plot-swatch"><svg width="15" height="15" fill="#4269d0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    </style><span class="plot-swatch"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15" height="15" fill="#4269d0">
         <rect width="100%" height="100%"></rect>
-      </svg>FEMALE</span><span class="plot-swatch"><svg width="15" height="15" fill="#efb118" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      </svg>FEMALE</span><span class="plot-swatch"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15" height="15" fill="#efb118">
         <rect width="100%" height="100%"></rect>
-      </svg>MALE</span><span class="plot-swatch"><svg width="15" height="15" fill="#ff725c" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      </svg>MALE</span><span class="plot-swatch"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15" height="15" fill="#ff725c">
         <rect width="100%" height="100%"></rect>
       </svg>null</span>
   </div><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400">

diff --git a/test/output/caltrain.html b/test/output/caltrain.html
@@ -24,11 +24,11 @@
         align-items: center;
         margin-right: 1em;
       }
-    </style><span class="plot-swatch"><svg width="15" height="15" fill="currentColor" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    </style><span class="plot-swatch"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15" height="15" fill="currentColor">
         <rect width="100%" height="100%"></rect>
-      </svg>N</span><span class="plot-swatch"><svg width="15" height="15" fill="peru" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      </svg>N</span><span class="plot-swatch"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15" height="15" fill="peru">
         <rect width="100%" height="100%"></rect>
-      </svg>L</span><span class="plot-swatch"><svg width="15" height="15" fill="brown" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      </svg>L</span><span class="plot-swatch"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15" height="15" fill="brown">
         <rect width="100%" height="100%"></rect>
       </svg>B</span>
   </div><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="240" height="520" viewBox="0 0 240 520">

diff --git a/test/output/carsHexbin.html b/test/output/carsHexbin.html
@@ -1,4 +1,4 @@
-<figure class="plot-d6a7b5-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">
+<figure class="plot-d6a7b5-figure" style="max-width: initial;"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="plot-ramp" font-family="system-ui, sans-serif" font-size="10" width="240" height="50" viewBox="0 0 240 50">
     <style>
       :where(.plot-ramp) {
         display: block;

diff --git a/test/output/carsJitter.html b/test/output/carsJitter.html
@@ -1,4 +1,4 @@
-<figure class="plot-d6a7b5-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">
+<figure class="plot-d6a7b5-figure" style="max-width: initial;"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="plot-ramp" font-family="system-ui, sans-serif" font-size="10" width="240" height="50" viewBox="0 0 240 50">
     <style>
       :where(.plot-ramp) {
         display: block;

diff --git a/test/output/colorLegendCategorical.html b/test/output/colorLegendCategorical.html
@@ -23,25 +23,25 @@
       align-items: center;
       margin-right: 1em;
     }
-  </style><span class="plot-swatch"><svg width="15" height="15" fill="#4269d0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  </style><span class="plot-swatch"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15" height="15" fill="#4269d0">
       <rect width="100%" height="100%"></rect>
-    </svg>A</span><span class="plot-swatch"><svg width="15" height="15" fill="#efb118" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    </svg>A</span><span class="plot-swatch"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15" height="15" fill="#efb118">
       <rect width="100%" height="100%"></rect>
-    </svg>B</span><span class="plot-swatch"><svg width="15" height="15" fill="#ff725c" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    </svg>B</span><span class="plot-swatch"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15" height="15" fill="#ff725c">
       <rect width="100%" height="100%"></rect>
-    </svg>C</span><span class="plot-swatch"><svg width="15" height="15" fill="#6cc5b0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    </svg>C</span><span class="plot-swatch"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15" height="15" fill="#6cc5b0">
       <rect width="100%" height="100%"></rect>
-    </svg>D</span><span class="plot-swatch"><svg width="15" height="15" fill="#3ca951" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    </svg>D</span><span class="plot-swatch"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15" height="15" fill="#3ca951">
       <rect width="100%" height="100%"></rect>
-    </svg>E</span><span class="plot-swatch"><svg width="15" height="15" fill="#ff8ab7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    </svg>E</span><span class="plot-swatch"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15" height="15" fill="#ff8ab7">
       <rect width="100%" height="100%"></rect>
-    </svg>F</span><span class="plot-swatch"><svg width="15" height="15" fill="#a463f2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    </svg>F</span><span class="plot-swatch"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15" height="15" fill="#a463f2">
       <rect width="100%" height="100%"></rect>
-    </svg>G</span><span class="plot-swatch"><svg width="15" height="15" fill="#97bbf5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    </svg>G</span><span class="plot-swatch"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15" height="15" fill="#97bbf5">
       <rect width="100%" height="100%"></rect>
-    </svg>H</span><span class="plot-swatch"><svg width="15" height="15" fill="#9c6b4e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    </svg>H</span><span class="plot-swatch"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15" height="15" fill="#9c6b4e">
       <rect width="100%" height="100%"></rect>
-    </svg>I</span><span class="plot-swatch"><svg width="15" height="15" fill="#9498a0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    </svg>I</span><span class="plot-swatch"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15" height="15" fill="#9498a0">
       <rect width="100%" height="100%"></rect>
     </svg>J</span>
 </div>