xxxxxxxxxx<html lang='en-GB'><head></head><style>p { font-family: sans-serif; font-size: 14px; margin-bottom: 5; float: left;}/*template styles*/.gia-chart-wrapper { max-width: 500px; margin: 0 auto;}/*chart styles*/.g-county-group line { stroke:#333333; stroke-width: 2px;}.g-county-group circle { fill: #333333;}.y.axis line { fill: none; stroke: #ffffff; stroke-dasharray: 1px 1px; shape-rendering: crispEdges; stroke-width: 1px;}.x.axis line { fill: none; stroke: #ffffff; shape-rendering: crispEdges; stroke-width: 1px;}.tick.g-baseline line { stroke: #333333; stroke-dasharray: 0; stroke-width: 1px;} .axis text { font-family: sans-serif; font-size: 12px; pointer-events: none; fill: #bdbdbd;}.y.axis text { text-anchor: start !important; font-size:13px; fill: #767676;}.tick.g-baseline text { display: none;}.tick.bolded text { font-weight: 700; fill: #333333;}.domain { display: none;}.repRect { fill: #dd8f7d; opacity: 0.5;}.demRect { fill: #c0ccdd; opacity: 0.5;}.partylabel { fill: #333333; font-weight: 700; font-size: 16px; font-family: sans-serif;}.yearlabel { fill: #333333; font-weight: 700; font-size: 14px; font-family: sans-serif;}.arrow { width: 60px; display: inline;}.bold-text { font-weight: 700;}</style><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> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script> <script> var stateName = "PA"; //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