luluwuluying · April 4, 2016 20:23
diff --git a/countries.json b/countries.json
diff --git a/index.html b/index.html
 <!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>
diff --git a/road.css b/road.css
 /* 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;
 }
diff --git a/road.csv b/road.csv
	<!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#