Arrow chart with styles

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

<body>
	<main>
		<div class='gia-chart-wrapper'>
			<p>Northampton County was one of <span class='bold-text'>three counties</span> in Pennsylvania that voted for Donald Trump after voting for Barack Obama in 2012. Most counties in the state trended red at the presidential level in 2016. (2012 <img class='arrow' src="arrow.png"> 2016)</p>
			
			<div class='gia-chart'></div>
		</div>
	</main>

//Margin conventions
		var margin = {top: 50, right: 5, bottom: 15, left: 110};

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

var width = widther - margin.left - margin.right,
		    height = 1200 - 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 y0 = d3.scale.ordinal()
		    .rangeBands([height, 0], 0.2)
		    .domain(["York", "Wyoming", "Westmoreland", "Wayne", "Washington", "Warren", "Venango", "Union", "Tioga", "Susquehanna", "Sullivan", "Somerset", "Snyder", "Schuylkill", "Potter", "Pike", "Philadelphia", "Perry", "Northumberland", "Northampton", "Montour", "Montgomery", "Monroe", "Mifflin", "Mercer", "Mckean", "Lycoming", "Luzerne", "Lehigh", "Lebanon", "Lawrence", "Lancaster", "Lackawanna", "Juniata", "Jefferson", "Indiana", "Huntingdon", "Greene", "Fulton", "Franklin", "Forest", "Fayette", "Erie", "Elk", "Delaware", "Dauphin", "Cumberland", "Crawford", "Columbia", "Clinton", "Clearfield", "Clarion", "Chester", "Centre", "Carbon", "Cameron", "Cambria", "Butler", "Bucks", "Bradford", "Blair", "Berks", "Bedford", "Beaver", "Armstrong", "Allegheny", "Adams",]);

//Defines the y axis styles
		var yAxis = d3.svg.axis()
		  .scale(y0)
		  .tickSize(-width)
		  .tickPadding(8)
		  .ticks(5)
		  .orient("left");

//Defines the y axis styles
		var xAxis = d3.svg.axis()
		  .scale(xScale)
		  .tickSize(height)
		  .tickPadding(8)
		  .tickFormat(Math.abs) 
		  .orient("top");

//Loads the data
		d3.csv("paSwing.csv", ready);

function ready(err, data) {
		  if (err) throw "error loading data";

//Organizes the data
		  data.forEach(function(d) {
		    d.year = +d.year;
		    d.margin = +d.margin;
		  });

var chartData = data.filter(function(d) {
		    return d.state === stateName;
		  });

var dataByCounty = d3.nest()
		      .key(function(d) { return d.county; })
		      .entries(chartData);

var maxmargin = d3.max(data, function(d) { return d.margin; });
		  var minmargin = d3.min(data, function(d) { return d.margin; });

xScale.domain([minmargin, maxmargin]);

var repRectangle = svg.append("rect")
		    .attr("x", width/2)
		    .attr("y", 0)
		    .attr("width", width/2)
		    .attr("height", height)
		    .attr("class", "repRect");

var demRectangle = svg.append("rect")
		    .attr("x", 0)
		    .attr("y", 0)
		    .attr("width", width/2)
		    .attr("height", height)
		    .attr("class", "demRect");

//Appends the y axis
		  var yAxisGroup = svg.append("g")
		    .attr("class", "y axis")
		    .call(yAxis)
		    .selectAll("g")
		    .classed("bolded", function(d) {return d == 'Northampton' || d == 'Erie' || d == 'Luzerne'});

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

//Move axis lables
		  d3.selectAll('.y.axis text')
		    .attr("transform", "translate(-100,0)")

var countyGroup = svg.selectAll(".g-county-group")
		      .data(dataByCounty)
		      .enter()
		      .append("g")
		      .attr("class", function(d) { return "g-county-group " })
		      .attr("transform", function(d) {
		        return "translate(0," + (y0(d.key) + y0.rangeBand()/2) + ")";
		      });

var countyArrows = countyGroup.append("path")
		      .attr("transform", function(d) {
		        if (d.values[1].margin > d.values[0].margin) {
		          return "translate(" + xScale(d.values[1].margin) + "," + -1 + ") rotate(-30)";
		        }

if (d.values[1].margin < d.values[0].margin) {
		          return "translate(" + xScale(d.values[1].margin) + "," + -1 + ") rotate(30)";
		        }

})
		      .attr("d", d3.svg.symbol().type("triangle-up").size(20));

var countyLines = countyGroup.append("line")
		      .attr("x1", function(d) { return xScale(d.values[0].margin); })
		      .attr("x2", function(d) { return xScale(d.values[1].margin); });

//Appends lables
		  var demLabel = svg.append("text")
		    .text("Dem. lead")
		    .attr("class", "partylabel")
		    .attr("x", 0)
		    .attr("y", -30)
		    .attr("transform", "translate(0,0)");

var repLabel = svg.append("text")
		    .text("Rep. lead")
		    .attr("class", "partylabel")
		    .attr("x", width/2)
		    .attr("y", -30)
		    .attr("transform", "translate(0,0)");

//RESPONSIVENESS
		  d3.select(window).on("resize", resized);
		  function resized() {
		    //new margin
		    var newMargin = {top: 50, right: 5, bottom: 15, left: 110};
		    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]);

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

yAxis
		        .tickSize(-newWidth);

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

repRectangle
		     .attr("x", newWidth/2)
		     .attr("width", newWidth/2);

demRectangle
		     .attr("width", newWidth/2);

countyArrows 
		    .attr("transform", function(d) {
		      if (d.values[1].margin > d.values[0].margin) {
		        return "translate(" + xScale(d.values[1].margin) + "," + -1 + ") rotate(-30)";
		      }

if (d.values[1].margin < d.values[0].margin) {
		        return "translate(" + xScale(d.values[1].margin) + "," + -1 + ") rotate(30)";
		      }

});

countyLines 
		      .attr("x1", function(d) { return xScale(d.values[0].margin); })
		      .attr("x2", function(d) { return xScale(d.values[1].margin); });

repLabel 
		      .attr("x", newWidth/2);

};

}
	</script>
</body>
</html>

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