Skip to content

Instantly share code, notes, and snippets.

@mpmckenna8

mpmckenna8/Accidents.csv

Last active August 29, 2015 14:13
Show Gist options
  • Save mpmckenna8/fbbd31c7da81af4c4176 to your computer and use it in GitHub Desktop.
Save mpmckenna8/fbbd31c7da81af4c4176 to your computer and use it in GitHub Desktop.
Download ZIP
Plane Crash Column Chart
Raw
readme.md

Trying to show the number of deaths and the number of crashes. I'd never done a bar chart with 2 axis so was interested to see how it would go. In the given graphic I really didn't like the gridlines emanating from the left y-axis because they don't match up with the right y-axis. I just left those lines out of it and it would be fairly simple to add some interaction to show some detailed data about the given bar with interaction events.

Inspiration to make this is a question in an intro d3 class on Udacity to improve a visualization with too much cruft. Check out my answer and others at: http://forums.udacity.com/questions/100229172/the-junk-yard#ud507

Please feel free to make it better or give me suggestions on how it could be improved. I was thinking it might be better to just have side by side charts. Other ideas?

Raw
Accidents.csv
Year AccidentsExSab FatalitiesExSab Accidents Fatalities AccidentsPass FatalitiesPass Worldairtrafficdepartures
1946 65 786 65 786 50 738
1947 73 1003 75 1013 47 925
1948 85 1173 87 1222 55 1073
1949 67 1009 69 1042 52 984
1950 59 1056 59 1056 42 997
1951 61 884 61 884 41 819
1952 52 780 53 781 33 708
1953 61 877 61 877 40 812
1954 48 668 50 680 32 588
1955 53 560 56 678 36 604
1956 50 819 50 819 31 756
1957 66 887 66 887 33 733
1958 59 1102 61 1122 38 1011
1959 63 1045 64 1047 42 962
1960 64 1409 66 1456 50 1367
1961 62 1338 63 1416 38 1324
1962 71 1683 74 1814 44 1664
1963 56 1262 57 1264 36 1157
1964 47 1008 50 1071 31 1016
1965 56 1142 59 1246 36 1148
1966 59 1456 61 1492 35 1386
1967 63 1320 64 1386 38 1260
1968 65 1390 65 1390 38 1291
1969 70 1669 72 1676 45 1558
1970 78 1474 80 1557 47 1400 9448300
1971 49 1420 53 1474 35 1403 9504500
1972 71 2370 75 2510 55 2429
1973 67 2027 74 2321 46 2142 9764900
1974 67 1989 72 2163 42 1981 9254900
1975 55 1189 56 1191 36 1124 9244700
1976 64 1620 69 1789 38 1634 9562900
1977 59 1645 61 1747 29 1534 9915900
1978 63 1259 65 1299 35 1202 10183700
1979 74 1771 76 1835 41 1687 10653400
1980 47 1298 49 1398 25 1306 10704900
1981 45 904 47 914 26 829 10270100
1982 37 1175 37 1175 28 1116 10335800
1983 35 860 39 1379 28 1327 10758700
1984 39 676 39 676 21 591 11404000
1985 42 2010 46 2454 29 2331 11897900
1986 46 827 49 964 30 794 12677000
1987 44 1108 50 1337 31 1272 13244800
1988 59 1145 65 1750 39 1635 13880900
1989 65 1551 68 1830 40 1707 14021100
1990 46 701 47 783 28 627 14583900
1991 54 1147 57 1172 31 1043 14360900
1992 58 1543 58 1543 33 1367 14918800
1993 51 1143 55 1280 34 1205 15986200
1994 58 1452 63 1492 32 1342 17218900
1995 57 1205 57 1205 35 1136 18008200
1996 57 1845 58 1970 28 1649 18953600
1997 47 1266 47 1266 31 1209 19546600
1998 46 1242 51 1386 27 1272 19653200
1999 46 696 49 707 26 617 20736600
2000 43 1148 43 1148 27 1116 22008658
2001 35 801 40 1144 25 839 22264220
2002 43 1112 43 1112 21 1015 20817389
2003 33 703 33 703 16 633 21282617
2004 33 454 35 544 15 485 23752616
2005 40 1074 40 1074 24 1014 24228965
2006 33 905 33 905 17 852 24843166
2007 31 773 33 788 17 693 26016011
2008 33 588 33 588 16 523 25498093
2009 31 760 31 760 12 677 26120525
2010 32 943 32 943 19 795 29637587
2011 36 524 36 524 23 472 30564579
2012 23 475 23 475 11 396 30771268
2013 29 265 29 265 15 224 31116727
2014 20 692 21 990 8 924 33000000 (ICAO estimate)
Raw
index.html
<!DOCTYPE html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<script src="http://bl.ocks.org/mpmckenna8/raw/fbbd31c7da81af4c4176/makech.js"></script>
</body>
</html>
Raw
makech.js
// data from https://docs.google.com/spreadsheets/d/1SDp7p1y6m7N5xD5_fpOkYOrJvd68V7iy6etXy2cetb8/edit#gid=0
var margins = {top:30, right:60, bottom:45, left:50};
var height = 400;
var width = 600;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width - margins.right - margins.left], .3);
var xaxis = d3.svg.axis()
.scale(x)
.orient("bottom")
//.tics(10)
// .attr("stoke", "grey");
var y = d3.scale.linear()
.range([height - margins.top - margins.bottom , 0]);
var ydeaths = d3.scale.linear()
.range([height - margins.top - margins.bottom , 0]);
var othyaxis = d3.svg.axis()
.scale(ydeaths)
.orient("right")
.ticks(12);
var yaxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10);
var fatalCol = "#a50f15" //"#993404";
var crashCol = "#fb6a4a"
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.attr("stroke", "black")
.attr("class","charSVG")
.append("g")
.attr("transform", "translate("+ margins.left + "," + margins.left + ")")
// .attr("stroke-width",2);
d3.csv("Accidents.csv", function(err, data){
console.log(data);
var datlen = data.length;
var last10 = data.slice(datlen -11, datlen)
x.domain(last10.map(function(d){
// console.log(d);
return d.Year;
}))
y.domain([0, d3.max(last10, function(d){
return d.Accidents;
})])
var xaxisP = height - margins.bottom - margins.top ;
svg.append("g")
.attr("class", "xaxis")
.attr("stroke", "grey")
.attr("fill", "none")
.attr("transform", "translate("+0+"," + xaxisP+ ")" )
.call(xaxis);
svg.append("g")
.attr("class", "yaxis")
.attr("fill", "none")
// .attr("transform", "translate(" + margins.left +"," +
// margins.top +
// margins.bottom+ ")")
.attr("stroke", crashCol)
.call(yaxis)
.append("text")
.attr("transform", "rotate(-90) translate(-250,-30)")
.attr("class", "yaxLab")
.text("Number of multi-engine plane crashes")
.attr('fill', "black")
;
svg.selectAll(".crashBars")
.data(last10)
.enter()
.append("rect")
.attr("height", function(d){
console.log(y(d.Accidents))
return height- margins.top- margins.bottom - y(d.Accidents);
})
.attr("width", x.rangeBand()/2)
.attr("x", function(d){
return x(d.Year);
//// - (1/2) * x.rangeBand()
})
.attr("y", function(d){
return y(d.Accidents) ;
})
.attr("class", "crashBars")
.attr("fill", crashCol);
ydeaths.domain([0, 1074
//d3.max(last10, function(d){return d.Fatalities })
])
// not understanding why this is returning not the max Fatalities on the last10
console.log( d3.max(last10, function (d){
return d.Fatalities
}))// ydeaths.domain())
var movrightY = width - margins.left- margins.right;
svg.append("g")
.attr("class", "othY")
.call(othyaxis)
.attr("transform", "translate("+ movrightY +"," +"0)")
.attr("fill", "none"//fatalCol
)
.attr("stroke", fatalCol)
.attr("opacity", 1)
.append("text")
.attr("transform", "rotate(-90) translate(-70,60)")
.attr("class", "yweilab")
.text("Deaths")
.attr('fill', "black")
/*
svg.append("g")
.attr("class", "bleep")
.call(othyaxis)
.attr("transform", "translate("+ movrightY +"," +"0)")
.attr("fill", "none"//fatalCol
)
.attr("opacity", )
*/
svg.selectAll(".deathBars")
.data(last10)
.enter()
.append("rect")
.attr("fill", fatalCol)
.attr("height", function(d){
return height - ydeaths(d.Fatalities) - margins.bottom - margins.top ;
})
.attr("x", function(d){
return x(d.Year) + (1/2) * x.rangeBand();
})
.attr("y", function(d){
return ydeaths(d.Fatalities)
})
.attr("width", x.rangeBand()/2)
.attr("class", "deathBars")
// .attr("transform", "translate("+ width - margins.left +"," +"0)")
var movrightY = width - margins.left- margins.right - 40;
svg.append("text")
.text("Air plane crashes and fatalities of the last decade")
.attr("x", width/7)
.attr("y", -20)
})
console.log("hellow world");
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment