Point Tracking for Non-Linear Lines: I

What This Shows

Using data from the US Census, this visualization displays popular names that have historically been androgynous.

Technical

Control points are not intersected by the path for several non-linear interpolations for lines ("basis" in this case). Because of this, point tracking for non-linear lines should be calculated from the svg-path rather than from the d3-scales. Mike Bostock has two examples showing how to do this with a single path. This gist shows one approach for point tracking with multiple paths. Other approaches are shown here and here.

This approach uses a combination of precomputed voronoi tessellations and on-the-fly closestPoint to determine which line and point to highlight. The voronoi tessellations determine the line, which the on-the-fly closestPoint determines the point. Notedly, the voronoi tessellations are computed using the coordinates producted by the linear scale, rather than the non-linear scale ("basis" here). For this visualization, incorrect line selection does not occur as a result of this under-the-hood inaccuracy. YMMV.

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  width: 960px;
  margin: auto;
  position: relative;
}

svg {
  font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.axis--y path {
  display: none;
}

.androgs {
  fill: none;
  stroke: #aaa;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-width: 1.5px;
}

.androg--hover {
  stroke: #000;
}

.focus text {
  text-anchor: middle;
  text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
}

.voronoi path {
  fill: none;
  pointer-events: all;
}

.voronoi--show path {
  stroke: red;
  stroke-opacity: .2;
}

#form {
  position: absolute;
  top: 20px;
  right: 30px;
}

</style>
<label id="form" for="show-voronoi">
  Show Voronoi
  <input type="checkbox" id="show-voronoi" disabled>
</label>
<script src="https://d3js.org/d3.v3.js"></script>
<script>

var years,
    yearFormat = d3.time.format("%Y");

var margin = {top: 20, right: 30, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.time.scale()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

var color = d3.scale.category20();

var voronoi = d3.geom.voronoi()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.value); })
    .clipExtent([[-margin.left, -margin.top], [width + margin.right, height + margin.bottom]]);

var line = d3.svg.line()
    .interpolate("basis")
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.value); });

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.csv("steady_andro.csv", type, function(error, androgs) {
  x.domain(d3.extent(years));
  y.domain([0, d3.max(androgs, function(c) { return d3.max(c.values, function(d) { return d.value; }); })]).nice();

svg.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.svg.axis()
        .scale(x)
        .orient("bottom"));

svg.append("g")
      .attr("class", "axis axis--y")
      .call(d3.svg.axis()
        .scale(y)
        .orient("left")
        .ticks(10, "%"))
    .append("text")
      .attr("x", 4)
      .attr("dy", ".32em")
      .style("font-weight", "bold")
      .text("Percent Female");

svg.append("g")
      .attr("class", "androgs")
    .selectAll("path")
      .data(androgs)
    .enter().append("path")
      .attr("d", function(d) { d.line = this; 
                          return line(d.values);});

var focus = svg.append("g")
      .attr("transform", "translate(-100,-100)")
      .attr("class", "focus");

focus.append("circle")
      .attr("r", 3.5);

focus.append("text")
      .attr("y", -10);

var voronoiGroup = svg.append("g")
      .attr("class", "voronoi");

voronoiGroup.selectAll("path")
      .data(voronoi(d3.nest()
          .key(function(d) { // p = closestPoint(d.androg.line, [x(d.date), y(d.value)]);
                             // return p[0] + "," + p[1];
                            return x(d.date) + "," + y(d.value); })
          .rollup(function(v) { return v[0]; })
          .entries(d3.merge(androgs.map(function(d) { return d.values; })))
          .map(function(d) { return d.values; })))
    .enter().append("path")
      .attr("d", function(d) { return "M" + d.join("L") + "Z"; })
      .datum(function(d) { return d.point; })
      .on("mouseover", mouseover)
      .on("mouseout", mouseout);

d3.select("#show-voronoi")
      .property("disabled", false)
      .on("change", function() { voronoiGroup.classed("voronoi--show", this.checked); });

function mouseover(d) {
    p = closestPoint(d.androg.line, d3.mouse(this));
    d3.select(d.androg.line).classed("androg--hover", true);
    d.androg.line.parentNode.appendChild(d.androg.line);
    focus.attr("transform", "translate(" + p[0] + "," + p[1] + ")");
    focus.select("text").text(d.androg.name + ": " + d.value.slice(0, 4));
  }

function mouseout(d) {
    d3.select(d.androg.line).classed("androg--hover", false);
    focus.attr("transform", "translate(-100,-100)");
  }
});

function closestPoint(pathNode, point) {
  var pathLength = pathNode.getTotalLength(),
      numberOfItems = pathNode.getPathSegAtLength(pathLength),
      precision = (pathLength / numberOfItems) * .5,
      best,
      bestLength,
      bestDistance = Infinity;

// linear scan for coarse approximation
  for (var scan, scanLength = 0, scanDistance; scanLength <= pathLength; scanLength += precision) {
    if ((scanDistance = distance2(scan = pathNode.getPointAtLength(scanLength))) < bestDistance) {
      best = scan, bestLength = scanLength, bestDistance = scanDistance;
    }
  }

// binary search for precise estimate
  precision *= .5;
  while (precision > .5) {
    var before,
        after,
        beforeLength,
        afterLength,
        beforeDistance,
        afterDistance;
    if ((beforeLength = bestLength - precision) >= 0 && (beforeDistance = distance2(before = pathNode.getPointAtLength(beforeLength))) < bestDistance) {
      best = before, bestLength = beforeLength, bestDistance = beforeDistance;
    } else if ((afterLength = bestLength + precision) <= pathLength && (afterDistance = distance2(after = pathNode.getPointAtLength(afterLength))) < bestDistance) {
      best = after, bestLength = afterLength, bestDistance = afterDistance;
    } else {
      precision *= .5;
    }
  }

best = [best.x, best.y];
  best.distance = Math.sqrt(bestDistance);
  return best;

function distance2(p) {
    var dx = p.x - point[0],
        dy = p.y - point[1];
    return dx * dx + dy * dy;
  }
}

</script>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js