Built with blockbuilder.org
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
xxxxxxxxxx<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 innerHeight = height -margin.top - margin.bottom; var innerWidth = width - margin.left - margin.right; var g = svg.selectAll('.outerGroup') .data([null]); g = g.enter() .append('g') .attr('class', 'outerGroup') .merge(g) .attr('transform',`translate(${margin.left},${margin.top})`); //var g = svg.append("g") // .attr("transform", `translate(${margin.left},${margin.top})`); var xScale = d3.scaleLinear() .domain([.18,.99]) .range([0,innerWidth]); 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 circs = g.selectAll("circle").data(data); circs.enter().append("circle") .attr("r", 7) .merge(circs) .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);}); var lines = g.selectAll('.lines').data(data); lines = lines.enter() .append('line') .attr('class', 'lines') .merge(lines) .attr('x1',xScale(.18)) .attr('x2', xScale(.92)) .attr('stroke-width',.05) .attr('stroke', 'black') .attr('stroke-dasharray','5,2') .attr('y1', function(d){return(yScale(d.Year));}) .attr('y2', function(d){return(yScale(d.Year));}); var labels = g.selectAll('.rightAxis').data(data); labels = labels.enter() .append('text') .attr('class','rightAxis') //35 .attr('x', function(d){return(xScale(.96));}) .merge(labels) .text(function(d){return(d["Year"] + " rank " + d["Rank"])}) .attr('y', function(d){return(yScale(d["Year"]));}) .attr('font-size',height/55) 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