Skip to content

Instantly share code, notes, and snippets.

@BrieLewis
Last active March 21, 2017 03:39
Show Gist options
  • Save BrieLewis/3c8cdf57abf05bcdd71d6b16fbbe2821 to your computer and use it in GitHub Desktop.
Save BrieLewis/3c8cdf57abf05bcdd71d6b16fbbe2821 to your computer and use it in GitHub Desktop.
ebola map w/checks
license: mit
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment