Grafica que no me sale bien, la odio

graphEstados.ts

d3.csv("./assets/encuestas-estados.csv", function(error, dataEstados) {
  if (error) throw error; 
 let filtered = dataEstados.filter( e => e.estado === estado)
 
 var div = d3.select("#graphEstados").append("div")
 .attr("class", "tooltip")
 .style("opacity", 0);

 // Set the margins
 var margin = {top: 60, right: 100, bottom: 20, left: 80},
 width = 850 - margin.left - margin.right,
 height = 370 - margin.top - margin.bottom;
 
 // Parse the month variable
 var parseMonth = d3.timeParse("%d/%m/%y");
var formatMonth = d3.timeFormat("%b %d, '%y");
 
 //array colores
 
 var scaleColors = ["#AF2622", "#009933", "#0000cc", "#6600cc", "#ff9900", "#ffcc00"];
 
 //color function pulls from array of colors stored in color.js
 var color = d3.scaleOrdinal().range(scaleColors);
 
 
 // Set the ranges
 var x = d3.scaleTime().range([0, width]);
 var y = d3.scaleLinear().range([height, 0]);
 
 
 // Define the line
 var valueLine = d3.line()
   .x(function(d) { return x(d.fecha); })
   .y(function(d) { return y(+d.votacionEfectiva); })
 
 // Create the svg canvas in the "graph" div
 var svg = d3.select("#graphEstados")
       
       .style("width", width + margin.left + margin.right + "px")
       .style("height", height + margin.top + margin.bottom + "px")
       .attr("width", width + margin.left + margin.right)
       .attr("height", height + margin.top + margin.bottom)
       .append("g")
       .attr("transform","translate(" + margin.left + "," + margin.top + ")")
       .attr("class", "svg")
       .attr("id", "statesGraph");
       
 
 



// Format the data
filtered.forEach(function(d) {
  d.fecha = parseMonth(d.fecha);
  d.votacionEfectiva = +d.votacionEfectiva;
  d.encuestadora = d.encuestadora;
  d.candidato = d.candidato;
});

var nest = d3.nest()
  .key(function(d){
    return d.encuestadora;
  })
  .key(function(d){
    return d.candidato;
  })
  .entries(filtered)

// Scale the range of the data
x.domain(d3.extent(filtered, function(d) { return d.fecha; }));
y.domain([0, d3.max(filtered, function(d){return d.votacionEfectiva})]);

// Set up the x axis
var xaxis = svg.append("g")
     .attr("transform", "translate(0," + height + ")")
     .attr("class", "x axis")
     .call(d3.axisBottom(x));
        //.ticks(d3.time);
        //.tickSize(0, 0)
        //.tickFormat(d3.timeFormat("%d/%B/%y"))
        //.tickSizeInner(0)
        //.tickPadding(10));

        // Add a label to the x axis
svg.append("text")
.attr("transform",
            "translate(" + (width/2) + " ," + 
                           (0) + ")")
      .style("text-anchor", "middle")
      .text(estado);


// Add the Y Axis
 var yaxis = svg.append("g")
     .attr("class", "y axis")
     .call(d3.axisLeft(y));
        //.ticks(5)
        //.tickSizeInner(0)
        //.tickPadding(6)
        //.tickSize(0, 0));

// Add a label to the y axis
svg.append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 0 - 60)
      .attr("x", 0 - (height / 2))
      .attr("dy", "1em")
      .style("text-anchor", "middle")
      .text("Votación Efectiva %")
      .attr("class", "y axis label");

// Create a dropdown
  var menu = d3.select("#dropdownEstados")

  menu
  .append("select")
  .attr("id", "states-drop")
  .selectAll("option")
      .data(nest)
      .enter()
      .append("option")
      .attr("value", function(d){
          return d.key;
      })
      .text(function(d){
          return d.key;
      })
     



 // Function to create the initial graph
 var initialGraph = function(encuestadora){

  // Filter the data to include only fruit of interest
  var selectEncuestadora = nest.filter(function(d){
             return d.key == encuestadora;
           })

   var selectEncuestadoraGroups = svg.selectAll(".encuestadoraGroups")
     .data(selectEncuestadora, function(d){
       return d ? d.key : this.key;
     })
     .enter()
     .append("g")
     .attr("class", "encuestadoraGroups")
     

 var initialPath = selectEncuestadoraGroups.selectAll(".line")
   .data(function(d) { return d.values; })
   .enter()
   .append("path")
   .style("fill","none" )
   .style("stroke",function(d) { return color(d.key); } )
   .style("stroke-width","3px" )

 initialPath
   .attr("d", function(d){
     return valueLine(d.values)
   })
   .attr("class", "line")
   var dots= dataEstados.filter(function(d){
    return d.encuestadora == encuestadora;}); 

  var putDots = selectEncuestadoraGroups.selectAll("circle")
  .data(dots)
  .enter().append("circle")
  .attr("r", 5)           
  .attr("cx", function(d) { return x(d.fecha); })       
  .attr("cy", function(d) { return y(d.votacionEfectiva); })
  .style("fill", function(d,i,j) { return color(d.candidato); })
  .style("stroke", "white")
  .style("stroke-width","1px" )
  
  putDots.on("mouseover", function(d){
    div.transition()
       .duration(200)
       .style("opacity", .9)
      .style("display", "block")
      .style('box-shadow', "0 0 5px #999")
  .style('font-size', "12px")
  .style('padding', "10px")
  .style('text-align', "center")
  .style('width', "190px")
  .style('line-heigth', "140%")
  .style('font-weight', "600")
  .style('color', "#fff")
  .style('background', "#000")
  .style('border-radius', "2px")
  div.html(d.candidato  + "<br>"+formatMonth(d.fecha) + "<br>"+ d.partido + "<br>" + "Votación Efectiva: "  + d.votacionEfectiva + "%")   
      .style("left", (d3.event.pageX) + "px")             
      .style("top", (d3.event.pageY - 28) + "px");

  })

  putDots.on('mouseout', function(d: any) {                              
    div.style('display', 'none');                           // NEW
  });  



}

// Create initial graph
initialGraph("Elegir")


// Update the data
var updateGraph = function(encuestadora){

  // Filter the data to include only fruit of interest
  var selectEncuestadora = nest.filter(function(d){
             return d.key == encuestadora;
           })

  // Select all of the grouped elements and update the data
   var selectEncuestadoraGroups = svg.selectAll(".encuestadoraGroups")
     .data(selectEncuestadora)

     // Select all the lines and transition to new positions
         selectEncuestadoraGroups.selectAll("path.line")
            .data(function(d){
               return (d.values);
             })
             .transition()
               .duration(1000)
               .attr("d", function(d){
                 return valueLine(d.values)
               })

               var dots= dataEstados.filter(function(d){
                return d.encuestadora == encuestadora;}); 

              //select dots and update
            var updateDots =  selectEncuestadoraGroups.selectAll("circle")
              .data(dots)

              updateDots.exit().remove()
              updateDots.enter().append("circle")
              .attr("r", 5)           
              .attr("cx", function(d) { return x(d.fecha); })       
              .attr("cy", function(d) { return y(d.votacionEfectiva); }) 
              .style("fill", function(d) { return color(d.candidato); })
              .style("stroke", "white")
              .style("stroke-width","2px" )
              .on("mouseover", function(d){
                div.transition()
                   .duration(200)
                   .style("opacity", .9)
                  .style("display", "block")
                  .style('box-shadow', "0 0 5px #999")
              .style('font-size', "12px")
              .style('padding', "10px")
              .style('text-align', "center")
              .style('width', "190px")
              .style('line-heigth', "140%")
              .style('font-weight', "600")
              .style('color', "#fff")
              .style('background', "#000")
              .style('border-radius', "2px")
              div.html(d.candidato  + "<br>"+formatMonth(d.fecha) + "<br>"+ d.partido + "<br>" + "Votación Efectiva: "  + d.votacionEfectiva + "%")   
                  .style("left", (d3.event.pageX) + "px")             
                  .style("top", (d3.event.pageY - 28) + "px");
          
              })

              .on('mouseout', function(d: any) {                              
                div.style('display', 'none');                           // NEW
              }); 

               updateDots.transition()
               .duration(1000)         
              .attr("cx", function(d) { return x(d.fecha); })       
              .attr("cy", function(d) { return y(d.votacionEfectiva); })
              .style("fill", function(d) { return color(d.candidato); })
              .style("stroke", "white")
              .style("stroke-width","2px" )
              .on("mouseover", function(d){
                div.transition()
                   .duration(200)
                   .style("opacity", .9)
                  .style("display", "block")
                  .style('box-shadow', "0 0 5px #999")
              .style('font-size', "12px")
              .style('padding', "10px")
              .style('text-align', "center")
              .style('width', "190px")
              .style('line-heigth', "140%")
              .style('font-weight', "600")
              .style('color', "#fff")
              .style('background', "#000")
              .style('border-radius', "2px")
              div.html(d.candidato  + "<br>"+formatMonth(d.fecha) + "<br>"+ d.partido + "<br>" + "Votación Efectiva: "  + d.votacionEfectiva + "%")   
                  .style("left", (d3.event.pageX) + "px")             
                  .style("top", (d3.event.pageY - 28) + "px");
          
              })
              .on('mouseout', function(d: any) {                              
              div.style('display', 'none');                           // NEW
});  
              



}


// Run update function when dropdown selection changes
menu.on('change', function(){

  // Find which fruit was selected from the dropdown
  var selectedEncuestadora = d3.select(this)
         .select("select")
         .property("value")

     // Run update function with the selected fruit
     updateGraph(selectedEncuestadora)

    });

   

});