Created
November 23, 2015 23:04
-
-
Save dyorama/58c1b6c8a8a213e2b42d to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment