Created
June 5, 2016 00:20
-
-
Save mugshepherd/c953bef1897118f183f65816fdc77231 to your computer and use it in GitHub Desktop.
Madagascar
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> | |
<head> | |
<meta charset="utf-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<title></title> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<script src="http://d3js.org/topojson.v1.min.js"></script> | |
<style> | |
svg { | |
border-style: solid; | |
border-width: 1px; | |
border-color: #ccc; | |
} | |
.admin0_poly{ | |
fill: #ddd; | |
pointer-events: none; | |
} | |
.admin1_boundary{ | |
fill: none; | |
stroke: #fff; | |
stroke-linejoin: round; | |
stroke-width: 1.5px; | |
pointer-events: none; | |
} | |
.admin2_boundary{ | |
fill: none; | |
stroke: #fff; | |
stroke-linejoin: round; | |
stroke-width: 0.5px; | |
pointer-events: none; | |
} | |
.admin2_poly { | |
fill: #d0d0d0; | |
fill-opacity: .5; | |
} | |
.admin2_poly :hover { | |
fill: orange; | |
fill-opacity: .3; | |
-moz-transition: all 0.3s; | |
-o-transition: all 0.3s; | |
-webkit-transition: all 0.3s; | |
transition: all 0.3s; | |
} | |
.admin1_text { | |
fill: #777; | |
fill-opacity: .75; | |
font-size: 20px; | |
font-weight: 300; | |
text-anchor: middle; | |
pointer-events: none; | |
} | |
.city_point { | |
fill: red; | |
pointer-events: none; | |
} | |
.cities_text { | |
font-family: Helvetica; | |
font-weight: 300; | |
font-size: 14px; | |
pointer-events: none; | |
} | |
#tooltip { | |
border: .25px solid; | |
position: absolute; | |
z-index: 2; | |
background: white; | |
height:20px; | |
font-size: 14px; | |
padding: 5px; | |
top: -150px; | |
left: -150px; | |
font-family: "HelveticaNeue-Light", "Helvetica Neur Light", "Helvetica Neur", Helvetica, Arial, "Lucida Grande", sans-serif; | |
} | |
text { | |
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
pointer-events: none; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="map"></div> | |
<div id="tooltip"></div> | |
<script> | |
var height = 900; | |
var width = 600; | |
// (function(){ | |
var projection = d3.geo.mercator(); | |
var path = d3.geo.path().projection(projection); | |
var svg = d3.select("#map") | |
.append("svg") | |
.attr("width", width) | |
.attr("height", height) | |
//geoID is used for the click event | |
var geoID = function(d) { | |
return "c" + d.properties.ID_2; | |
}; | |
var hover = function(d) { | |
// console.log('d', d, 'event', event); | |
var div = document.getElementById('tooltip'); | |
div.style.left = event.pageX + 20 + 'px'; | |
div.style.top = event.pageY + 'px'; | |
div.innerHTML = d.properties.NAME_2; | |
} | |
//d3 call to json source data | |
d3.json('mdg-output.json', function(error, data){ | |
if (error) return console.error(error); | |
//setting radius of city points | |
var radius = d3.scale.linear().domain([0,1000]).range([0,110]); | |
//click event for regions | |
var click = function(d) { | |
svg.selectAll("path") | |
.data(topojson.feature(data, data.objects.mdg_adm2).features) | |
.attr("fill-opacity", .5) | |
d3.select('#' + geoID(d)) | |
.attr("fill-opacity", 1) | |
}; | |
//set up scale and translate | |
var b, s, t; | |
projection.scale(1).translate([0,0]); | |
var b = path.bounds(topojson.feature(data, data.objects.mdg_adm1)); | |
var s = .90 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height); | |
var t = [(width - s * (b[1][0] + b[0][0])) /2, (height - s * (b[1][1] + b[0][1])) /2 ]; | |
projection.scale(s).translate(t); | |
//polygons, points and text | |
svg.append("g") | |
.attr("class", "admin2_poly") | |
.selectAll("path") | |
.data(topojson.feature(data, data.objects.mdg_adm2).features) | |
.enter().append("path") | |
.attr("d", path) | |
.attr("id", geoID) | |
.on("mouseover", hover) | |
.on("click", click) | |
svg.append("g") | |
.attr("class", "admin1_boundary") | |
.append("path") | |
.datum(topojson.mesh(data, data.objects.mdg_adm1, function(a,b) { return a !== b; })) | |
.attr("d", path); | |
svg.append("g") | |
.attr("class", "admin2_boundary") | |
.append("path") | |
.datum(topojson.mesh(data, data.objects.mdg_adm2, function(a,b) { return a !== b; })) | |
.attr("d", path); | |
svg.append("g") | |
.attr("class", "admin1_text") | |
.selectAll("text") | |
.data(topojson.feature(data, data.objects.mdg_adm1).features) | |
.enter().append("text") | |
.attr("dy", ".35em") | |
.attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; }) | |
.text(function(d) { | |
return d.properties.NAME_1 | |
}); | |
svg.append("g") | |
.attr("class", "city_point") | |
.selectAll("circle") | |
.data(topojson.feature(data, data.objects.mdg_places).features) | |
.enter().append("circle") | |
// .attr("d", path) | |
.attr('cx', function(d) {return projection([d.geometry.coordinates[0], d.geometry.coordinates[1]])[0]}) | |
.attr('cy', function(d) {return projection([d.geometry.coordinates[0], d.geometry.coordinates[1]])[1]}) | |
.attr('r', function(d) { | |
return (radius(+d.properties.natscale)) | |
}) | |
svg.append("g") | |
.attr("class", "city_text") | |
.selectAll("text") | |
.data(topojson.feature(data, data.objects.mdg_places).features) | |
.enter().append("text") | |
.attr("dx", ".4em") | |
.attr("dy", ".35em") | |
.attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; }) | |
.text(function(d) { | |
return d.properties.name | |
}); | |
}); | |
d3.select(self.frameElement).style("height", height + "px"); | |
// })(); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment