Natural disaters in Alpes-Maritimes

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Mercator projection</title>
		<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
		<style type="text/css">

#container {
				width: 700px;
				margin-left: auto;
				margin-right: auto;
				margin-top: 90px;
				padding-top: 20px;
				padding-left: 20px;
				padding-right: 20px;
				padding-bottom: 10px;
				background-color: white;
				box-shadow: 2px 2px 3px 3px #fcfcfc;
				border-width:1px;
				font-family: Helvetica
 							}

path:hover{
           fill: rgb(205, 205, 205);
   }

path {  stroke:#fff  ;
           stroke-width: .9px;
     
   }

h1 {
				font-family: helvetica;
				font-size: 28px
										}

p {
				font-family: helvetica;
				font-size: 16px
										}

svg {
				background-color: rgba(30, 127, 203, 0.1);
										}

#tooltip {
				z-index: 1;
				position: absolute;
				width: auto;
				height: auto;
				padding: 6px;
				background-color: white;
				opacity: 1;
				-webkit-border-radius: 10px;
				-moz-border-radius: 10px;
				border-radius: 10px;
				-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
				-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
				box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
				pointer-events: none;
			}
			
	#tooltip.hidden {
		display: none;
		}

#tooltip p {
		margin: 0;
		font-family: 'Helvetica', sans-serif;
		font-size: 1em;
		line-height: 1;
		}

</style>

</head>
	<body>

<div id="container">
<h1>Alpes-Maritimes top 15 cities per natural disaster</h1>
<p>Number of natural disasters between 1982 and october 2015</p>
	</div>

// Define the div for the tooltip
				var div = d3.select("body").append("div")	
    			.attr("ID", "tooltip");

//Year of CO2 data to map
			var year = "2015";

//Width and height
			var w = 700;
			var h = 500;

//Define map projection
			var projection = d3.geo.mercator()
								   //.center([5 ,15])//([43.666672 ,7.15])
								   .center([ 7.514, 43.52 ])
								   .translate([ w/0.99, h/1 ])
								   .scale([ w*96 ]);

//Define path generator
			var path = d3.geo.path()
							 .projection(projection);

//Define quantize scale to sort data values into buckets of color
			//Colors by Cynthia Brewer (colorbrewer2.org), YlOrRd
			var color = d3.scale.quantize()
								.range([ "#fb6a4a", "#de2d26", "#a50f15" ]);

//Create SVG
			var svg = d3.select("#container")
						.append("svg")
						.attr("width", w)
						.attr("height", h);

//Load in CO2 data
			d3.csv("20villes.csv", function(data) {

//Set input domain for color scale
				color.domain([
					d3.min(data, function(d) { return +d[year]; }), 
					d3.max(data, function(d) { return +d[year]; })
				]);

//Load in GeoJSON data
			d3.json("communes06.geojson", function(json) {

//Merge the CO2 data and GeoJSON into a single array
					//
					//Loop through once for each CO2 data value
					for (var i = 0; i < data.length; i++) {
				
						//Grab country name
						var datanom = data[i].nom;
						
						//Grab data value, and convert from string to float
						var dataValue = +data[i][year];
				
						//Find the corresponding country inside the GeoJSON
						for (var j = 0; j < json.features.length; j++) {
						
							//We'll check the official ISO country code
							var jsonnom = json.features[j].properties.nom;
				
							if (datanom == jsonnom) {
						
								//Copy the data value into the GeoJSON
								json.features[j].properties.catastrophes = dataValue;
								
								//Stop looking through the JSON
								break;
								
							}
						}		
					}

//Bind data and create one path per GeoJSON feature
					svg.selectAll("path")
					   .data(json.features)
					   .enter()
					   .append("path")
					   .attr("d", path)
					   .style("fill", function(d) {

//Get data value
							var value = d.properties.catastrophes;

if (value) {
								//If value exists…
								return color(value);
							} else {
								//If value is undefined…
								return "#ccc";
							}
	
				     });

//Load in cities data
					d3.csv("datavilles.csv", function(data) {
						
						//Create a circle for each city
						svg.selectAll("circle")
						   .data(data)
						   .enter()
						   .append("circle")
						   .attr("cx", function(d) {
							   return projection([d.longitude, d.latitude])[0];
						   })
						   .attr("cy", function(d) {
							   return projection([d.longitude, d.latitude])[1];
						   })
						   .attr("r", function(d) {
						   	   //Use Math.sqrt to scale by area (not radius)
							   return Math.sqrt(+d.catastrophes / w * 20000);
						   })
						   .style("fill", "White")
						   .style("opacity", 0.45)

.on("mousemove", function(d) {
					    var xPosition = parseFloat(d3.select(this).attr("cx"));
						var yPosition = parseFloat(d3.select(this).attr("cy"));
					var currentState = this;
	                d3.select(this).style('fill-opacity', 1);
				 
				       //Update the tooltip position and value
				       d3.select("#tooltip")
				        .style("left", (d3.event.pageX+20) + "px")			 
						.style("top", (d3.event.pageY ) + "px")
						.html("<b>" + d.nom + "</b>" + "<br/>"  + d.catastrophes + " arrêtés");

// //Show the tooltip
				       d3.select("#tooltip").classed("hidden", false);
				       })

.on("mouseout", function() {
				       	 d3.selectAll('path')
                            .style({
                                'fill-opacity':10});
				       //Hide the tooltip
				       d3.select("#tooltip").classed("hidden", true);
					   });
						
					});

svg.append("text")
						.attr ("x", w / 1.3)
						.attr ("y", h / 1.2)
						.style("font-size", "15px")
						.style("font-family", "Helvetica")
						.style("font-weight", "none")
						.style("font-style", "italic")
						.text("Mediterranean sea");

});  //End d3.json()

});  //End d3.csv()

</script>
	</body>
</html>

https://d3js.org/d3.v3.min.js