Skip to content

Instantly share code, notes, and snippets.

@merelyanode

merelyanode/SDcountyAccidents.csv

Last active August 29, 2015 14:19
Show Gist options
  • Save merelyanode/6a331f69c1795dd7f907 to your computer and use it in GitHub Desktop.
Save merelyanode/6a331f69c1795dd7f907 to your computer and use it in GitHub Desktop.
Download ZIP
DVD3 Module 4 Assignment. Revised Bar Graph, styled and axied.
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Accidents With Injuries</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
body {
background-color: #353535;
font-family: Helvetica, Arial, sans-serif;
}
h1 {
font-size: 24px;
margin: 0;
color: DarkGray;
}
p {
font-size: 14px;
margin: 10px 0 0 0;
color: DarkGray;
}
a:link, a:visited {
color: White;
}
svg {
background-color: #353535;
}
rect:hover {
fill: Red;
}
.axis path,
.axis line {
fill: none;
stroke: white;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
fill: YellowGreen;
}
.y.axis path,
.y.axis line {
opacity: 0;
}
</style>
</head>
<body>
<h1>San Diego County Auto Accidents With Injuries In 2011</h1>
<p>Source: <a href="http://www.sandiegocounty.gov/content/dam/sdc/hhsa/programs/phs/CHS/SWITRS%20tables%20FINAL%20REPORT%202011.pdf">San Diego County</a></p>
<script type="text/javascript">
var w = 700;
var h = 800;
var padding = [ 20, 10, 30, 130 ]; //Top, right, bottom, left
var widthScale = d3.scale.linear()
.range([ 0, w - padding[1] - padding[3] ]);
var heightScale = d3.scale.ordinal()
.rangeRoundBands([ padding[1], h - padding[2] ], 0.3);
var xAxis = d3.svg.axis()
.scale(widthScale)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(heightScale)
.orient("left");
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
d3.csv("SDcountyAccidents.csv", function(data) {
data.sort(function(a, b) {
return d3.descending(+a.TOTAL, +b.TOTAL);
});
widthScale.domain([ 0, d3.max(data, function(d) {
return +d.TOTAL;
}) ]);
heightScale.domain(data.map(function(d) { return d.SRA; } ));
var rects = svg.selectAll("rect")
.data(data)
.enter()
.append("rect");
rects.attr("x", padding[3])
.attr("y", function(d) {
return heightScale(d.SRA);
})
.attr("width", function(d) {
return widthScale(d.TOTAL);
})
.attr("height", heightScale.rangeBand())
.attr("fill", "Orange")
.append("title")
.text(function(d) {
return "The total number of injuries in the " + d.SRA + " area was " + d.TOTAL;
});
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + padding[3] + ",0)")
.call(yAxis);
});
</script>
</body>
</html>
Raw
SDcountyAccidents.csv
SRA JAN FEB MAR APR MAY JUN JULY AUG SEP OCT NOV DEC TOTAL
Alpine 2 7 2 5 4 5 5 6 4 5 6 2 53
AnzaBorregoSprings 1 5 3 4 5 2 2 1 3 3 5 3 37
Carlsbad 27 29 28 29 31 28 23 32 31 24 34 32 348
Central San Diego 82 77 69 75 71 84 68 106 83 82 71 89 957
ChulaVista 37 46 45 43 40 47 34 49 47 44 43 53 528
Coastal 28 30 40 24 49 30 49 42 44 38 27 32 433
Coronado 6 5 7 12 5 5 10 15 6 11 7 5 94
DelMarMiraMesa 28 33 37 30 37 36 24 23 35 39 25 39 386
ElCajon 47 50 54 34 54 59 41 45 51 47 47 57 586
Elliott-Navajo 23 19 15 13 24 21 25 13 18 16 28 21 236
Escondido 62 63 74 61 78 66 59 57 64 79 78 67 808
Fallbrook 13 20 21 25 26 24 24 22 14 22 20 17 248
Harbison Crest 3 5 3 3 1 3 7 1 7 2 8 5 48
Jamul 9 7 7 13 10 12 10 8 6 8 12 6 108
Kearny Mesa 66 73 80 63 74 56 79 86 75 77 102 78 909
LaMesa 15 22 15 15 16 20 17 23 26 22 23 27 241
LagunaPineValley 4 5 3 2 2 2 1 3 0 8 5 3 38
Lakeside 19 20 16 14 14 18 13 12 27 21 18 17 209
LemonGrove 10 16 15 11 6 8 11 10 12 9 5 10 123
Mid-City 49 55 49 46 52 53 55 50 50 45 54 65 623
Miramar 13 9 18 8 23 8 13 13 6 12 24 11 158
MountainEmpire 11 14 2 6 4 8 10 7 6 9 11 6 94
NationalCity 15 18 10 15 13 12 20 26 32 25 30 30 246
NorthSanDiego 21 23 26 22 25 24 23 15 23 19 27 17 265
Oceanside 47 50 53 53 66 55 63 48 49 45 39 52 620
PalomarJulian 7 3 11 11 6 11 9 14 13 11 14 4 114
Pauma 4 8 4 8 9 8 13 11 11 15 12 6 109
Pendleton 3 3 8 6 6 3 7 15 9 5 6 6 77
Peninsula 30 25 26 34 34 34 28 34 22 34 29 20 350
Poway 11 20 14 12 21 13 15 13 15 21 19 15 189
Ramona 12 7 9 9 9 10 15 21 14 9 16 17 148
SanDieguito 11 22 27 25 25 25 23 35 31 23 29 32 308
SanMarcos 24 23 26 24 36 24 23 25 26 34 30 20 315
Santee 13 13 12 8 8 9 11 11 13 16 5 18 137
SouthBay 59 68 50 62 45 54 51 81 61 75 82 67 755
SoutheasternSanDiego 32 31 32 32 39 39 29 34 30 32 26 45 401
SpringValley 30 20 18 16 21 10 16 16 20 20 21 19 227
Sweetwater 19 21 22 25 19 23 20 24 13 27 29 21 263
University 18 10 12 16 22 11 17 10 9 15 18 21 179
ValleyCenter 6 12 13 13 14 14 10 15 17 7 13 12 146
Vista 19 20 19 27 21 21 19 21 20 25 27 19 258
Unknown 17 13 13 18 18 10 15 12 17 15 10 12 170
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment