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?
<!DOCTYPE html>
<head>
<script src="//d3js.org/d3.v3.min.js"></script>
</head>
<body>
<script src="//bl.ocks.org/mpmckenna8/raw/fbbd31c7da81af4c4176/makech.js"></script>
</body>
</html>
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)
// 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");