For Resize

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).

This viz is now resizable.

forked from RobertDelgado's block: US Human Development Ranking

<!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; 
    }
    
    .xAxis, .yAxis{font-size: 30}
    .xAxisText, .yAxisText{font-size: 30}
    
    .rightAxis {fill: black;
    						
    }
    .title {}
    .outerGroup{}
    .lines{
      		
      		
    }
      /* Make the chart container fill the page using CSS. */
      #chart {
        position: fixed;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
      }
  </style>
</head>

<body>
  <div id="chart"></div>
  
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var rows = d =>{d.Year = +d.Year;
                    d.Country = d.Country;
                    d["HDI Index"] = +d["HDI Index"];
                    d.Rank = +d.Rank;
                   	return(d);};    
    
    
    
    var startYear = 1990;
    var endYear = 2000;
    var chartDiv = document.getElementById("chart");

var render = function(data, country)
    {
      
      
    //var width = chartDiv.clientWidth;
    var height = chartDiv.clientHeight;
    var width = chartDiv.clientHeight*1.75

var svg = d3.select('div')
     						.selectAll("svg")
     						.data([null]);
      svg = svg.enter()
     					.append("svg")
     						.attr("width", width)
      					.attr("height", height)
                .merge(svg);

var margin = { left: 200, right: 20, top: 60, bottom: 90 };

var yScale = d3.scaleLinear()
    			.domain([1990,2015])
    			.range([innerHeight,0])
    			.nice();

var xLabel = "Human Development index (between 0, low, and 1, high)";
    
    //var xAxisG = g.append("g")
    //	.attr("transform", `translate(0,${innerHeight + 8})`)
      var xAxisG = g.selectAll('.xAxis')
      								.data([null])
      		xAxisG = xAxisG.enter()
          								.append('g')
          								.attr('class', 'xAxis')
          								.merge(xAxisG)
          								.attr('transform',`translate(0,${innerHeight + 8})`);
          								
	
      
   var xAxisText = xAxisG.selectAll('.xAxisText').data([null]);
      	xAxisText = xAxisText.enter()
        							.append('text')
        							.attr('class','xAxisText')
        							.text(xLabel)
        							.attr('stroke','black')
        							.attr('fill', 'black')
        							.merge(xAxisText)
        							  .attr('x', width/2.820)
    										.attr('y', height/15)
        								.attr('font-size', width/50);

const xAxis = d3.axisBottom()
    	.scale(xScale)
    	.ticks(5)
    	.tickSize(width/100 + ' em');

//var yAxisG = g.append("g");
     var yAxisG = g.selectAll('.yAxis').data([null])
     yAxisG = yAxisG.enter()
     					.append('g')
     						.attr('class', 'yAxis')
     					.merge(yAxisG);
    	
		var yAxis = d3.axisLeft()
    	.scale(yScale)
    	.tickPadding(2)
    	.ticks(5)
    	.tickSize(width/100 + ' em')
    	//.tickFormat(d3.format('s'))
    ;

var yLabel = "Year";
		var yAxisText = yAxisG.selectAll('.yAxisText')
    											.data([null])
    		yAxisText = yAxisText.enter()
        							.append('text')
        							.text(yLabel)
        							.attr('class', 'yAxisText')
        							.attr('stroke', 'black')
        							.attr('fill', 'black')
        							.merge(yAxisText)
        								.attr('x', yScale(2027))
      									.attr('y', xScale(.1))
      									.attr("transform", `rotate(-90)`)
    										.attr('font-size', width/50)
        								;

var title = svg.selectAll('.title').data([null])
      
      title = title.enter().append("text")
      .attr('class', 'title')
      .merge(title)
      .text("United States Human Index ranking (1990 - 2015) (USA in red)")
      .attr("y",height/17)
      .attr("x",width/10)
      .attr("font-size", height/16)
      .attr("font-family", "Times")
      //.attr("fill", 'black')

circs.exit().remove();
      lines.exit().remove();
      labels.exit().remove();
      xAxisG.exit().remove();
      yAxisG.exit().remove();
      xAxisText.exit().remove();
      yAxisText.exit().remove();
      g.exit().remove();
      svg.exit().remove();

title.exit().remove();
      
      yAxisG.call(yAxis); 		
      xAxisG.call(xAxis);
   
      
    }

var redraw = function(){
		d3.csv("HDI_where_is_country2.csv", rows,function(array){return(render(array, " United States"));})
    }
    
      redraw();
			window.addEventListener("resize", redraw);

</script>
</body>

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