|
<!DOCTYPE html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> |
|
<script src='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.js'></script> |
|
<link href='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.css' rel='stylesheet' /> |
|
<style> |
|
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } |
|
#map { |
|
position:absolute; |
|
width: 100%; |
|
height: 100%; |
|
} |
|
</style> |
|
</head> |
|
|
|
<body> |
|
<input type="checkbox" name="drc" onclick= "drcClicked()" > DRC<br> |
|
<input type="checkbox" name="guin" onclick= "guinClicked()" > Guinea<br> |
|
<input type="checkbox" name="lib" onclick= "libClicked()" > Liberia<br> |
|
|
|
<div id="map"></div> |
|
<script> |
|
|
|
|
|
L.mapbox.accessToken = 'pk.eyJ1IjoiZW5qYWxvdCIsImEiOiJjaWhtdmxhNTIwb25zdHBsejk0NGdhODJhIn0.2-F2hS_oTZenAWc0BMf_uw' |
|
|
|
//Setup our Leaflet map using Mapbox.js |
|
var map = L.mapbox.map('map', 'mapbox.satellite', {maxZoom: 20, minZoom: 2}) |
|
.setView([20,-37], 3); |
|
|
|
// Setup our svg layer that we can manipulate with d3 |
|
var svg = d3.select(map.getPanes().overlayPane) |
|
.append("svg"); |
|
var g = svg.append("g").attr("class", "leaflet-zoom-hide") |
|
|
|
function project(ll) { |
|
// our data came from csv, make it Leaflet friendly |
|
//var a = [+ll.lat, +ll.lon]; |
|
var b = [ll[1], ll[0]]; |
|
// convert it to pixel coordinates |
|
var point = map.latLngToLayerPoint(L.latLng(b)) |
|
return point; |
|
} |
|
|
|
d3.json("ebola.json", function(err, data) { |
|
console.log("data:", data); |
|
|
|
function drcClicked(){ |
|
alert("DRC") |
|
var checked = d3.select("body").selectAll("input") |
|
.append("input") |
|
.attr("checked",true) |
|
.attr("unchecked", false); |
|
} |
|
function guinClicked(){ |
|
alert("Guinea") |
|
var checked = d3.select("body").selectAll("input") |
|
.append("input") |
|
.attr("checked",true) |
|
.attr("unchecked", false);} |
|
|
|
function libClicked(){ |
|
alert("Liberia") |
|
var checked = d3.select("body").selectAll("input") |
|
.append("input") |
|
.attr("checked",true) |
|
.attr("unchecked", false);} |
|
|
|
|
|
var dots = g.selectAll("circle.dot") |
|
.data(data.features) |
|
|
|
|
|
|
|
|
|
dots.enter().append("circle").classed("dot", true) |
|
.attr("r", 1) |
|
.style({ |
|
fill: "#b28afe", |
|
"fill-opacity": 1.392, |
|
stroke: "#e5b300", |
|
"stroke-width": 1 |
|
}) |
|
.transition().duration(1000) |
|
.attr("r", 6) |
|
|
|
|
|
function render() { |
|
// We need to reposition our SVG and our containing group when the map |
|
// repositions via zoom or pan |
|
// https://github.com/zetter/voronoi-maps/blob/master/lib/voronoi_map.js |
|
var bounds = map.getBounds(); |
|
var topLeft = map.latLngToLayerPoint(bounds.getNorthWest()) |
|
var bottomRight = map.latLngToLayerPoint(bounds.getSouthEast()) |
|
svg.style("width", map.getSize().x + "px") |
|
.style("height", map.getSize().y + "px") |
|
.style("left", topLeft.x + "px") |
|
.style("top", topLeft.y + "px"); |
|
g.attr("transform", "translate(" + -topLeft.x + "," + -topLeft.y + ")"); |
|
|
|
// We reproject our data with the updated projection from leaflet |
|
g.selectAll("circle.dot") |
|
.attr({ |
|
cx: function(d) { return project(d.geometry.coordinates).x}, |
|
cy: function(d) { return project(d.geometry.coordinates).y}, |
|
}) |
|
|
|
|
|
} |
|
|
|
// re-render our visualization whenever the view changes |
|
map.on("viewreset", function() { |
|
render() |
|
}) |
|
map.on("move", function() { |
|
render() |
|
}) |
|
|
|
// render our initial visualization |
|
render() |
|
;}) |
|
|
|
</script> |
|
</body> |