| license: mit |
This is a simple setup of Leaflet (via Mapbox) with d3 to show dots on a map. This can serve as a base for many interesting geographically based visualizations
Nice overview of using d3 + Leaflet. I found this slightly simpler to use than Mike's classic post.
Built with blockbuilder.org
forked from enjalot's block: ebola cases
forked from scresawn's block: ebola cases with checkboxes
| <!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="usa" id="usa" onclick="country_clicked()">United States<br> | |
| <input type="checkbox" name="liberia" id="liberia" onclick="country_clicked()">Liberia<br> | |
| <input type="checkbox" name="guinea" id="guinea" onclick="country_clicked()">Guinea<br> | |
| <div id="map"></div> | |
| <script> | |
| function country_clicked() { | |
| d3.select("body").select("#" + event.target.id) | |
| .call(function (d) { | |
| console.log(d[0][0].name, d[0][0].checked); | |
| }); | |
| } | |
| L.mapbox.accessToken = 'pk.eyJ1IjoiZW5qYWxvdCIsImEiOiJjaWhtdmxhNTIwb25zdHBsejk0NGdhODJhIn0.2-F2hS_oTZenAWc0BMf_uw' | |
| //Setup our Leaflet map using Mapbox.js | |
| var map = L.mapbox.map('map', 'mapbox.light') | |
| .setView([20,-30], 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) { | |
| //console.log("ll:", 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("data.json", function(err, data) { | |
| //console.log("data:", data); | |
| var dots = g.selectAll("circle.dot") | |
| .data(data.features) | |
| dots.enter().append("circle").classed("dot", true) | |
| .attr("r", 250) | |
| .style({ | |
| fill: "#fe9523", | |
| "fill-opacity": 0.6, | |
| stroke: "#004d60", | |
| "stroke-width": 0 | |
| }) | |
| .transition().duration(3000) | |
| .style({ | |
| fill: "#fe9523", | |
| "fill-opacity": 0.6, | |
| stroke: "#004d60", | |
| "stroke-width": 1 | |
| }) | |
| .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> |