Skip to content

Instantly share code, notes, and snippets.

@jadiehm

jadiehm/arrow.png

Last active January 31, 2017 21:13
Show Gist options
  • Save jadiehm/9b4fe461333368fcbbcc1c5cdff7f0ba to your computer and use it in GitHub Desktop.
Save jadiehm/9b4fe461333368fcbbcc1c5cdff7f0ba to your computer and use it in GitHub Desktop.
Download ZIP
Arrow chart with styles
Raw
index.html
<!doctype html>
<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>
Raw
paSwing.csv
margin county year state
21.12 York 2012 PA
12.98 Wyoming 2012 PA
23.71 Westmoreland 2012 PA
20.82 Wayne 2012 PA
13.6 Washington 2012 PA
17.33 Warren 2012 PA
26.37 Venango 2012 PA
23.28 Union 2012 PA
35.13 Tioga 2012 PA
21.34 Susquehanna 2012 PA
28.13 Sullivan 2012 PA
42.69 Somerset 2012 PA
35.8 Snyder 2012 PA
13.39 Schuylkill 2012 PA
46.04 Potter 2012 PA
11.07 Pike 2012 PA
-71.31 Philadelphia 2012 PA
38.87 Perry 2012 PA
19.83 Northumberland 2012 PA
-4.67 Northampton 2012 PA
20.41 Montour 2012 PA
-14.55 Montgomery 2012 PA
-13.28 Monroe 2012 PA
46.83 Mifflin 2012 PA
3.32 Mercer 2012 PA
28.12 Mckean 2012 PA
33.12 Lycoming 2012 PA
-4.81 Luzerne 2012 PA
-7.94 Lehigh 2012 PA
28.38 Lebanon 2012 PA
9.06 Lawrence 2012 PA
18.88 Lancaster 2012 PA
-27.26 Lackawanna 2012 PA
44.97 Juniata 2012 PA
45.53 Jefferson 2012 PA
18.62 Indiana 2012 PA
37.14 Huntingdon 2012 PA
17.81 Greene 2012 PA
56.39 Fulton 2012 PA
38.47 Franklin 2012 PA
21.07 Forest 2012 PA
8.32 Fayette 2012 PA
-15.99 Erie 2012 PA
15.98 Elk 2012 PA
-21.34 Delaware 2012 PA
-5.59 Dauphin 2012 PA
18.44 Cumberland 2012 PA
19.76 Crawford 2012 PA
12.88 Columbia 2012 PA
11.82 Clinton 2012 PA
28.72 Clearfield 2012 PA
35.66 Clarion 2012 PA
0.2 Chester 2012 PA
-0.26 Centre 2012 PA
7.52 Carbon 2012 PA
29.88 Cameron 2012 PA
18.04 Cambria 2012 PA
34.89 Butler 2012 PA
-1.22 Bucks 2012 PA
24.7 Bradford 2012 PA
33.41 Blair 2012 PA
1.01 Berks 2012 PA
54.91 Bedford 2012 PA
6.57 Beaver 2012 PA
36.48 Armstrong 2012 PA
-14.55 Allegheny 2012 PA
27.4 Adams 2012 PA
29.3 York 2016 PA
38.6 Wyoming 2016 PA
31.4 Westmoreland 2016 PA
39.7 Wayne 2016 PA
25.3 Washington 2016 PA
40.9 Warren 2016 PA
42.3 Venango 2016 PA
25.6 Union 2016 PA
53.6 Tioga 2016 PA
42.8 Susquehanna 2016 PA
49.3 Sullivan 2016 PA
55.9 Somerset 2016 PA
47.3 Snyder 2016 PA
43.3 Schuylkill 2016 PA
63.6 Potter 2016 PA
26 Pike 2016 PA
-66.9 Philadelphia 2016 PA
51.9 Perry 2016 PA
43.5 Northumberland 2016 PA
3.8 Northampton 2016 PA
28.4 Montour 2016 PA
-21.1 Montgomery 2016 PA
-0.3 Monroe 2016 PA
57.5 Mifflin 2016 PA
25 Mercer 2016 PA
47.3 Mckean 2016 PA
44.8 Lycoming 2016 PA
19.6 Luzerne 2016 PA
-0.6 Lehigh 2016 PA
35.6 Lebanon 2016 PA
28 Lawrence 2016 PA
19.6 Lancaster 2016 PA
-3.4 Lackawanna 2016 PA
61.8 Juniata 2016 PA
59.8 Jefferson 2016 PA
35.7 Indiana 2016 PA
50.7 Huntingdon 2016 PA
41.7 Greene 2016 PA
70.8 Fulton 2016 PA
46.5 Franklin 2016 PA
44 Forest 2016 PA
31 Fayette 2016 PA
2 Erie 2016 PA
43.7 Elk 2016 PA
-22 Delaware 2016 PA
-0.6 Dauphin 2016 PA
18.6 Cumberland 2016 PA
39.4 Crawford 2016 PA
32.8 Columbia 2016 PA
34.9 Clinton 2016 PA
49.5 Clearfield 2016 PA
47.5 Clarion 2016 PA
-9.3 Chester 2016 PA
-1.9 Centre 2016 PA
34.2 Carbon 2016 PA
50.7 Cameron 2016 PA
37.7 Cambria 2016 PA
37.5 Butler 2016 PA
-0.6 Bucks 2016 PA
46 Bradford 2016 PA
46.3 Blair 2016 PA
10.2 Berks 2016 PA
67.4 Bedford 2016 PA
20.1 Beaver 2016 PA
52 Armstrong 2016 PA
-16.4 Allegheny 2016 PA
22 Adams 2016 PA
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment