Skip to content

Instantly share code, notes, and snippets.

@luluwuluying
Last active April 4, 2016 20:23
Show Gist options
  • Save luluwuluying/2d3cd7e8b181fa7bd35610ca997df1d7 to your computer and use it in GitHub Desktop.
Save luluwuluying/2d3cd7e8b181fa7bd35610ca997df1d7 to your computer and use it in GitHub Desktop.
week11 map
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<!DOCTYPE html>
<!-- This map code and design were inspired by the tutorial in Flowing Data: http://flowingdata.com/2015/02/19/make-an-interactive-map-with-category-filters/ -->
<head>
<title>World road accidents numbers in 2012</title>
<link rel="stylesheet" href="road.css" type="text/css" media="screen" />
</head>
<div id="main-wrapper">
<h2>World road accidents number in 2012</h2>
<p>Source: <a href="http://stats.oecd.org/Index.aspx?&datasetcode=ITF_ROAD_ACCIDENTS#">International Transport Forum</a></p>
<div id="metrics">
<div id="Amount">
<div class="metrics" data-metric="Amount" class="selected Amount"></div>
</div>
</div>
<div id="tooltip" class="tooltip">
<h3 class="name"></h3>
<div data-metric="Amount" class="line">
<div class="Amount symbol"></div>Number
<div class="Amount val"></div>
</div>
</div>
<div id="vis"></div>
</div><!-- @end #main-wrapper -->
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.9.0/d3-legend.js"></script>
<script>
var width = 1000,
height = 700,
center = [width / 2, height / 2],
defaultFill = "#e0e0e0";
var colorScale = d3.scale.linear().range(["#87CEFA", "#4169E1"]).interpolate(d3.interpolateLab);
var countryById = d3.map(); // will have id's as keys for countries; see typeAndSet()
var projection = d3.geo.mercator()
.scale(200)
.translate([width / 2, height / 2]);
var path = d3.geo.path()
.projection(projection);
var zoom = d3.behavior.zoom()
.scaleExtent([1, 8])
.on("zoom", move);
var svg = d3.select("#vis").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.call(zoom);
svg.on("wheel.zoom", null);
svg.on("mousewheel.zoom", null);
svg.append("rect")
.attr("class", "overlay")
.attr("width", width)
.attr("height", height);
svg.append("image")
.attr("xlink:href", "progress-anim.gif")
.attr("id", "progress-image")
.attr("width", 43)
.attr("height", 11)
.attr("x", width / 2)
.attr("y", height / 2);
var g = svg.append("g");
var tooltip = d3.select("#tooltip")
.attr("class", "tooltip")
.style("opacity", 0);
var CURR_SELECT = "Amount";
queue()
.defer(d3.json, "countries.json")
.defer(d3.csv, "road.csv", typeAndSet)
.await(ready);
function ready(error, world, accidents) {
console.log(error, world, accidents);
var domAmount = d3.extent(accidents, function(d) {return d.Amount;});
colorScale.domain(domAmount);
g.append("g")
.attr("class", "countries")
.selectAll("path")
.data(topojson.feature(world, world.objects.units).features)
.enter().append("path")
.attr("d", path)
.attr("fill", function(d) {
return colorByCountry(d);
})
.on("mouseover", mouseover)
.on("mouseout", function() {
d3.select(this).classed("selected", false);
tooltip.transition().duration(300)
.style("opacity", 0);
});
make_buttons(); // create the zoom buttons
svg.select("#progress-image").remove(); // remove animation for loading
svg.append("g")
.attr("class", "legendColors")
.attr("transform", "translate(20,400)"); // where we put it on the page!
var legendColors = d3.legend.color()
.shapeWidth(30)
.scale(colorScale); // our existing color scale
svg.select(".legendColors")
.call(legendColors);
} // end function ready
function make_buttons() {
// Zoom buttons actually manually constructed, not images
svg.selectAll(".scalebutton")
.data(['zoom_in', 'zoom_out'])
.enter()
.append("g")
.attr("id", function(d){return d;}) // id is the zoom_in and zoom_out
.attr("class", "scalebutton")
.attr({x: 20, width: 20, height: 20})
.append("rect")
.attr("y", function(d,i) { return 20 + 25*i })
.attr({x: 20, width: 20, height: 20})
// Plus button
svg.select("#zoom_in")
.append("line")
.attr({x1: 25, y1: 30, x2: 35, y2: 30 })
.attr("stroke", "#fff")
.attr("stroke-width", "2px");
svg.select("#zoom_in")
.append("line")
.attr({x1: 30, y1: 25, x2: 30, y2: 35 })
.attr("stroke", "#fff")
.attr("stroke-width", "2px");
// Minus button
svg.select("#zoom_out")
.append("line")
.attr({x1: 25, y1: 55, x2: 35, y2: 55 })
.attr("stroke", "#fff")
.attr("stroke-width", "2px");
svg.selectAll(".scalebutton")
.on("click", function() {
d3.event.preventDefault();
var scale = zoom.scale(),
extent = zoom.scaleExtent(),
translate = zoom.translate(),
x = translate[0], y = translate[1],
factor = (this.id === 'zoom_in') ? 2 : 1/2,
target_scale = scale * factor;
var clamped_target_scale = Math.max(extent[0], Math.min(extent[1], target_scale));
if (clamped_target_scale != target_scale){
target_scale = clamped_target_scale;
factor = target_scale / scale;
}
// Center each vector, stretch, then put back
x = (x - center[0]) * factor + center[0];
y = (y - center[1]) * factor + center[1];
// Transition to the new view over 350ms
d3.transition().duration(350).tween("zoom", function () {
var interpolate_scale = d3.interpolate(scale, target_scale),
interpolate_trans = d3.interpolate(translate, [x,y]);
return function (t) {
zoom.scale(interpolate_scale(t))
.translate(interpolate_trans(t));
svg.call(zoom.event);
};
});
});
}
function mouseover(d){
d3.select(this).classed("selected", true);
d3.select(this).moveToFront();
tooltip.transition().duration(100)
.style("opacity", 1);
tooltip
.style("top", (d3.event.pageY - 10) + "px" )
.style("left", (d3.event.pageX + 10) + "px");
tooltip.selectAll(".symbol").style("opacity", "0");
tooltip.selectAll(".val").style("font-weight", "normal");
tooltip.selectAll(".val").style("color", "darkgray");
tooltip.select(".symbol." + CURR_SELECT).style("opacity", "1");
tooltip.select(".val." + CURR_SELECT).style({
"font-weight": "bolder",
"color": "black"
});
if (countryById.get(d.id) && countryById.get(d.id)[CURR_SELECT]) {
tooltip.select(".name").text(countryById.get(d.id)['Country']);
tooltip.select(".Amount.val").text(d3.round(countryById.get(d.id)["Amount"]));
} else {
tooltip.select(".name").text("No data for " + d.properties.name);
tooltip.select(".Amount.val").text("NA");
}
} // end mouseover
function typeAndSet(d) {
d.Amount = +d.Amount;
countryById.set(d.ISO, d); // this is a d3.map, being given a key, value pair.
return d;
}
function colorByCountry(d) {
var countryObject = countryById.get(d.id);
console.log(d, countryObject);
if (typeof(countryObject) !== "undefined") {
return colorScale(countryObject.Amount);
} else {
return "lightgrey";
}
}
d3.selection.prototype.moveToFront = function() {
return this.each(function(){
this.parentNode.appendChild(this);
});
};
function zoomIn() {
zoom.scale(zoom.scale()*2);
move();
}
function move() {
var t = d3.event.translate,
s = d3.event.scale;
t[0] = Math.min(width * (s - 1), Math.max(width * (1 - s), t[0]));
t[1] = Math.min(height * (s - 1), Math.max(height * (1 - s), t[1]));
zoom.translate(t);
g.style("stroke-width", 1 / s).attr("transform", "translate(" + t + ")scale(" + s + ")");
}
</script>
/* A lot of this CSS is inherited from the Flowing Data tutorial:
http://flowingdata.com/2015/02/19/make-an-interactive-map-with-category-filters/;
*/
body {
margin: 0;
padding: 0;
font-family: Helvetica, sans-serif;
}
#main-wrapper {
width: 1000px;
padding: 5px;
}
#metrics { width: 920px; margin: 0px auto 15px 0; font-family: Helvetica, sans-serif; }
#metrics h3 { font-size: 13px; font-family: Helvetica, sans-serif; text-align: center; margin-bottom: 0; }
#metrics ul { font-size: 12px; font-family: Helvetica, sans-serif; margin-left: 0; padding: 0; }
#metrics ul li {
list-style: none;
margin: 10px 10px 0 0;
padding: 2px 0;
display: inline-block;
width: 108px;
background: #e0e0e0;
cursor: pointer;
text-align: center;
font-size: 11px;
border: 1px solid #e0e0e0;
}
#metrics ul li.bottom { margin-bottom: 0; }
#metrics #income { width: 250px; float: left; border-right: 1px solid #ccc; margin-right: 15px; }
#metrics #location { width: 250px; float: left; padding-left: 5px; }
#metrics .block-button { width: 80px; display: block; float:left; clear:both; }
.tooltip {
position: absolute;
z-index: 10;
text-align: left;
width: 170px;
padding: 10px;
font-size: 10px;
font-family: Helvetica, sans-serif;
background: #ffffff;
pointer-events: none;
opacity: 0;
}
.tooltip h3 {
font-size: 12px; margin: 0 0 7px 0;
line-height: 1.2em;
}
div.tooltip .line { clear: both; margin-top: 3px; font-size: 11px; }
div.tooltip .symbol { float: left; width: 6px; height: 6px; margin: 3px 4px 0 0; }
div.tooltip .val { float: right; width: 25px; text-align: center; margin-right: 4px; background: none; }
.overlay {
fill: none;
pointer-events: all;
}
.button {
fill: #000;
}
.scalebutton {
cursor: pointer;
}
.countries {
stroke: #fff;
stroke-linejoin: round;
}
.countries path.selected {
stroke: #000;
stroke-width: 0.5px;
}
path.Amount, #metrics.slected.Amount ,tooltip.Amount{}
.clr { clear: both; }
.legendColors text {
font-size: .8em;
}
#vis {
padding: 25px;
display: inline-block;
}
ISO Country VARIABLE Variable Year Amount Flag Codes Flags
AZE Azerbaijan T-ACCI-CAS Total number of road casualties [killed+injured] 2012 4165
RUS Russian Federation T-ACCI-KIL Number of fatalities (30 days) 2012 27991
FRA France T-ACCI-INJ Number of injured 2012 75851
SVN Slovenia T-ACCI-CAS Total number of road casualties [killed+injured] 2012 9278
ALB Albania T-ACCI-INJ Number of injured 2012 2235
ITA Italy T-ACCI-KIL Number of fatalities (30 days) 2012 3753
MEX Mexico T-ACCI-CAS Total number of road casualties [killed+injured] 2012 29275
ESP Spain T-ACCI-INJ Number of injured 2012 115890
DEU Germany T-ACCI-CAS Total number of road casualties [killed+injured] 2012 387978
ARM Armenia T-ACCI-KIL Number of fatalities (30 days) 2012 311 E Estimated value
LIE Liechtenstein T-ACCI-INJ Number of injured 2012 108
KOR Korea T-ACCI-INJ Number of injured 2012 344565
NZL New Zealand T-ACCI-KIL Number of fatalities (30 days) 2012 308
AUS Australia T-ACCI-CAS Total number of road casualties [killed+injured] 2012 35391
HRV Croatia T-ACCI-INJ Number of injured 2012 16010
IND India T-ACCI-KIL Number of fatalities (30 days) 2012 138258
PRT Portugal T-ACCI-CAS Total number of road casualties [killed+injured] 2012 38823
CZE Czech Republic T-ACCI-KIL Number of fatalities (30 days) 2012 742
LVA Latvia T-ACCI-CAS Total number of road casualties [killed+injured] 2012 4356
GBR United Kingdom T-ACCI-KIL Number of fatalities (30 days) 2012 1802
ROU Romania T-ACCI-INJ Number of injured 2012 34209
FIN Finland T-ACCI-CAS Total number of road casualties [killed+injured] 2012 7343
ISL Iceland T-ACCI-INJ Number of injured 2012 1035
USA United States T-ACCI-CAS Total number of road casualties [killed+injured] 2012 2396000
MLT Malta T-ACCI-KIL Number of fatalities (30 days) 2012 9
GEO Georgia T-ACCI-KIL Number of fatalities (30 days) 2012 605
CHN China T-ACCI-INJ Number of injured 2012 224327
BGR Bulgaria T-ACCI-KIL Number of fatalities (30 days) 2012 601
JPN Japan T-ACCI-CAS Total number of road casualties [killed+injured] 2012 829807
TUR Turkey T-ACCI-KIL Number of fatalities (30 days) 2012 3750
MKD FYROM T-ACCI-INJ Number of injured 2012 6149
CAN Canada T-ACCI-CAS Total number of road casualties [killed+injured] 2012 168948
SWE Sweden T-ACCI-CAS Total number of road casualties [killed+injured] 2012 23110
EST Estonia T-ACCI-KIL Number of fatalities (30 days) 2012 87
LTU Lithuania T-ACCI-KIL Number of fatalities (30 days) 2012 302
NOR Norway T-ACCI-CAS Total number of road casualties [killed+injured] 2012 8340
CHE Switzerland T-ACCI-INJ Number of injured 2012 22218
HUN Hungary T-ACCI-CAS Total number of road casualties [killed+injured] 2012 19584
SVK Slovak Republic T-ACCI-KIL Number of fatalities (30 days) 2012 352
BEL Belgium T-ACCI-KIL Number of fatalities (30 days) 2012 770
MDA Moldova T-ACCI-INJ Number of injured 2012 3510
MLT Malta T-ACCI-INJ Number of injured 2012 1590
ISL Iceland T-ACCI-CAS Total number of road casualties [killed+injured] 2012 1044
AZE Azerbaijan T-ACCI-KIL Number of fatalities (30 days) 2012 1168
BIH Bosnia-Herzegovina T-ACCI-CAS Total number of road casualties [killed+injured] 2012 9478
LVA Latvia T-ACCI-KIL Number of fatalities (30 days) 2012 177
GEO Georgia T-ACCI-INJ Number of injured 2012 7734
SVN Slovenia T-ACCI-KIL Number of fatalities (30 days) 2012 130
BGR Bulgaria T-ACCI-INJ Number of injured 2012 8193
NLD Netherlands T-ACCI-CAS Total number of road casualties [killed+injured] 2012 2980
MKD FYROM T-ACCI-CAS Total number of road casualties [killed+injured] 2012 6281
EST Estonia T-ACCI-INJ Number of injured 2012 1707
PRT Portugal T-ACCI-KIL Number of fatalities (30 days) 2012 718
CHE Switzerland T-ACCI-CAS Total number of road casualties [killed+injured] 2012 22557
AUT Austria T-ACCI-INJ Number of injured 2012 50895 B Break
LUX Luxembourg T-ACCI-CAS Total number of road casualties [killed+injured] 2012 1412 E Estimated value
FIN Finland T-ACCI-KIL Number of fatalities (30 days) 2012 255
SVK Slovak Republic T-ACCI-INJ Number of injured 2012 6438
DNK Denmark T-ACCI-CAS Total number of road casualties [killed+injured] 2012 3778
USA United States T-ACCI-KIL Number of fatalities (30 days) 2012 33561
ITA Italy T-ACCI-INJ Number of injured 2012 266864
MNE Montenegro, Republic of T-ACCI-KIL Number of fatalities (30 days) 2012 46
ALB Albania T-ACCI-CAS Total number of road casualties [killed+injured] 2012 2569
JPN Japan T-ACCI-KIL Number of fatalities (30 days) 2012 5237
SRB Serbia, Republic of T-ACCI-CAS Total number of road casualties [killed+injured] 2012 19090
ARM Armenia T-ACCI-INJ Number of injured 2012 3739 E Estimated value
LIE Liechtenstein T-ACCI-CAS Total number of road casualties [killed+injured] 2012 109
POL Poland T-ACCI-INJ Number of injured 2012 45792
NZL New Zealand T-ACCI-INJ Number of injured 2012 12122
CAN Canada T-ACCI-KIL Number of fatalities (30 days) 2012 2076
SWE Sweden T-ACCI-KIL Number of fatalities (30 days) 2012 285
HRV Croatia T-ACCI-CAS Total number of road casualties [killed+injured] 2012 16403
GRC Greece T-ACCI-INJ Number of injured 2012 15640
MEX Mexico T-ACCI-KIL Number of fatalities (30 days) 2012 4539
UKR Ukraine T-ACCI-CAS Total number of road casualties [killed+injured] 2012 42650
HUN Hungary T-ACCI-KIL Number of fatalities (30 days) 2012 605
GBR United Kingdom T-ACCI-INJ Number of injured 2012 202931
ROU Romania T-ACCI-CAS Total number of road casualties [killed+injured] 2012 36251
IRL Ireland T-ACCI-CAS Total number of road casualties [killed+injured] 2012 7759
MNE Montenegro, Republic of T-ACCI-INJ Number of injured 2012 1722
BIH Bosnia-Herzegovina T-ACCI-KIL Number of fatalities (30 days) 2012 303
EST Estonia T-ACCI-CAS Total number of road casualties [killed+injured] 2012 1794
IND India T-ACCI-INJ Number of injured 2012 509667
NLD Netherlands T-ACCI-KIL Number of fatalities (30 days) 2012 650
DEU Germany T-ACCI-KIL Number of fatalities (30 days) 2012 3600
TUR Turkey T-ACCI-INJ Number of injured 2012 268079
POL Poland T-ACCI-CAS Total number of road casualties [killed+injured] 2012 49369
MKD FYROM T-ACCI-KIL Number of fatalities (30 days) 2012 132
SWE Sweden T-ACCI-INJ Number of injured 2012 22825
LTU Lithuania T-ACCI-INJ Number of injured 2012 3951
GRC Greece T-ACCI-CAS Total number of road casualties [killed+injured] 2012 16628
AUS Australia T-ACCI-KIL Number of fatalities (30 days) 2012 1300
CHN China T-ACCI-CAS Total number of road casualties [killed+injured] 2012 284324
LUX Luxembourg T-ACCI-KIL Number of fatalities (30 days) 2012 34 E Estimated value
CHE Switzerland T-ACCI-KIL Number of fatalities (30 days) 2012 339
HUN Hungary T-ACCI-INJ Number of injured 2012 18979
GBR United Kingdom T-ACCI-CAS Total number of road casualties [killed+injured] 2012 204733
BEL Belgium T-ACCI-INJ Number of injured 2012 57763
MDA Moldova T-ACCI-CAS Total number of road casualties [killed+injured] 2012 3952
AZE Azerbaijan T-ACCI-INJ Number of injured 2012 2997
MLT Malta T-ACCI-CAS Total number of road casualties [killed+injured] 2012 1599
DNK Denmark T-ACCI-KIL Number of fatalities (30 days) 2012 167
RUS Russian Federation T-ACCI-INJ Number of injured 2012 258618
ALB Albania T-ACCI-KIL Number of fatalities (30 days) 2012 334
FRA France T-ACCI-CAS Total number of road casualties [killed+injured] 2012 79504
SRB Serbia, Republic of T-ACCI-KIL Number of fatalities (30 days) 2012 684
ESP Spain T-ACCI-CAS Total number of road casualties [killed+injured] 2012 117793
LIE Liechtenstein T-ACCI-KIL Number of fatalities (30 days) 2012 1
KOR Korea T-ACCI-CAS Total number of road casualties [killed+injured] 2012 349957
PRT Portugal T-ACCI-INJ Number of injured 2012 38105
HRV Croatia T-ACCI-KIL Number of fatalities (30 days) 2012 393
UKR Ukraine T-ACCI-KIL Number of fatalities (30 days) 2012 5131
LVA Latvia T-ACCI-INJ Number of injured 2012 4179
CZE Czech Republic T-ACCI-INJ Number of injured 2012 25515
NOR Norway T-ACCI-KIL Number of fatalities (30 days) 2012 145
AUT Austria T-ACCI-CAS Total number of road casualties [killed+injured] 2012 51426 B Break
IRL Ireland T-ACCI-KIL Number of fatalities (30 days) 2012 162
DNK Denmark T-ACCI-INJ Number of injured 2012 3611
RUS Russian Federation T-ACCI-CAS Total number of road casualties [killed+injured] 2012 286609
ISL Iceland T-ACCI-KIL Number of fatalities (30 days) 2012 9
USA United States T-ACCI-INJ Number of injured 2012 2362000
CHN China T-ACCI-KIL Number of fatalities (30 days) 2012 59997
ITA Italy T-ACCI-CAS Total number of road casualties [killed+injured] 2012 270617
SRB Serbia, Republic of T-ACCI-INJ Number of injured 2012 18406
JPN Japan T-ACCI-INJ Number of injured 2012 824570
POL Poland T-ACCI-KIL Number of fatalities (30 days) 2012 3577
ARM Armenia T-ACCI-CAS Total number of road casualties [killed+injured] 2012 4050 E Estimated value
CAN Canada T-ACCI-INJ Number of injured 2012 166872
NZL New Zealand T-ACCI-CAS Total number of road casualties [killed+injured] 2012 12430
UKR Ukraine T-ACCI-INJ Number of injured 2012 37519
GRC Greece T-ACCI-KIL Number of fatalities (30 days) 2012 988
NOR Norway T-ACCI-INJ Number of injured 2012 8195
CZE Czech Republic T-ACCI-CAS Total number of road casualties [killed+injured] 2012 26257
MDA Moldova T-ACCI-KIL Number of fatalities (30 days) 2012 442
IRL Ireland T-ACCI-INJ Number of injured 2012 7597
SVN Slovenia T-ACCI-INJ Number of injured 2012 9148
BIH Bosnia-Herzegovina T-ACCI-INJ Number of injured 2012 9175
MNE Montenegro, Republic of T-ACCI-CAS Total number of road casualties [killed+injured] 2012 1768
FRA France T-ACCI-KIL Number of fatalities (30 days) 2012 3653
IND India T-ACCI-CAS Total number of road casualties [killed+injured] 2012 647925
ESP Spain T-ACCI-KIL Number of fatalities (30 days) 2012 1903
MEX Mexico T-ACCI-INJ Number of injured 2012 24736
BGR Bulgaria T-ACCI-CAS Total number of road casualties [killed+injured] 2012 8794
DEU Germany T-ACCI-INJ Number of injured 2012 384378
TUR Turkey T-ACCI-CAS Total number of road casualties [killed+injured] 2012 271829
KOR Korea T-ACCI-KIL Number of fatalities (30 days) 2012 5392
AUS Australia T-ACCI-INJ Number of injured 2012 34091
LTU Lithuania T-ACCI-CAS Total number of road casualties [killed+injured] 2012 4253
AUT Austria T-ACCI-KIL Number of fatalities (30 days) 2012 531 B Break
GEO Georgia T-ACCI-CAS Total number of road casualties [killed+injured] 2012 8339
ROU Romania T-ACCI-KIL Number of fatalities (30 days) 2012 2042
LUX Luxembourg T-ACCI-INJ Number of injured 2012 1378 E Estimated value
BEL Belgium T-ACCI-CAS Total number of road casualties [killed+injured] 2012 58533
FIN Finland T-ACCI-INJ Number of injured 2012 7088
SVK Slovak Republic T-ACCI-CAS Total number of road casualties [killed+injured] 2012 6790
OECD33 OECD (33) T-ACCI-KIL Number of fatalities (30 days) 2012 81420
EU27 European Union (27) T-ACCI-KIL Number of fatalities (30 days) 2012 28279
http://stats.oecd.org/Index.aspx?&datasetcode=ITF_ROAD_ACCIDENTS#
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment