Built with blockbuilder.org
This viz depicts the United states decline in Human development index ranking from 1990 to 2015.
I basically built this from scratch. Data Source
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;
font-size : 3em;}
.rightaxis {
fill: #666;
font-family: sans-serif;
font-size: .6em;
}
</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>
https://d3js.org/d3.v4.min.js