Scatter plot with detailed labels

<!doctype html>
<html lang='en-GB'>
<head></head>

<body>

<main>
	
		<div class='gia-chart-wrapper'>
			<p>This graph shows the<span class='disparity-text'>disparity</span> between electoral college results in presidential elections as compared to popular vote. In five<span class='failed-text'>“failed”</span> elections, the winning candidate actually gained fewer votes than their opponent. In many others the winner got less than 50% of the votes but won by plurality. Almost all cases are above the <span class='equality-text'>line of equality</span> where the electoral college exaggerated the margin in favour of the victor.</p>
			
			<div class='gia-chart'>
			</div>

</div>

</main>

var widther = d3.select(".gia-chart").node().clientWidth;

var width = widther - margin.left - margin.right,
		    height = 350 - margin.top - margin.bottom;

//Appends the svg to the chart-container div
		var svg = d3.select(".gia-chart").append("svg")
		  .attr("width", width + margin.left + margin.right)
		  .attr("height", height + margin.top + margin.bottom)
		  .append("g")
		  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

//Creates the xScale 
		var xScale = d3.scale.linear()
		  .range([0,width]);

//Creates the yScale
		var yScale = d3.scale.linear()
		  .range([height, 0])

//Defines the y axis styles
		var yAxis = d3.svg.axis()
		  .scale(yScale)
		  .tickSize(-width)
		  .tickPadding(7)
		  .orient("left");

//Defines the y axis styles
		var xAxis = d3.svg.axis()
		  .scale(xScale)
		  .orient("bottom")
		  .tickPadding(7)
		  //.tickFormat(function(d) {return d + "%"; })
		  .tickSize(height); 		
					
		//Loads the data
		d3.csv("electoral_college.csv", ready);

