Skip to content

Instantly share code, notes, and snippets.

@nikhiltitus

nikhiltitus/README.md

Last active March 11, 2018 23:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nikhiltitus/2c06fbac409faa6e15c2318d4a246a3a to your computer and use it in GitHub Desktop.
Save nikhiltitus/2c06fbac409faa6e15c2318d4a246a3a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
README.md

590V assignment 3

  1. The data set is the number of car crash dataset by state. The different features ofthe dataset are: State,Population,Vehicle miles traveled (millions),fatal_crashes,Deaths,"Deaths per 100,000 population",Deaths per 100 million vehicle miles traveled. The dataset consists of data for each of the 52 states in USA. It can be used for analyzing the number of crashes in USA per state. The dataset was obtained from http://www.iihs.org/iihs/topics/t/general-statistics/fatalityfacts/state-by-state-overview
  2. I am using Albers equal-area conic projection. It uses two standard parallels and distortion is kept to its minimum.
  3. Since the data is bound to states I am using a choropleth type visualization (https://piazza.com/class/jcqxf871plh65w?cid=111)
  4. Tooltip is displayed while hovering.
  5. Dropdown shows the state in red for the range of fatal crashes.
  6. Pan and zoom in svg are enabled.
Raw
crash.csv
State Population Vehicle miles traveled (millions) fatal_crashes Deaths Deaths per 100,000 population Deaths per 100 million vehicle miles traveled
Alabama 4,863,300 69,553 937 1,038 21.3 1.49
Alaska 741,894 5,030 78 84 11.3 1.67
Arizona 6,931,071 66,859 865 962 13.9 1.44
Arkansas 2,988,248 36,093 488 545 18.2 1.51
California 39,250,017 366,402 3,357 3,623 9.2 0.99
Colorado 5,540,545 52,993 558 608 11.0 1.15
Connecticut 3,576,452 31,987 281 293 8.2 0.92
Delaware 952,065 10,146 116 119 12.5 1.17
District of Columbia 681,170 3,553 26 27 4.0 0.76
Florida 20,612,439 220,083 2,933 3,174 15.4 1.44
Georgia 10,310,371 120,569 1,422 1,554 15.1 1.29
Hawaii 1,428,557 11,610 109 120 8.4 1.03
Idaho 1,683,140 17,677 232 253 15.0 1.43
Illinois 12,801,539 109,208 1,003 1,082 8.5 0.99
Indiana 6,633,053 83,322 768 821 12.4 0.99
Iowa 3,134,693 32,325 356 404 12.9 1.25
Kansas 2,907,289 32,122 381 429 14.8 1.34
Kentucky 4,436,974 49,491 763 834 18.8 1.69
Louisiana 4,681,666 49,468 704 757 16.2 1.53
Maine 1,331,479 14,979 151 161 12.1 1.07
Maryland 6,016,447 58,484 472 505 8.4 0.86
Massachusetts 6,811,779 59,004 359 389 5.7 0.66
Michigan 9,928,300 104,814 980 1,064 10.7 1.02
Minnesota 5,519,952 59,620 357 392 7.1 0.66
Mississippi 2,988,726 42,285 628 690 23.1 1.63
Missouri 6,093,000 75,713 868 945 15.5 1.25
Montana 1,042,520 13,181 171 190 18.2 1.44
Nebraska 1,907,116 20,818 194 218 11.4 1.05
Nevada 2,940,058 27,009 303 328 11.2 1.21
New Hampshire 1,334,795 13,510 130 136 10.2 1.01
New Jersey 8,944,469 76,941 569 601 6.7 0.78
New Mexico 2,081,015 26,348 358 402 19.3 1.53
New York 19,745,289 136,626 965 1,025 5.2 0.75
North Carolina 10,146,788 115,395 1,348 1,450 14.3 1.26
North Dakota 757,952 10,176 102 113 14.9 1.11
Ohio 11,614,373 119,046 1,053 1,132 9.7 0.95
Oklahoma 3,923,561 48,837 624 683 17.4 1.40
Oregon 4,093,465 37,492 446 495 12.1 1.32
Pennsylvania 12,784,227 102,775 1,088 1,188 9.3 1.16
Rhode Island 1,056,426 7,766 48 51 4.8 0.66
South Carolina 4,961,119 54,025 936 1,015 20.5 1.88
South Dakota 865,454 9,636 103 116 13.4 1.20
Tennessee 6,651,194 77,657 966 1,041 15.7 1.34
Texas 27,862,596 263,414 3,407 3,776 13.6 1.43
Utah 3,051,217 30,038 259 281 9.2 0.94
Vermont 624,594 7,325 57 62 9.9 0.85
Virginia 8,411,808 84,602 722 760 9.0 0.90
Washington 7,288,000 61,880 504 537 7.4 0.87
West Virginia 1,831,102 19,620 250 269 14.7 1.37
Wisconsin 5,778,708 63,575 544 607 10.5 0.95
Wyoming 585,501 9,595 100 112 19.1 1.17
Raw
index.html
<html>
<head>
<title>Fatal crashes in USA</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<link rel='stylesheet' href='style.css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<meta charset="utf-8">
</head>
<body>
<div id='vis-container'>
<h1>Fatal crashes in USA in year 2016</h1>
Number of crashes: <div id="crashes-selector"></div>
<svg></svg>
</div>
</body>
<script src="script.js"></script>
</html>
Raw
script.js
var selectData = [{"text":"less than 700","value":700},{"text":"between 700 and 1400","value":1400},{"text":"between 1400 and 2100","value":2100},{"text":"between 2100 and 2800","value":2800},{"text":"greater than 2800","value":4000}]
//Utility function for adding a selector
function addSelector(selector, change, data) {
var yinput = d3.select(selector)
.append('select')
.attr('id', 'xselect').on('change', change)
.selectAll('option')
.data(data)
.enter().append('option')
.attr('value', function (d) { return d.value })
.text(function (d) { return d.text; })
}
//Tool tip for mouse over
var tooltip = d3.select('#vis-container')
.append('div').attr('class', 'tooltip')
.style('opacity', 0)
//Tooltip handler
var tipMouseover = function (d) {
var chtml = ` <b>Name of state</b>: ${d.properties.name}<br/>
<b>Number of crashes</b>: ${d.properties.crashes}<br/>`;
tooltip.html(chtml)
.style("left", (d3.event.pageX + 15) + "px")
.style("top", (d3.event.pageY - 28) + "px")
.transition()
.duration(200)
.style("opacity", .9)
};
// tooltip mouseout event handler
var tipMouseout = function (d) {
tooltip.transition()
.duration(300) // ms
.style("opacity", 0);
};
var width = 960;
var height = 500;
//Added the input selector for selecting range
addSelector('#crashes-selector',onSelectorChange,selectData);
var zoom = d3.zoom()
.scaleExtent([1, 8])
.on("zoom", zoomed);
var svg = d3.select("svg")
// .append("svg")
.attr("width", width)
.attr("height", height);
svg
.call(zoom);
var g = svg.append("g");
//Defining the Albers projection
var albersProjection = d3.geoAlbersUsa()
.scale(900)
// .rotate( [71.057,0] )
// .center( [0, 42.313] )
.translate([width / 2, height / 2]);
var geoPath = d3.geoPath()
.projection(albersProjection);
const row = d => {
d.fatal_crashes=d.fatal_crashes.replace(',','');
d.fatal_crashes = +d.fatal_crashes
return d;
}
var crash_json;
//Reading the crashes csv
d3.csv('crash.csv', row, data => {
crash_json = data;
})
d3.json('states.json', function (json) {
json.features.map(j => {
j.properties.crashes = crash_json.filter(d => d.State === j.properties.name)[0].fatal_crashes;
});
// Generating path.
g.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("fill", d=>{
return generateColor(d,0,700);
})
.attr("stroke", "#333")
.attr("d", geoPath)
.on('mouseover',tipMouseover)
.on('mouseout',tipMouseout);
})
//Zoomed function handler
function zoomed() {
g.style("stroke-width", 1.5 / d3.event.transform.k + "px");
g.attr("transform", d3.event.transform);
}
function generateColor(data,minNoOfCrashes,maxNoOfCrashes){
if (data.properties.crashes > minNoOfCrashes && data.properties.crashes < maxNoOfCrashes){
return "rgb(173, 69, 74)";
}
else{
return "#ccc";
}
}
//Drop down change handler
function onSelectorChange(){
var value = +this.value;
d3.selectAll('path').attr('fill',d=>{
return generateColor(d,value-700,value);
})
}
Display the source blob
Display the rendered blob
Raw
states.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
style.css
path:hover {
fill-opacity: .7;
}
.tooltip {
position: absolute;
font-size: 16px;
width: auto;
height: auto;
pointer-events: none;
background-color: white;
}
#vis-container{
padding: 5px
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment