a5

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

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

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.zoom {
  cursor: move;
  fill: none;
  pointer-events: all;
}

</style>
<svg width="960" height="500"></svg>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.js"></script>
<script>

var tipLinks = d3.tip()
      .attr('class', 'd3-tip')
      .offset([-10,0]);

var tipNodes = d3.tip()
      .attr('class', 'd3-tip d3-tip-nodes')
      .offset([-10, 0]);

var x = d3.scaleTime().range([0, width]),
    // x2 = d3.scaleTime().range([0, width]),
    y = d3.scaleLinear().range([height, 0]);
    // y2 = d3.scaleLinear().range([height, 0]);

var xAxis = d3.axisBottom(x);

var yAxis = d3.axisLeft(y);

var zoom = d3.zoom()
    .scaleExtent([1 / 4, 8])
    .translateExtent([[-width, -Infinity], [2 * width, Infinity]])
    .on("zoom", zoomed);

// function zoomed() {
//   var xz = d3.event.transform.rescaleX(x);
//   xGroup.call(xAxis.scale(xz));
//   areaPath.attr("d", area.x(function(d) { return xz(d.date); }));
// }

// var zoom = d3.zoom()
    // .scaleExtent([1 / 4, 8])
    // .translateExtent([[-width, -Infinity], [2 * width, Infinity]])
    // .on("zoom", zoomed);

var svg = d3.select("svg"),
    margin = {top: 20, right: 80, bottom: 30, left: 50},
    width = svg.attr("width") - margin.left - margin.right,
    height = svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var zoomRect = svg.append("rect")
    .attr("width", width)
    .attr("height", height)
    .attr("fill", "none")
    .attr("pointer-events", "all")
    .call(zoom);

var area = d3.area()
    .curve(d3.curveStepAfter)
    .y0(y(0))
    .y1(function(d) { return y(d.value); });

var focus = svg.append("g")
        .attr("class", "focus")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// var context = svg.append("g")
//     .attr("class", "context")
//     .attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");

var yGroup = g.append("g");

var xGroup = g.append("g")
    .attr("transform", "translate(0," + height + ")");

var areaPath = g.append("path")
    .attr("clip-path", "url(#clip)")
    .attr("fill", "steelblue");

var Line_chart = svg.append("g")
        .attr("class", "focus")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
        .attr("clip-path", "url(#clip)");

//       function zoomed() {
//   if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") return; // ignore zoom-by-brush
//   var t = d3.event.transform;
//   x.domain(t.rescaleX(x).domain());
//   Line_chart.select(".line").attr("d", line);
//   focus.select(".axis--x").call(x);
//   // context.select(".brush").call(brush.move, x.range().map(t.invertX, t));
// }

// var zoom = d3.zoom()
//     .scaleExtent([1, Infinity])
//     .translateExtent([[0, 0], [width, height]])
//     .extent([[0, 0], [width, height]])
//     .on("zoom", zoomed);

var parseTime = d3.timeParse("%Y%m%d");

var x = d3.scaleTime().range([0, width]),
    y = d3.scaleLinear().range([height, 0]),
    z = d3.scaleOrdinal(d3.schemeCategory10);

var line = d3.line()
    .curve(d3.curveBasis)
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.temperature); });

d3.selection.prototype.moveToFront = function() { 
      console.log("hi"); 
      return this.each(function(){
        this.parentNode.appendChild(this);
      });
    };
