dyorama/communes06.geojson

## 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.
      
    
## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Mercator projection</title>
		<script type="text/javascript" src="../d3.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: 34px
										}

			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 Mediterranean coastline</h1>
	</div>

<div id="tooltip" class="hidden">
<p><span id="NAME">nom</span></p>
</div>

		<script type="text/javascript">


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

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

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


				//Bind data and create one path per GeoJSON feature
				svg.selectAll("path")
				   .data(json.features)
				   .enter()
				   .append("path")
				   .attr("d", path)
				   .attr("fill", "rgba(105, 105, 105, 0.8)")
				   //PAS DE POINT VIRGULE ENTRE CA ET LE MOUSEMOVE
				   .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")
				       .select("#NAME")
						.text(d.properties.nom);


				       // //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");


				     });


		</script>
	</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Mercator projection</title>
	<script type="text/javascript" src="../d3.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: 34px
	}

	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 Mediterranean coastline</h1>
	</div>

	<div id="tooltip" class="hidden">
	<p><span id="NAME">nom</span></p>
	</div>

	<script type="text/javascript">



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

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

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


	//Bind data and create one path per GeoJSON feature
	svg.selectAll("path")
	.data(json.features)
	.enter()
	.append("path")
	.attr("d", path)
	.attr("fill", "rgba(105, 105, 105, 0.8)")
	//PAS DE POINT VIRGULE ENTRE CA ET LE MOUSEMOVE
	.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")
	.select("#NAME")
	.text(d.properties.nom);



	// //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");



	});



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