multiple-line by jeremycflin

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
    .line{
      stroke:#ccc;
      stroke-width:.8;
      fill:none;
    }

    .LA{
      stroke:#FF0076;
      stroke-width:2;
    }


    .recession{
      fill:#FF0076;
      opacity:.1;
    }

    .ygrid .tick{
      stroke:#666666;
      stroke-width:1.5px;
      stroke-dasharray:2, 2;
      shape-rendering: crispEdges;
    }

    .ygrid .tick text{
      stroke:#7e7e7e;
      stroke-dasharray:none;
      stroke-width:0px;
      font-size: 11px;
      font-family: 'Roboto', airal, sans-serif;
      fill:#7e7e7e;
    }

    .axis text{
      font-size: 11px;
      font-family: 'Roboto', airal, sans-serif;
      fill:#7e7e7e;
    }

    .xgrid .tick text{
      font: 11px sans-serif;
      fill:#7e7e7e;
    }

    path { 
        stroke: #;
        stroke-width: ;
        fill: none;
    }

    .x .tick text{
      opacity: 0;
    }

    .y .tick text{
      opacity: 0;
    }

    .ports{
      font: 13px arial;
      stroke-width:0px;
    }



  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see!
    
function drawMultiLine(){

  var container = d3.select('body');

  var margin = {top:10, right: 80, bottom: 30, left: 30},
  width = 300 - margin.left - margin.right,
  height = 550 - margin.top - margin.bottom;

  var parseYear = d3.time.format("%Y").parse;

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

  var xAxis = d3.svg.axis().scale(x)
      .orient("bottom")
      .ticks(2)

  var yAxis = d3.svg.axis().scale(y)
      .orient("right").ticks(4)

  var valueline = d3.svg.line()
    .interpolate("step-before")
    .x(function(d) { return x(d.Year); })
    .y(function(d) { return y(d.Value); });

  var g = container
    .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 + ")");

  function make_x_axis() { return d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .ticks(5)
  }
  function make_y_axis() { return d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(10)
  }

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

  d3.csv("container_data.csv", function(error,data){
    if (error) throw error; 

    data.forEach(function(d) {
      d.Year = parseYear(d.Year);
      d.Value = +d.Value;
    });

    x.domain(d3.extent(data, function(d) { return d.Year; }));
    y.domain([0, d3.max(data, function(d) { return d.Value; })]); 

    g.append("g")
      .attr("class", "xgrid")
      .attr("transform", "translate(0," + height + ")")
      .call(make_x_axis()
          .tickSize(-height, 0, 0)
          
      )
    g.append("g")
      .attr("class", "ygrid")
      .call(make_y_axis()
          .tickSize(-width, 0, 0)
          .ticks(5)
          .tickFormat(d3.format("s"))
      )

    g.append("g")         // Add the X Axis
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

    g.append("g")         // Add the Y Axis
      .attr("class", "y axis")
      .call(yAxis)
      .append("text")
      .attr("y", 80)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Tons");


     // Nest the entries by port name
    var dataNest = d3.nest()
        .key(function(d){return d["U.S. Custom Ports"]})
        .entries(data);
    
    g.append("rect")
          .attr("x", 110)
          .attr("y", 0)
          .attr("width", "5%")
          .attr("height", height)
          .attr("class","recession")

    dataNest
      .filter(function(d){return d.key!=="Los Angeles, CA" || d.key!=="Long Beach, CA"})
      .forEach(function(d) {
        g.append("path")
          .attr("class", "line")
          .attr("d", valueline(d.values))
          // .attr("id",function(d){
          //   var key = data["U.S. Custom Ports"].replace(/, /,'');
          //   return console.log(key);
          // })
    });

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

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

    var flatData = [];

    dataNest.forEach(function(d){
      flatData = flatData.concat(d.values);
    });
      
    voronoiGroup.selectAll("path")
      .data(voronoi(flatData))
      .enter().append("path")

      .attr("d", function(d) { if (d) return "M" + d.join("L") + "Z";})
      .datum(function(d) { if (d) return d.point;})
       .on("mouseover", function(d){
            var key = d["U.S. Custom Ports"].replace(/, /,'');
            console.log(key)
            d3.select('#' + key)
              .style("stroke", "green");
          })
          .on("mouseout", function(d){
            var key = d["U.S. Custom Ports"].replace(/, /,'');
            d3.select('#' + key)
              .style("stroke", "steelblue");
          })



  

    dataNest
      .filter(function(d){return d.key=="Long Beach, CA" || d.key=="Los Angeles, CA"})
      .forEach(function(d) {
        g.append("path")
          .attr("class", "LA line")
          .attr("d", valueline(d.values))

        g.append("circle")
          .attr("r",3.5)
          .style("fill","#FF0076")
          .attr("cx",x(d.values[17].Year))
          .attr("cy",y(d.values[17].Value))


        var name = d.key.split(",")

         g.append("text")
          .attr("x",x(d.values[17].Year))
          .attr("y",y(d.values[17].Value + 600000))
          .text(name[0])
          .attr("class","ports LAports")


      });  

  })
}
    
    drawMultiLine()
  </script>
</body>