function ready(err, data) {

//Formats data
			data.forEach(function(d) {
				d.popvote_percent = +d.popvote_percent;
				d.elecvote_percent = +d.elecvote_percent;
			})

data.sort(function(a, b) {
				return d3.descending(+a.perNonWhite, +b.perNonWhite);
			});

//Sets the domains
			xScale.domain([20, 65]);
			yScale.domain([0, 100]);

//Appends the y axis
		  var yAxisGroup = svg.append("g")
		    .attr("class", "y axis")
		    .call(yAxis)
		    .selectAll("g");

//Appends the x axis    
		  var xAxisGroup = svg.append("g")
		    .attr("class", "x axis")
		    .call(xAxis)
		    .selectAll("g")
		    .classed("g-baseline", function(d) { return d == 50 });

//Equality line  
		  var equalLine = svg.append("line")
		    .attr("x1", width/1.1)
		    .attr("x2", width/4.2)
		    .attr("class", "added line")
		    .attr("y1", height/2.6)
		    .attr("y2", height/1.45)
		    .attr("stroke-width", 1)
		    .attr("stroke", "#ffbb00");

//Styles the circles
			var circles = svg.selectAll("circle")
				.data(data)
				.enter()
				.append("circle")
				.attr("cx", function(d){return xScale(d.popvote_percent);})
				.attr("cy", function(d){return yScale(d.elecvote_percent);})
				.attr("r", 5) 
		    .attr("stroke", "white")
		    .attr("stroke-width", 1)
				.attr("opacity", function(d) {
		      if(d.type === "failure") {
		        return "1"
		      }
		      else {
		        return "0.6"
		      }
		     }) 
				.attr("fill", function(d) {
		      if(d.type === "failure") {
		        return "#4bc6df"; 
		      }
		      else {
		        return "#dcdcdc";
		      }
		    });

//Sorts the circles
			circles
				.sort(function(a, b){return d3.ascending(+a.perNonWhite, +b.perDem);})

//Append pres labels  
		  var Adamslabel = svg.append("text")
		    .text("Adams, 1824")
		    .attr("class", "Adamslabel")
		    .attr("x", width/5)
		    .attr("y", height/1.35);

var Trumplabel = svg.append("text")
		    .text("Trump, 2016")
		    .attr("class", "Trumplabel")
		    .attr("x", width/1.75)
		    .attr("y", height/2.1);

var Bushlabel = svg.append("text")
		    .text("Bush, 2000")
		    .attr("class", "Bushlabel")
		    .attr("x", width/1.65)
		    .attr("y", height/1.85);

var Hayeslabel = svg.append("text")
		    .text("Hayes, 1876")
		    .attr("class", "Hayeslabel")
		    .attr("x", width/1.578)
		    .attr("y", height/1.8);

var Harrisonlabel = svg.append("text")
		    .text("Harrison, 1888")
		    .attr("class", "Harrisonlabel")
		    .attr("x", width/1.6)
		    .attr("y", height/2.6);

var Wilsonlabel = svg.append("text")
		    .text("Wilson, 1912")
		    .attr("class", "Wilsonlabel")
		    .attr("x", width/2.125)
		    .attr("y", height/5.5);

var Clintonlabel = svg.append("text")
		    .text("Clinton, 1992")
		    .attr("class", "Clintonlabel")
		    .attr("x", width/1.98)
		    .attr("y", height/3.5);

var Lincolnlabel = svg.append("text")
		    .text("Lincoln, 1860")
		    .attr("class", "Lincolnlabel")
		    .attr("x", width/2.35)
		    .attr("y", height/2.35);

var Reaganlabel = svg.append("text")
		    .text("Reagan, 1984")
		    .attr("class", "Reaganlabel")
		    .attr("x", width/1.175)
		    .attr("y", height/20);

var FDRlabel = svg.append("text")
		    .text("F. Roosevelt, 1932")
		    .attr("class", "FDRlabel")
		    .attr("x", width/1.3)
		    .attr("y", height/7);

//Appends axes lables
		  var popvoteLabel = svg.append("text")
		    .text("Popular vote percentage")
		    .attr("class", "popvotelabel")
		    .attr("x", width/2)
		    .attr("y", height/1)
		    .attr("transform", "translate(0,40)");

var elecvoteLabel = svg.append("text")
		    .text("Electoral college percentage")
		    .attr("class", "elecvotelabel")
		    .attr("x", -40)
		    .attr("y", -38)
		    .attr("transform", "translate(0,100)rotate(270)");

//RESPONSIVENESS
		  d3.select(window).on("resize", resized);
		  			
		  function resized() {

//new margin
		    var newMargin = {top: 10, right: 20, bottom: 100, left: 40};

var newWidther = d3.select(".gia-chart").node().clientWidth;

var newWidth = newWidther - newMargin.left - newMargin.right;

//Change the width of the svg
		    d3.select("svg")
		      .attr("width", newWidth + newMargin.left + newMargin.right);

//Change the xScale
		    xScale
		    	.range([0, newWidth]);

//Update the bars
		    circles
		    	.attr("cx", function(d){return xScale(d.popvote_percent);})

//Updates xAxis
		    d3.selectAll(".x.axis")
		        .call(xAxis);

//Updates ticks
		    xAxis
		      .scale(xScale);

//Updates yAxis
		    d3.selectAll(".y.axis")
		      .call(yAxis);

yAxis
		      .tickSize(-newWidth);

equalLine   
		      .attr("x1", newWidth/1.1)
		      .attr("x2", newWidth/4.2)
		        
		    //Labels  
		    Adamslabel 
		      .attr("x", newWidth/5);

Trumplabel 
		      .attr("x", newWidth/1.75);

Bushlabel 
		      .attr("x", newWidth/1.65);  
		        
		    Hayeslabel 
		      .attr("x", newWidth/1.6);  
		        
		    Harrisonlabel 
		      .attr("x", newWidth/1.6);

Wilsonlabel
		      .attr("x", newWidth/2.125);

Clintonlabel
		        .attr("x", newWidth/1.98);

Lincolnlabel
		      .attr("x",newWidth/2.35);

FDRlabel
		      .attr("x", newWidth/1.3);

Reaganlabel
		      .attr("x", newWidth/1.175);

popvoteLabel 
		      .attr("x", newWidth/2);          
		  	};
		}
	</script>

</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js