dyorama/20villes.csv

## 20villes.csv

          
            nom
            2015
            departement

            
              Nice
              63
              Nice (06)

            
              Cagnes-sur-Mer
              48
              Cagnes-sur-Mer (06)

            
              Antibes
              46
              Antibes (06)

            
              Cannes
              40
              Cannes (06)

            
              Èze
              38
              Èze (06)

            
              Villeneuve-Loubet
              38
              Villeneuve-Loubet (06)

            
              Contes
              36
              Contes (06)

            
              Falicon
              36
              Falicon (06)

            
              Saint-Laurent-du-Var
              32
              Saint-Laurent-du-Var (06)

            
              Grasse
              31
              Grasse (06)

            
              Mandelieu-la-Napoule
              28
              Mandelieu-la-Napoule (06)

            
              Menton
              28
              Menton (06)

            
              Mougins
              28
              Mougins (06)

            
              Vallauris
              27
              Vallauris (06)

            
              Peillon
              25
              Peillon (06)

## communes06.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              communes06.geojson
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## datavilles.csv

          
            nom
            catastrophes
            latitude
            longitude

            
              Nice
              63
              43.71499
              7.25

            
              Cagnes-sur-Mer
              48
              43.666667
              7.15

            
              Antibes
              46
              43.593333
              7.101667

            
              Cannes
              40
              43.556
              7.016667

            
              Èze
              38
              43.726667
              7.366667

            
              Villeneuve-Loubet
              38
              43.65
              7.116667

            
              Contes
              36
              43.815268
              7.31775

            
              Falicon
              36
              43.755
              7.263333

            
              Saint-Laurent-du-Var
              32
              43.666667
              7.183333

            
              Grasse
              31
              43.646667
              6.936667

            
              Mandelieu-la-Napoule
              28
              43.55
              6.933333

            
              Menton
              28
              43.783333
              7.49

            
              Mougins
              28
              43.6
              7.0

            
              Vallauris
              27
              43.575333
              7.06

            
              Peillon
              25
              43.773333
              7.373333

## index.html
<!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>


		<script type="text/javascript">

			// 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>
nom	2015	departement
Nice	63	Nice (06)
Cagnes-sur-Mer	48	Cagnes-sur-Mer (06)
Antibes	46	Antibes (06)
Cannes	40	Cannes (06)
Èze	38	Èze (06)
Villeneuve-Loubet	38	Villeneuve-Loubet (06)
Contes	36	Contes (06)
Falicon	36	Falicon (06)
Saint-Laurent-du-Var	32	Saint-Laurent-du-Var (06)
Grasse	31	Grasse (06)
Mandelieu-la-Napoule	28	Mandelieu-la-Napoule (06)
Menton	28	Menton (06)
Mougins	28	Mougins (06)
Vallauris	27	Vallauris (06)
Peillon	25	Peillon (06)
nom	catastrophes	latitude	longitude
Nice	63	43.71499	7.25
Cagnes-sur-Mer	48	43.666667	7.15
Antibes	46	43.593333	7.101667
Cannes	40	43.556	7.016667
Èze	38	43.726667	7.366667
Villeneuve-Loubet	38	43.65	7.116667
Contes	36	43.815268	7.31775
Falicon	36	43.755	7.263333
Saint-Laurent-du-Var	32	43.666667	7.183333
Grasse	31	43.646667	6.936667
Mandelieu-la-Napoule	28	43.55	6.933333
Menton	28	43.783333	7.49
Mougins	28	43.6	7.0
Vallauris	27	43.575333	7.06
Peillon	25	43.773333	7.373333
	<!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>


	<script type="text/javascript">

	// 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>