D3 Examples - US Human Development Ranking

US Human Development Ranking
This viz depicts the United states decline in Human development index ranking from 1990 to 2015. Also note that the increase in the rest of the world's Human development index.
I basically built this from scratch. Data Source
I also got a little help with my right labels from Jose Pasini (Thanks Jose).
xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    
    .tick {font-size: 2.0em;}
    
    .axislabel {fill : black;
                        font-size : 3em;}
    
    .rightAxis {fill: black;
                            font-size:2em;
    }
  </style>
</head>
​
<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var startYear = 1990;
    var endYear = 2000;
    var svgHeight = 500;
    var svgWidth = 960
    var margin = { left: 100, right: 20, top: 60, bottom: 90 };
    
​
    
    
​
​
    var innerHeight = svgHeight -margin.top - margin.bottom;
    var innerWidth = svgWidth - margin.left - margin.right;
    
    
    var svg = d3.select("body")
    .append("svg")
      .attr("width", svgWidth)
      .attr("height", svgHeight);
    
    var g = svg.append("g")
        .attr("transform", `translate(${margin.left},${margin.top})`);
    
    
    var xScale = d3.scaleLinear()
            .domain([.18,1])
            .range([0,innerWidth]);
​
    
    var yScale = d3.scaleLinear()
                .domain([1990,2015])
                .range([innerHeight,0])
                .nice();
    
    
​
    
    var rows = d =>{d.Year = +d.Year;
                    d.Country = d.Country;
                    d["HDI Index"] = +d["HDI Index"];
                    d.Rank = +d.Rank;
                    return(d);};
    
    var xLabel = "Human Development index (between 0, low, and 1, high)";
    
    var xAxisG = g.append("g")
        .attr("transform", `translate(0,${innerHeight + 8})`)
            
    xAxisG
      .append("text")
      .attr('class','axislabel')
        .attr('x', 400)
        .attr('y', 50)
        .text(xLabel);
    
    const xAxis = d3.axisBottom()
        .scale(xScale)
        .ticks(5);
    
    var yLabel = "Year";
        var yAxisG = g.append("g")
        
        var yAxis = d3.axisLeft()
        .scale(yScale)
        .tickPadding(2)
        .ticks(5);
​
    
​
            
        yAxisG.append("text")
        .attr('class', 'axislabel')
        .text("Year")
      .attr('x', -145)
      .attr('y', -65)
      .attr("transform", `rotate(-90)`);
    
​
    
    var render = function(data, country)
    {
      //data = data.filter(function(d){return(d["HDI Index"] != 0);});
      //data = data.filter(function(d){return(d.Year > 1991)})
      circs = g.selectAll("circle").data(data);
      
      circs.enter().append("circle")
        .attr("r", 7)
        .attr("cx", function(d){return(xScale(d["HDI Index"]));})
        .attr("cy", function(d){return(yScale(d["Year"]));})
        .attr("fill", function(d){if(d.Country == country)
                                                                {return("red");}
                                  return("rgba(0,22,30,.1)");});
      
      
      data = data.filter(function(d){return(d["Country"] == country);});
      lines = g.selectAll('line').data(data).enter()
                    .append('line')
                        .attr('x1',xScale(.18))
                        .attr('y1', function(d){return(yScale(d.Year));})
                        .attr('x2', xScale(.92))
                        .attr('y2', function(d){return(yScale(d.Year));})
                        .attr('stroke', 'black')
                        .attr('stroke-width',.05)
                        .attr('stroke-dasharray','5,2');
 
      
       labels = g.selectAll('rightAxis').data(data).enter()
         .append('text')
                .attr('class','.rightAxis')
            .text(function(d){return(d["Year"] + " rank " + d["Rank"])})
            .attr('x', function(d){return(xScale(.96));})
            .attr('y', function(d){return(yScale(d["Year"]));})
            .attr('font-size',11)
            
      
      yAxisG.call(yAxis);       
      xAxisG.call(xAxis);
​
      circs.exit().remove();
      lines.exit().remove();
      labels.exit().remove();
        
    }
    
        d3.csv("HDI_where_is_country2.csv", rows,function(array){return(render(array, " United States"));})
    
      
            
    var text = svg.append("text")
      .text("United States Human Index ranking (1990 - 2015) (USA in red)")
      .attr("y",40)
      .attr("x", 120)
      .attr("font-size", 30)
      .attr("font-family", "Times")
​
  </script>
</body>
​
    