code: function drawVariableName(legend) {
    // Create a hidden DOM element to use to measure text.
    var measureElement = document.createElement("span");
    measureElement.className = legend.cssClass;
    measureElement.style.opacity = 0;
    measureElement.style.position = "fixed";
  
    document.body.appendChild(measureElement);
  
    var parts = (legend.title || "").split(" ");
    var start = 0;
    var end = parts.length;
    var y = legend.variableNameTop;
  
    while (start < parts.length) {
      var text = parts.slice(start, end).join(" ");
      measureElement.textContent = text;
      var dimensions = measureElement.getBoundingClientRect();
  
      // Add this text if it fits on the line, or if we're down to just one word.
  
      // Ideally, if we have one word and it doesn't fit on the line, we'd wrap
      // mid-word, but that would be a hassle: we'd have to find the portion of the
      // word that fits using a search-by-character much like the one we're already doing for
      // words.  Since this is a pretty unlikely corner case anyway (I hope), let's just
      // stick it all on one line and let the browser clip it on overflow.
  
      if (dimensions.width <= legend.width || start === end - 1) {
        addSvgElement(
          legend,
          "text",
          {
            x: legend.variableNameLeft,
            y: y
          },
          "variable-label",
          text
        );
  
        y += dimensions.height;
        start = end;
        end = parts.length;
      } else {
        --end;
      }
    }
  
    document.body.removeChild(measureElement);
  
    return y;
  }
docs: /*
  The name of the active data variable, drawn above the ramp or gradient.