d3.tsv("ass5data.tsv", type, function(error, data) {
  if (error) throw error;

var cities = data.columns.slice(1).map(function(id) {
    return {
      id: id,
      values: data.map(function(d) {
        return {date: d.date, temperature: d[id]};
      })
    };
  });

x.domain(d3.extent(data, function(d) { return d.date; }));

y.domain([
    d3.min(cities, function(c) { return d3.min(c.values, function(d) { return d.temperature; }); }),
    d3.max(cities, function(c) { return d3.max(c.values, function(d) { return d.temperature; }); })
  ]);

z.domain(cities.map(function(c) { return c.id; }));

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

g.append("g")
      .attr("class", "axis axis--y")
      .call(d3.axisLeft(y))
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", "0.71em")
      .attr("fill", "#000")
      .text("Temperature, ºF");

var city = g.selectAll(".city")
    .data(cities)
    .enter().append("g")
      .attr("class", "city");

city.append("path")
      .attr("class", "line")
      .attr("d", function(d) { return line(d.values); })
      .attr("id", function(d) { console.log(d.id); return d.id.substring(0, 3).toUpperCase();})
      .style("stroke", function(d) { return z(d.id); });

// "San Francisco".substring(0, 3).toUpperCase();

city.append("text")
      .datum(function(d) { return {id: d.id, value: d.values[d.values.length - 1]}; })
      .attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.temperature) + ")"; })
      .attr("x", 3)
      .attr("id",function(d) { console.log(d.id); return d.id.substring(0, 3).toUpperCase();})
      .attr("dy", "0.35em")
      .style("font", "10px sans-serif")
      .on("click", function(data){
          // Determine if current line is visible

console.log("data: " + data.id);
          var active   = data.active ? false : true,
               newOpacity = active ? 0 : 1; 
         
            d3.select("#"+data.id.substring(0, 3).toUpperCase())
            .transition().duration(100)
            .style("opacity", newOpacity);

data.active = active;
        
      })
      .on('mouseover', function(d) {
        tipLinks.show;
        // var sel = d3.select("#"+d.id.substring(0, 3).toUpperCase())
        //   .style("stroke",function(d) {return z(d.id);})
        //   .style("stroke-width", 5);
        //   this.parentNode.parentNode.appendChild(this.parentNode);
        // console.log("bitch");
        console.log("this"+this.id);
        console.log(d.id.substring(0, 3).toUpperCase() + " " + this.id);

d3.selectAll('path')
            // .filter("#"+d.id.substring(0, 3).toUpperCase())
            .transition()
            .duration(1000)
            .style("stroke", function(){
                if(d.id.substring(0, 3).toUpperCase() === this.id){

return z(d.id);
                }else{
                  console.log("come here?");
                  return "lightgrey";
                }
          });

// d3.selectAll("path")
        //     .filter("#"+d.id.substring(0, 3).toUpperCase() === "#"+this.id)
        //     .transition()
        //     .duration(1000)
        //     .style("stroke","lightgrey");

// var sel2 = d3.select("#"+d.id.substring(0, 3).toUpperCase())
        //   .style("stroke", "lightgrey");

// var cityUnderMouse = this;
          // d3.selectAll('')

//    d3.selectAll("path")
      //     .filter(function(d){return this === d.id;})
      //     .style("stroke-width", 2);
      //     var cityUnderMouse = this;
      //     d3.selectAll('d').transition().style('stroke',function () {
      //      if(this !== cityUnderMouse){ console.log("cunt");return "lightgrey"};
    
      // });
          // d3.select(this).moveToFront();
          //       var currentState = this;
          //       d3.select(this).style('fill-opacity', 1);
//                var thoseStates = d3
//                        .selectAll('path')[0]
//                        .filter(function(state) {
//                            return state !== currentState;
//                        });

//                d3.selectAll(thoseStates)
//                        .style({
//                            'fill-opacity':.5
//                        });
//                })
      })
      .on('mouseout', function(d, i) {

// d3.selectAll('path')
        //   .transition()
        //   .duration(1000)
        //   .style("stroke", z(d.id));

// d3.selectAll('path')
        //     // .filter("#"+d.id.substring(0, 3).toUpperCase())
        //     .transition()
        //     .duration(1000)
        //     .style("stroke", function(){
        //         if("#"+d.id.substring(0, 3).toUpperCase()){

//           return z(d.id);
        //         }else{
        //           console.log("come here?");
        //           return "lightgrey";
        //         }
        //     });
            // d3.select(this)
            // .transition()
            // .duration(750)
            // .style("stroke", "lightgrey")
            // .style("stroke-width", 1);
          
            // d3.selectAll('path')
            // .filter(function(d){return d !== this})
            // .transition()
            // .duration(750)
            // .style("stroke", "lightgrey")
      })
      .text(function(d) { return d.id; });

svg.append("rect")
      .attr("class", "zoom")
      .attr("width", width)
      .attr("height", height)
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
      .call(zoom);
});

function zoomed() {
  var xz = d3.event.transform.rescaleX(x);
  xGroup.call(xAxis.scale(xz));
  areaPath.attr("d", area.x(function(d) { return xz(d.date); }));
}

function type(d, _, columns) {
  d.date = parseTime(d.date);
  for (var i = 1, n = columns.length, c; i < n; ++i) d[c = columns[i]] = +d[c];
  return d;
}

</script>

https://d3js.org/d3.v4.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.js