Skip to content

Instantly share code, notes, and snippets.

@ssmaroju

ssmaroju/index.html

Last active November 1, 2015 09:04
Show Gist options
  • Save ssmaroju/6e77df6549477ad86c7b to your computer and use it in GitHub Desktop.
Save ssmaroju/6e77df6549477ad86c7b to your computer and use it in GitHub Desktop.
Download ZIP
Road Accidents in India - Comparison between 2011 and 2012.
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Module 5 - Exercise</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
body {
background-color: lightgray;
font-family: Helvetica, Arial, sans-serif;
}
h1 {
font-size: 24px;
margin: 0;
margin: 10px 200px 10px 20px;
}
p {
font-size: 12px;
margin: 10px 200px 10px 20px;
}
svg {
background-color: white;
margin: 10px 200px 10px 20px;
}
circle:hover {
fill: #E20177;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
#container {
background-color: white;
font-family: Helvetica, Arial, sans-serif;
width: 800px;
padding: 50px;
margin-left: auto;
margin-right: auto;
box-shadow: 3px 3px 5px 5px #cccccc;
}
</style>
</head>
<body>
<div id="container">
<h1>Comparison of Share of Road Accidents by State in India between 2011 and 2012</h1>
<p>Scatter plot of percentage contribution of road accidents by state is shown in the scatter plot. On the x-axis is
the percentage contributions in 2011 and in Y - Axis is the percentage contribution in 2012. The circles above
the diagonal indicate increase in accidents and the circles below indicate decrease in accidents. These are
color coded in 'Orange' and 'Green' respectively. The size of the circle indicates the number of accidents per
lakh population. Source: <a href="https://data.gov.in/keywords/indian-road-accident-data">data.gov.in</a>, 2015
</p>
<svg id="mySvg"></svg>
<p>Looking at the graph, all but a few States saw increase in contribution of accidents than the previous year. It
is interesting to note that although the contribution to the number of accidents reduced over the previous year
and is much less compared to other state, the number of accidents per lakh population is quite high. Probably,
it has to do with the amount of tourists visiting the state and also the partying that happens in this state.
Since the state is very small compared to other larger states like Maharashtra, Tamilnadu, Madhya Pradesh
etc.</p>
</div>
<script type="text/javascript">
var w = 700;
var h = 600;
var padding = [20, 10, 50, 50]; //Top, right, bottom, left
var xScale = d3.scale.linear()
.range([padding[3], w - padding[1] - padding[3]]);
var yScale = d3.scale.linear()
.range([padding[0], h - padding[2]]);
var rScale = d3.scale.linear()
.range([0, 0.1]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.tickFormat(function (d) {
return d + "%";
});
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.tickFormat(function (d) {
return d + "%";
});
var svg = d3.select("#mySvg")
.attr("width", w)
.attr("height", h);
d3.csv("roadac2012_AnnexureII.csv", function (data) {
xScale.domain([0, 15]);
yScale.domain([15, 0]);
svg.append("line")
.attr("x1", xScale(0))
.attr("y1", yScale(0))
.attr("x2", xScale(15))
.attr("y2", yScale(15))
.attr("stroke-width", 1)
.attr("stroke", "black")
.attr("stroke-dasharray", (4, 4));
var circles = svg.selectAll("circle")
.data(data)
.enter()
.append("circle");
circles.attr("cx", function (d) {
return xScale(d.shareAccidents2011);
})
.attr("cy", function (d) {
return yScale(d.shareAccidents2012);
})
.attr("r", 0.1)
.attr("fill", function (d) {
if (+d.shareAccidents2012 > +d.shareAccidents2011) {
return 'orange';
}
else {
return 'green';
}
})
.attr("opacity", 0.7)
.append("title")
.text(function (d) {
return d.states + "'s share of accidents in 2011 is " + d.shareAccidents2011 + "%, while the share of accidents in 2012 is " + d.shareAccidents2012 + "%.\n The number of accidents per lakh population in 2012 is " + d.accidentsPerLakhPopulation2012 + ".";
});
circles.sort(function (a, b) {
return d3.ascending(+a.shareAccidents2011, +b.shareAccidents2011);
})
.transition()
.delay(function (d, i) {
return i * 20;
})
.duration(1000)
.attr("r", function (d) {
return rScale(d.accidentsPerLakhPopulation2012);
})
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (h - padding[2] + 10) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (padding[3] - 10) + ",0)")
.call(yAxis);
});
svg.append("g")
.append("text")
.attr("transform", "translate(" + (w - 230) + "," + (h - 45) + ")")
.text("% share of road accidents in 2011")
.attr("font-size", 11)
svg.append("g")
.attr("transform", "translate(55," + 190 + ")")
.append("text")
.attr("transform", "rotate(270)")
.text("% share of road accidents in 2012")
.attr("font-size", 11)
</script>
</body>
</html>
Raw
roadac2012_AnnexureII.csv
states accidents2009 accidents2010 accidents2011 accidents2012 shareAccidents2009 shareAccidents2010 shareAccidents2011 shareAccidents2012 accidentsPerLakhPopulation2009 aAccidentsPerLakhPopulation2010 accidentsPerLakhPopulation2011 accidentsPerLakhPopulation2012 accidentspPer10000Vehicles2009 accidentsPer10000Vehicles2010 accidentsPer10000Vehicles2011 accidentsPer10000KmofRoads2009 accidentsPer10000KmOfRoads2010 accidentsPer10000KmOfRoads2011
Andhra Pradesh 43600 44599 44165 42524 8.96 8.93 8.87 8.67 52.42 53.12 52.16 49.74 54.10 49.98 43.34 1877.04 1892.37 1855.67
Arunachal Pradesh 306 293 263 251 0.06 0.06 0.05 0.05 25.25 23.88 19.02 20.00 138.46 132.57 18.20 150.12 138.71 122.02
Assam 4869 5828 6569 6535 1.00 1.17 1.32 1.33 16.33 19.30 21.08 21.12 39.43 42.12 41.52 205.46 243.45 271.68
Bihar 10065 11033 10673 10320 2.07 2.21 2.14 2.10 10.59 11.45 10.28 10.42 51.36 46.81 39.93 809.32 861.72 816.97
Chhattisgarh 12888 13664 14108 13511 2.65 2.73 2.83 2.76 54.61 57.10 55.24 54.96 60.99 56.10 51.00 1468.99 1493.71 1501.42
Goa 4165 4572 4560 4312 0.86 0.92 0.92 0.88 251.66 266.74 312.82 237.31 61.80 62.88 57.72 4087.42 4414.95 4291.21
Gujarat 31034 30114 30205 27949 6.38 6.03 6.07 5.70 54.03 51.71 50.02 46.74 28.22 25.36 23.25 2021.48 1935.18 1933.89
Haryana 11915 11195 11128 10065 2.45 2.24 2.24 2.05 48.44 44.74 43.89 38.93 26.93 23.36 20.70 3306.81 3003.25 2666.70
Himachal Pradesh 3051 3069 3099 2899 0.63 0.61 0.62 0.59 45.80 45.62 45.20 42.28 61.71 57.01 49.85 686.13 656.69 646.12
Jammu and Kashmir 5945 6134 6655 6709 1.22 1.23 1.34 1.37 52.09 53.03 53.03 56.54 89.06 83.01 71.79 2418.52 2380.26 2466.68
Jharkhand 4996 5521 5451 5711 1.03 1.11 1.10 1.16 16.32 17.79 16.54 17.90 24.51 19.95 17.51 2405.19 2475.52 2280.51
Karnataka 45190 46250 44731 44448 9.29 9.26 8.99 9.06 77.67 78.65 73.17 74.05 65.00 51.14 45.04 1643.91 1650.93 1587.51
Kerala 35433 35082 35216 36174 7.28 7.02 7.08 7.38 104.02 102.23 105.48 103.94 72.91 64.99 58.00 3048.45 2920.75 2601.25
Madhya Pradesh 47267 50023 49406 51210 9.72 10.01 9.93 10.44 67.62 70.41 68.05 69.82 78.64 75.90 67.17 2542.63 2633.96 2504.20
Maharashtra 71996 71289 68438 66316 14.80 14.27 13.75 13.52 65.72 64.16 60.90 58.08 49.82 45.21 39.26 1802.53 1753.03 1667.10
Manipur 578 602 692 771 0.12 0.12 0.14 0.16 24.15 24.87 25.42 31.11 39.21 30.96 33.51 326.11 323.59 361.67
Meghalaya 398 474 599 483 0.08 0.09 0.12 0.10 15.55 18.29 20.21 18.22 28.05 29.98 34.09 361.20 405.07 499.83
Mizoram 86 125 97 110 0.02 0.03 0.02 0.02 8.77 12.59 8.89 10.83 12.31 15.54 10.47 111.08 143.23 98.88
Nagaland 63 35 39 42 0.01 0.01 0.01 0.01 2.87 1.57 1.97 1.85 2.63 1.38 1.43 19.33 10.47 11.42
Odisha 8887 9413 9398 9285 1.83 1.88 1.89 1.89 22.20 23.31 22.40 22.59 34.08 32.11 28.15 387.85 403.31 363.27
Punjab 5570 5507 6513 6341 1.15 1.10 1.31 1.29 20.59 20.12 23.51 22.66 11.53 10.44 12.35 714.91 672.41 773.58
Rajasthan 25114 24302 23245 22969 5.16 4.86 4.67 4.68 38.25 36.41 33.87 33.34 38.70 33.91 29.11 1154.44 1088.31 963.25
Sikkim 564 186 406 158 0.12 0.04 0.08 0.03 94.31 30.74 66.81 25.53 197.54 55.31 104.69 1343.06 420.83 876.78
Tamil Nadu 60794 64996 65873 67757 12.50 13.01 13.24 13.82 91.33 96.99 91.31 99.85 47.16 46.22 42.12 3233.10 3419.85 3424.84
Tripura 865 901 834 888 0.18 0.18 0.17 0.18 24.49 25.21 22.72 24.28 60.14 56.27 44.44 263.98 270.26 301.92
Uttarakhand 1401 1493 1508 1472 0.29 0.30 0.30 0.30 14.51 15.23 14.91 14.60 17.79 17.96 15.12 316.02 318.77 306.03
Uttar Pradesh 28155 28362 29285 29972 5.79 5.68 5.88 6.11 14.53 14.38 14.67 14.67 26.12 23.66 22.04 855.56 753.96 750.60
West Bengal 11134 14888 14945 12290 2.29 2.98 3.00 2.51 12.68 16.79 16.36 13.61 36.58 54.19 45.83 383.71 510.20 499.48
Andaman and Nicobar Islands 271 285 234 236 0.06 0.06 0.05 0.05 58.28 59.38 61.59 46.55 45.37 46.14 33.86 2089.42 2188.40 2123.36
Chandigarh 424 456 437 419 0.09 0.09 0.09 0.09 32.69 33.33 41.43 27.79 5.67 4.80 4.34 1887.69 2013.72 1912.90
Dadra and Nagar Haveli 79 96 103 85 0.02 0.02 0.02 0.02 24.84 28.49 30.04 22.97 12.47 13.95 13.49 1042.46 1219.80 1274.36
Daman and Diu 63 48 50 50 0.01 0.01 0.01 0.01 25.40 18.53 20.58 17.79 9.03 6.64 6.44 2750.21 2098.16 2108.32
Delhi 7516 7260 7281 6937 1.55 1.45 1.46 1.41 43.10 40.48 43.46 36.54 11.93 10.76 10.07 2540.13 2450.43 2455.80
Lakshadweep 4 4 0 3 0.00 0.00 0.00 0.00 5.33 5.33 0.00 3.90 5.53 5.09 0.00 227.66 219.30 0.00
Puducherry 1698 1529 1480 1181 0.35 0.31 0.30 0.24 134.02 114.88 118.93 81.39 31.55 25.52 22.00 6260.60 5607.66 5401.29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment