const, g, url

Author: Fil

src/legend.js

@@ -24,7 +24,7 @@ export class ColorLegend {
       height: canvasHeight
     }
   ) {
-    let { color: {
+    const { color: {
       legend: {
         title,
         tickSize = 6,
@@ -48,7 +48,8 @@ export class ColorLegend {
   }
 }
 
-function legend(svg, {
+// https://observablehq.com/@d3/color-legend
+function legend(g, {
   color,
   title,
   tickSize,
@@ -72,7 +73,7 @@ function legend(svg, {
 
     x = color.copy().rangeRound(quantize(interpolate(marginLeft, width - marginRight), n));
 
-    svg.append("image")
+    g.append("image")
         .attr("x", marginLeft)
         .attr("y", marginTop)
         .attr("width", width - marginLeft - marginRight)
@@ -87,7 +88,7 @@ function legend(svg, {
         .interpolator(interpolateRound(marginLeft, width - marginRight)),
         {range() { return [marginLeft, width - marginRight]; }});
 
-    svg.append("image")
+    g.append("image")
         .attr("x", marginLeft)
         .attr("y", marginTop)
         .attr("width", width - marginLeft - marginRight)
@@ -123,7 +124,7 @@ function legend(svg, {
         .domain([-1, color.range().length - 1])
         .rangeRound([marginLeft, width - marginRight]);
 
-    svg.append("g")
+    g.append("g")
       .selectAll("rect")
       .data(color.range())
       .join("rect")
@@ -143,7 +144,7 @@ function legend(svg, {
         .domain(color.domain())
         .rangeRound([marginLeft, width - marginRight]);
 
-    svg.append("g")
+    g.append("g")
       .selectAll("rect")
       .data(color.domain())
       .join("rect")
@@ -156,7 +157,7 @@ function legend(svg, {
     tickAdjust = () => {};
   }
 
-  svg.append("g")
+  g.append("g")
       .attr("transform", `translate(0,${height - marginBottom})`)
       .call(axisBottom(x)
         .ticks(ticks, typeof tickFormat === "string" ? tickFormat : undefined)
@@ -174,7 +175,7 @@ function legend(svg, {
         .attr("class", "title")
         .text(title));
 
-  return svg.node();
+  return g.node();
 }