Politican Last Names Line Chart json

This line chart is constructed from a TSV file storing the daily average temperatures of New York, San Francisco and Austin over the last year. The chart employs conventional margins and a number of D3 features:

d3.tsv - load and parse data
d3.time.format - parse dates
d3.time.scale - x-position encoding
d3.scale.linear - y-position encoding
d3.scale.category10, a d3.scale.ordinal - color encoding
d3.extent, d3.min and d3.max - compute domains
d3.keys - compute column names
d3.svg.axis - display axes
d3.svg.line - display line shape

forked from mbostock's block: Multi-Series Line Chart

forked from damayor's block: Politican Last Names Line Chart

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

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

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}
  
.myline {
  fill: none;
  stroke: black;
  stroke-width: 3px;
}
  
  .axis line {
  fill: none;
  stroke: #D4D8DA;
  stroke-width: 2px;
  shape-rendering: crispEdges;
}
  
  
.overlay {
  fill: none;
  pointer-events: all;
}

.focus circle {
  fill: white;
  stroke: black;
  stroke-width: 4px;
}
  
.hover-line {
  stroke: #6F257F;
  stroke-width: 2px;
  stroke-dasharray: 3,3;
}

</style>
<h2> <center> Colombian politics by lastname</center></h2>
<h3> <center>¿Would they be your relatives?</center></h3>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

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 + ")"),
    currentlastname= 'Herrera';

//var parseTime = d3.timeParse("%Y%m%d");
  var parseTime = d3.timeParse("%Y");
  bisectDate = d3.bisector(function(d) { return d.year; }).left;

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

// - Lineas pintadas

politicosPaths(); //Tiene que ir primero
   var mY =
        //mypath("mylastname.json"); 
     //  mypath("https://157.253.208.17:3000/lastnamesByYear?lastname="+currentlastname);
  mypath("https://visualelections.herokuapp.com/lastnamesByYear?lastname="+currentlastname); //Nor workkin yet because connection failure
  //console.log("my recibido "+mY);

// - Funciones
  
function politicosPaths() { 
d3.csv("familiasFuertes.csv", type, function(error, data) {
  if (error) throw error;

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

x.domain(d3.extent(data, function(d) { return d.date; }));
  
  maxY = d3.max(lastnames, function(c) { return d3.max(c.values, function(d) { return d.count; }); });

y.domain([ 0, maxY  ]);
  
  
  
  z.domain(lastnames.map(function(c) { return c.id; }));

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

/*
	//Supr provisional. supose that politics data are  
  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("Cantidad de políticos");
  */

var lastname = g.selectAll(".politicos.lastname")
    .data(lastnames)
    .enter().append("g")
      .attr("class", "lastname");

lastname.append("path")
      .attr("class", "line")
      .attr("d", function(d) { return line(d.values); })
      .style("stroke", function(d) { return z(d.id); });

lastname.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.count) + ")"; })
      .attr("x", 3)
      .attr("dy", "0.35em")
      .style("font", "10px sans-serif")
      .text(function(d) { return d.id; });
  
    lastname.append("text")
      .attr("x", width -281)
    	.attr("y", 150  )
      .attr("dy", "0.34em")
      .style("font", "11px sans-serif")
      .text("First elections after \n\r 1991 constitucional");//TODO print lastname

});
}

maxY = Math.max(d3.max(data, function(d) { return d.value; }) * 1.005, maxY);
              
 	y.domain([0, maxY]); //comentelo y sencillo
       
       
       
  
  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("Cantidad de políticos");

var mypath = g//.selectAll("lastname")
      .append("g")
      .attr("class", "lastname");
      /*.datum(data)
    .enter()*/;
      
   mypath.append("path")
        .datum(data)
        .attr("class", "myline") //myline
        .attr("d", myline);// function(d) { return myline(d.values); });

mypath.append("text")
      .attr("x", width +-780)
      .attr("dy", "0.34em")
      .style("font", "30px serif")
      .text(currentlastname+" last name");//TODO print lastname
       
    
    //Interactivity  
     
    var focus = g.append("g")
        .attr("class", "focus")
        .style("display", "none");

focus.append("myline")
        .attr("class", "x-hover-line hover-line")
        .attr("y1", 0)
        .attr("y2", height);

focus.append("myline")
        .attr("class", "y-hover-line hover-line")
        .attr("x1", width)
        .attr("x2", width);

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

focus.append("text")
        .attr("x", 15)
      .attr("y", -15)
      	.attr("dy", ".31em");

svg.append("rect")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
        .attr("class", "overlay")
        .attr("width", width)
        .attr("height", height)
        .on("mouseover", function() { focus.style("display", null); })
        .on("mouseout", function() { focus.style("display", "none"); })
        .on("mousemove", mousemove);
       
       console.log("maxY0 "+maxY);

function mousemove() {
      var x0 = x.invert(d3.mouse(this)[0]),
          i = bisectDate(data, x0, 1),
          d0 = data[i - 1],
          d1 = data[i],
          d = x0 - d0.year > d1.year - x0 ? d1 : d0;
      focus.attr("transform", "translate(" + x(d.year) + "," + y(d.value) + ")");
      focus.select("text").text(function() { return d.value; });
      focus.select(".x-hover-line").attr("y2", height - y(d.value));
      focus.select(".y-hover-line").attr("x2", width + width);
    }
       
       console.log("maxY1 "+maxY);
       
       //update politicos
       
        y.domain([0, maxY]);
       
       return maxY;
       
     });    
}    
}
  
  y.domain([0, maxY]); //comentelo y sencillo
       
  /*
  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("Cantidad de políticos");*/

</script>

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