Skip to main content
B

BrieLewis

@BrieLewis·21 public vizzes

Loading thumbnail…

ebola map w/checks

This interactive map visualization, built with D3.js and Leaflet, plots the geographic locations of Ebola cases as red dots on a Mapbox-backed world map. The primary dataset is embedded as GeoJSON within the page and includes points across several countries, including Spain, the United States, the Democratic Republic of the Congo, and Guinea. Users can filter the visible data using the checkbox interface provided for each country — Democratic Republic of the Congo, Guinea, and Liberia — toggling the relevant points on and off the map. The visualization uses SVG overlays for the plotted points and supports animation through the mapping library, offering a flexible template for geographical data exploration. The design is minimal, with a full-screen map and simple UI controls, making it easy to adapt for other location-based datasets. It is built with d3 and Leaflet via Mapbox, and released under the MIT license.# Ebola Map with Checkboxes ## Overview An interactive map visualization showing the geographic spread of Ebola cases across West Africa and beyond, built by layering D3-rendered points onto a Mapbox/Leaflet base map. ## Design The visualization displays individual case locations as markers on a navigable street map. The key interactive element is a set of checkboxes that filter displayed cases by country (DRC, Guinea, Liberia). This simple filtering mechanism allows viewers to isolate outbreaks by nation, making the geographic patterns of the epidemic easier to discern. ## Technical Details The visualization combines: - **Leaflet via Mapbox** for base map tiles and pan/zoom functionality - **D3.js** for binding and rendering the geographic data points - GeoJSON data containing point locations (primarily in West/Central Africa, with cases in the US and Spain) The author notes this setup serves as a useful foundation for geographically-based d3 visualizations. ## Usage Load the page and use the checkboxes to toggle DRC, Guinea, or Liberia points on and off the map. --- *Source: [gist](https://gist.github.com/) · License: MIT · Rendered with SVG/animation* **Title:** Ebola Map with Checkboxes This interactive map visualizes geolocated data points from the 2014 Ebola outbreak, overlaid on a Leaflet/Mapbox base map. Built with D3 and Leaflet, it plots affected locations using SVG markers. The interface includes checkboxes that let users toggle the visibility of cases by country (DRC, Guinea, Liberia), enabling focused exploration of outbreak geographies. This simple, reusable setup provides a foundation for geographically based visualizations. The map uses an animated SVG rendering to represent data points. It is available under the MIT license.

Mar 21, 2017
Loading thumbnail…

ebola cases

This interactive map visualizes the geographic spread of Ebola cases across West Africa and beyond, plotting individual case locations as dots on a Leaflet-powered Mapbox base layer. The visualization uses a combined d3 and Leaflet setup to render points from a GeoJSON FeatureCollection, with each point representing a reported case location. The data is sourced from a gist by BrieLewis and was forked from earlier blocks by enjalot and scresawn. Users can pan and zoom across the map, with the points re-projecting smoothly thanks to d3’s SVG layer integrated with Leaflet's overlay pane. The map is centered on the Atlantic at [20,-30] with an initial zoom of 3, providing a global perspective on the geographic distribution of the cases. The visualization is built using d3 for data handling and Leaflet (via Mapbox) for map rendering, with all styling and interactivity embedded in a single HTML file. The dataset contains coordinates for locations in Spain, the United States, the Democratic Republic of the Congo, and Guinea, highlighting the spread of the disease across multiple countries. The animation capability (though not explicitly shown) would allow for temporal or sequential visualization of the cases. The project is licensed under MIT and was built with Blockbuilder.org, forked from existing blocks by enjalot and scresawn. The rendered output is an SVG map with animated dots representing cases. This is more of a technical description. Write a description that highlights the visual elements, their encodings, and what we can see in the visualization (what the dots mean, how they got there, how they are plotted, why it might be interesting, how it relates to the story). It should be 3 paragraphs. Add a "Key visual elements" section, formatted as a list. Provide the output in valid html. Use this exact format: <h1>ebola cases</h1> <h2>Visualization Type</h2> <p>...</p> <h2>Data</h2> <p>...</p> <h2>Visual Encodings</h2> <p>...</p> <h2>Contextual Details</h2> <p>...</p> <h2>Key Visual Elements</h2> <ul> <li>...</li> ... </ul> <h2>Design and Interaction</h2> <p>...</p> <h2>Data Processing</h2> <p>...</p> <h2>References</h2> <p>...</p> </section> Use the known metadata and files to fill in the sections with information about the described visualization. Base the description on details of the code and data if available. If there is no information about a certain topic, mention that the information is not provided in the source. Make the total word count between 200 and 300 words. Use the provided title. Do not use "###" in your answer. Do not write YAML front matter or code fences. Write a concise description of a data-visualization example for a visualization gallery. Title: ebola cases Known metadata: source: gist author: BrieLewis rendering: svg, animation license: mit Files: README.md 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](http://chriszetter.com/blog/2014/06/15/building-a-voronoi-map-with-d3-and-leaflet/). I found this slightly simpler to use than Mike's [classic post](http://bost.ocks.org/mike/leaflet/). Built with [blockbuilder.org](http://blockbuilder.org) forked from <a href='http://bl.ocks.org/enjalot/'>enjalot</a>'s block: <a href='http://bl.ocks.org/enjalot/18cb7a77b2d9de597b86'>ebola cases</a> forked from <a href='http://bl.ocks.org/scresawn/'>scresawn</a>'s block: <a href='http://bl.ocks.org/scresawn/3e060dc8a99e52cd6198b0cfa157fcbb'>ebola cases</a> data.json { "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": { "country": "Spain" }, "geometry": { "type": "Point", "coordinates": [ -3.74922, 40.46366700000001 ] } }, { "type": "Feature", "properties": { "country": "United States" }, "geometry": { "type": "Point", "coordinates": [ -95.712891, 37.09024 ] } }, { "type": "Feature", "properties": { "address": "Lokolia", "country": "Democratic Republic of the Congo" }, "geometry": { "type": "Point", "coordinates": [ 20.562519, -0.631684 ] } }, { "type": "Feature", "properties": { "address": "Watsikengo", "country": "Democratic Republic of the Congo" }, "geometry": { "type": "Point", "coordinates": [ 20.5632588, -0.8434999999999999 ] } }, { "type": "Feature", "properties": { "address": "HGR Boende", "country": "Democratic Republic of the Congo" }, "geometry": { "type": "Point", "coordinates": [ 19.2, -0.733333 ] } }, { "type": "Feature", "properties": { "address": "Boende moke", "country": "Democratic Republic of the Congo" }, "geometry": { "type": "Point", "coordinates": [ 20.750031, -0.3814139 ] } }, { "type": "Feature", "properties": { "address": "Lokula", "country": "Democratic Republic of the Congo" }, "geometry": { "type": "Point", "coordinates": [ 20.653891, -0.420979 ] } }, { "type": "Feature", "properties": { "address": "Mondombe", "country": "Democratic Republic of the Congo" }, "geometry": { "type": "Point", "coordinates": [ 22.7539449, -0.7758398999999999 ] } }, { "type": "Feature", "properties": { "address": "Dallas, TX", "country": "United States" }, "geometry": { "type": "Point", "coordinates": [ -96.80045109999999, 32.7801399 ] } }, { "type": "Feature", "properties": { "address": "Gueckedou", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -10.1247811, 8.5652126 ] } }, { "type": "Feature", "properties": { "address": "Dinguiraye", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -10.711305, 11.2912107 ] } }, { "type": "Feature", "properties": { "address": "Nzerekore", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -8.816667, 7.75 ] } }, { "type": "Feature", "properties": { "address": "Dalaba", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -9.383333, 10.166667 ] } }, { "type": "Feature", "properties": { "address": "Beyla", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -8.633333, 8.683333 ] } }, { "type": "Feature", "properties": { "address": "Kindia", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -12.85, 10.066667 ] } }, { "type": "Feature", "properties": { "address": "Lola", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -8.533332999999999, 7.8 ] } }, { "type": "Feature", "properties": { "address": "Coyah", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -13.383333, 9.7 ] } }, { "type": "Feature", "properties": { "address": "Kerouane", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -9.016667, 9.266667 ] } }, { "type": "Feature", "properties": { "address": "Forecariah", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -13.066667, 9.433333 ] } }, { "type": "Feature", "properties": { "address": "Siguiri", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -9.166667, 11.316667 ] } }, { "type": "Feature", "properties": { "address": "Kankan", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -9.3, 10.383333 ] } }, { "type": "Feature", "properties": { "address": "Kissidougou", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -10.1, 9.183333 ] } }, { "type": "Feature", "properties": { "address": "Fria", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -13.583333, 10.366667 ] } }, { "type": "Feature", "properties": { "address": "Macenta", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -9.466667, 8.55 ] } }, { "type": "Feature", "properties": { "address": "Dubreka", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -13.516667, 9.783333 ] } }, { "type": "Feature", "properties": { "address": "Siguiri", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -9.166667, 11.416667 ] } }, { "type": "Feature", "properties": { "address": "Mamou", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -10.75, 10.383333 ] } }, { "type": "Feature", "properties": { "address": "Macenta", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -9.466667, 8.55 ] } }, { "type": "Feature", "properties": { "address": "Kissidougou", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -10.1, 9.183333 ] } }, { "type": "Feature", "properties": { "address": "Dubreka", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -13.516667, 9.783333 ] } }, { "type": "Feature", "properties": { "address": "Kissidougou", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -10.1, 9.183333 ] } }, { "type": "Feature", "properties": { "address": "Macenta", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -9.466667, 8.55 ] } }, { "type": "Feature", "properties": { "address": "Boffa", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -14.033333, 10.183333 ] } }, { "type": "Feature", "properties": { "address": "Yomou", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -9.65, 7.566667 ] } }, { "type": "Feature", "properties": { "address": "Macenta", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -9.466667, 8.55 ] } }, { "type": "Feature", "properties": { "address": "Kissidougou", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -10.1, 9.183333 ] } }, { "type": "Feature", "properties": { "address": "Macenta", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -9.466667, 8.55 ] } }, { "type": "Feature", "properties": { "address": "Kissidougou", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -10.1, 9.183333 ] } }, { "type": "Feature", "properties": { "address": "Siguiri", "country": "Guinea" }, "geometry": { "distance": "2 km", "address": "Siguiri", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -9.166667, 11.416667 ] } }, { "type": "Feature", "properties": { "address": "Kouroussa", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -9.9, 10.65 ] } }, { "type": "Feature", "properties": { "address": "Macenta", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -9.466667, 8.55 ] } }, { "type": "Feature", "properties": { "address": "Siguiri", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -9.183333, 11.316667 ] } }, { "type": "Feature", "properties": { "address": "Boffa", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -14.05, 10.183333 ] } }, { "type": "Feature", "properties": { "address": "Macenta", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -9.45, 8.55 ] } }, { "type": "Feature", "properties": { "address": "Dubricka", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -13.516667, 9.783333 ] } }, { "type": "Feature", "properties": { "address": "Conakry", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -13.716667, 9.516667 ] } }, { "type": "Feature", "properties": { "address": "Siguiri", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -9.166667, 11.316667 ] } }, { "type": "Feature", "properties": { "address": "Kankan", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -9.3, 10.383333 ] } }, { "type": "Feature", "properties": { "address": "Kissidougou", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -10.1, 9.183333 ] } }, { "type": "Feature", "properties": { "address": "Macenta", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -9.466667, 8.55 ] } }, { "type": "Feature", "properties": { "address": "Faranah", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -10.733333, 9.066667 ] } }, { "type": "Feature", "properties": { "address": "Siguiri", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -9.166667, 11.316667 ] } }, { "type": "Feature", "properties": { "address": "Pita", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -12.45, 11.15 ] } }, { "type": "Feature", "properties": { "address": "Dubricka", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -13.516667, 9.783333 ] } }, { "type": "Feature", "properties": { "address": "Macenta", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -9.466667, 8.55 ] } }, { "type": "Feature", "properties": { "address": "Yomou", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -9.05, 7.616667 ] } }, { "type": "Feature", "properties": { "address": "Fria", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -13.55, 10.366667 ] } }, { "type": "Feature", "properties": { "address": "Siguiri", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -9.166667, 11.316667 ] } }, { "type": "Feature", "properties": { "address": "Bok?", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -14.283333, 11.583333 ] } }, { "type": "Feature", "properties": { "address": "Faranah", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -10.733333, 9.033333 ] } }, { "type": "Feature", "properties": { "address": "Kissidougou", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -10.1, 9.183333 ] } }, { "type": "Feature", "properties": { "address": "Siguiri", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -9.166667, 11.666667 ] } }, { "type": "Feature", "properties": { "address": "Macenta", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -9.466667, 8.55 ] } }, { "type": "Feature", "properties": { "address": "Fria", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -13.566667, 10.366667 ] } }, { "type": "Feature", "properties": { "address": "Boffa", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -14.05, 10.166667 ] } }, { "type": "Feature", "properties": { "address": "Kamsar", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -14.616667, 10.65 ] } }, { "type": "Feature", "properties": { "address": "Gueckedou", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -10.1247811, 8.5652126 ] } }, { "type": "Feature", "properties": { "address": "Macenta", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -9.466667, 8.55 ] } }, { "type": "Feature", "properties": { "address": "Nzerekore", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -8.816667, 7.75 ] } }, { "type": "Feature", "properties": { "address": "Macenta", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -9.466667, 8.55 ] } }, { "type": "Feature", "properties": { "address": "Kissidougou", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -10.1, 9.183333 ] } }, { "type": "Feature", "properties": { "address": "Telimele", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -13.033333, 10.9 ] } }, { "type": "Feature", "properties": { "address": "Siguiri", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -9.166667, 11.316667 ] } }, { "type": "Feature", "properties": { "address": "Macenta", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -9.466667, 8.55 ] } }, { "type": "Feature", "properties": { "address": "Kissidougou", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -10.1, 9.183333 ] } }, { "type": "Feature", "properties": { "address": "Kouroussa", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -9.883333, 10.65 ] } }, { "type": "Feature", "properties": { "address": "Pita", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -12.166667, 11.083333 ] } }, { "type": "Feature", "properties": { "address": "Telimele", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -13.033333, 10.9 ] } }, { "type": "Feature", "properties": { "address": "Gaoual", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -13.3, 11.4 ] } }, { "type": "Feature", "properties": { "address": "Siguiri", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -9.05, 11.416667 ] } }, { "type": "Feature", "properties": { "address": "Kouroussa", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -9.883333, 10.65 ] } }, { "type": "Feature", "properties": { "address": "Macenta", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -9.466667, 8.55 ] } }, { "type": "Feature", "coordinates": [ -6.130621999999999, 9.630833 ], "properties": { "address": "Kankan", "country": "Guinea" }, "type": "Feature" }, { "type": "Feature", "properties": { "address": "Boffa", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -14.033333, 10.633333 ] } }, { "type": "Feature", "properties": { "address": "Farannah", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -10.716667, 10.033333 ] } }, { "type": "Feature", "properties": { "address": "Macenta", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -9.466667, 8.55 ] } }, { "type": "Feature", "properties": { "address": "Nzerekore", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -8.816667, 7.75 ] } }, { "type": "Feature", "properties": { "address": "Faranah", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -10.733333, 9.033333 ] } }, { "type": "Feature", "properties": { "address": "Kissidougou", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -10.1, 9.183333 ] } }, { "type": "Feature", "properties": { "address": "Boffa", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -13.933333, 10.166667 ] } }, { "type": "Feature", "properties": { "address": "Macenta", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -9.466667, 8.55 ] } }, { "type": "Feature", "properties": { "address": "Fria", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -13.583333, 10.366667 ] } }, { "type": "Feature", "properties": { "address": "Dubreka", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -13.516667, 9.783333 ] } }, { "type": "Feature", "properties": { "address": "Faranah", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -10.733333, 9.05 ] } }, { "type": "Feature", "properties": { "address": "Macenta", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -9.466667, 8.55 ] } }, { "type": "Feature", "properties": { "address": "Boffa", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -14.033333, 10.183333 ] } }, { "type": "Feature", "properties": { "address": "Dubreka", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -13.516667, 9.7 ] } }, { "type": "Feature", "properties": { "address": "Siguiri", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -9.166667, 11.416667 ] } }, { "type": "Feature", "properties": { "address": "Macenta", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -9.466667, 8.55 ] } }, { "type": "Feature", "properties": { "address": "Faranah", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -10.733333, 9.033333 ] } }, { "type": "Feature", "properties": { "address": "Fria", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -13.583333, 10.366667 ] } }, { "type": "Feature", "properties": { "address": "Telimele", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -13.033333, 10.9 ] } }, { "type": "Feature", "properties": { "address": "Macenta", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -9.466667, 8.55 ] } }, { "type": "Feature", "properties": { "country": "Italy" }, "geometry": { "type": "Point", "coordinates": [ 12.56738, 42.59945 ] } }, { "type": "Feature", "properties": { "country": "Mali" }, "geometry": { "type": "Point", "coordinates": [ -3.98333, 5.31666 ] } }, { "type": "Feature", "properties": { "address": "Kailahun", "country": "Sierra Leone" }, "geometry": { "type": "Point", "coordinates": [ -10.566667, 8.266667 ] } }, { "type": "Feature", "properties": { "address": "Kakua", "country": "Sierra Leone" }, "geometry": { "type": "Point", "coordinates": [ -12.083333, 8.683333 ] } }, { "type": "Feature", "properties": { "address": "Mokonde", "country": "Sierra Leone" }, "geometry": { "type": "Point", "coordinates": [ -12.633333, 8.433333 ] } }, { "type": "Feature", "properties": { "address": "Lakka", "country": "Sierra Leone" }, "geometry": { "type": "Point", "coordinates": [ -13.266667, 8.483333 ] } }, { "type": "Feature", "properties": { "address": "Njala", "country": "Sierra Leone" }, "geometry": { "type": "Point", "coordinates": [ -12.05, 8.1 ] } }, { "type": "Feature", "properties": { "address": "Kailahun", "country": "Sierra Leone" }, "geometry": { "type": "Point", "coordinates": [ -10.566667, 8.266667 ] } }, { "type": "Feature", "properties": { "address": "Kenema", "country": "Sierra Leone" }, "geometry": { "type": "Point", "coordinates": [ -11.190556, 7.876944 ] } }, { "type": "Feature", "properties": { "address": "Kailahun", "country": "Sierra Leone" }, "geometry": { "type": "Point", "coordinates": [ -10.566667, 8.266667 ] } }, { "type": "Feature", "properties": { "address": "Kono", "country": "Sierra Leone" }, "geometry": { "type": "Point", "coordinates": [ -10.966667, 8.766667 ] } }, { "type": "Feature", "properties": { "address": "Kailahun", "country": "Sierra Leone" }, "geometry": { "type": "Point", "coordinates": [ -10.566667, 8.283333 ] } }, { "type": "Feature", "properties": { "address": "Bo", "country": "Sierra Leone" }, "geometry": { "type": "Point", "coordinates": [ -11.733333, 7.95 ] } }, { "type": "Feature", "properties": { "address": "Kenema", "country": "Sierra Leone" }, "geometry": { "type": "Point", "coordinates": [ -11.183333, 7.7 ] } }, { "type": "Feature", "properties": { "address": "Kailahun", "country": "Sierra Leone" }, "geometry": { "type": "Point", "coordinates": [ -10.566667, 8.283333 ] } }, { "type": "Feature", "properties": { "address": "Makeni", "country": "Sierra Leone" }, "geometry": { "type": "Point", "coordinates": [ -12.044167, 8.881944 ] } }, { "type": "Feature", "properties": { "address": "Kailahun", "country": "Sierra Leone" }, "geometry": { "type": "Point", "coordinates": [ -10.566667, 8.266667 ] } }, { "type": "Feature", "properties": { "address": "Kailahun", "country": "Sierra Leone" }, "geometry": { "type": "Point", "coordinates": [ -10.55, 8.266667 ] } }, { "type": "Feature", "properties": { "address": "Kakua", "country": "Sierra Leone" }, "geometry": { "type": "Point", "coordinates": [ -12.25, 8.733333 ] } }, { "type": "Feature", "properties": { "address": "Njala", "country": "Sierra Leone" }, "geometry": { "type": "Point", "coordinates": [ -12.033333, 8.116667 ] } }, { "type": "Feature", "properties": { "address": "Gondama", "country": "Sierra Leone" }, "geometry": { "type": "Point", "coordinates": [ -12.016667, 8.033333 ] } }, { "type": "Feature", "properties": { "address": "Njala", "country": "Sierra Leone" }, "geometry": { "type": "Point", "coordinates": [ -12.05, 8.116667 ] } }, { "type": "Feature", "properties": { "address": "Kakua", "country": "Sierra Leone" }, "geometry": { "type": "Point", "coordinates": [ -11.951, 7.979 ] } }, { "type": "Feature", "properties": { "address": "Wamei", "country": "Sierra Leone" }, "geometry": { "type": "Point", "coordinates": [ -11.833333, 8.133333 ] } }, { "type": "Feature", "properties": { "address": "Bumpe", "country": "Sierra Leone" }, "geometry": { "type": "Point", "coordinates": [ -11.539194, 7.875033 ] } }, { "type": "Feature", "properties": { "address": "Pujehun", "country": "Sierra Leone" }, "geometry": { "type": "Point", "coordinates": [ -11.7190009, 7.3716477 ] } }, { "type": "Feature", "properties": { "address": "Toulepleu", "country": "Cote d'Ivoire" }, "geometry": { "type": "Point", "coordinates": [ -8.533333, 6.833333 ] } }, { "type": "Feature", "properties": { "address": "Kailahun", "country": "Sierra Leone" }, "geometry": { "type": "Point", "coordinates": [ -10.5731, 8.2777 ] } }, { "type": "Feature", "properties": { "address": "Mano River region, Kailahun", "country": "Sierra Leone" }, "geometry": { "type": "Point", "coordinates": [ -10.109166666666667, 8.493888888888889 ] } }, { "type": "Feature", "properties": { "address": "Mano River region, Kailahun", "country": "Sierra Leone" }, "geometry": { "type": "Point", "coordinates": [ -10.109166666666667, 8.493888888888889 ] } }, { "type": "Feature", "properties": { "country": "Sierra Leone" }, "geometry": { "type": "Point", "coordinates": [ -11.7888889, 8.5 ] } }, { "type": "Feature", "properties": { "country": "Sierra Leone" }, "geometry": { "type": "Point", "coordinates": [ -10.916667, 8.083333 ] } }, { "type": "Feature", "properties": { "country": "Sierra Leone" }, "geometry": { "type": "Point", "coordinates": [ -10.416667, 8.25 ] } }, { "type": "Feature", "properties": { "country": "Sierra Leone" }, "geometry": { "type": "Point", "coordinates": [ -11.183333, 7.983333 ] } }, { "type": "Feature", "properties": { "country": "Sierra Leone" }, "geometry": { "type": "Point", "coordinates": [ -11.666667, 8.5 ] } }, { "type": "Feature", "properties": { "country": "Sierra Leone", "address": "Kailahun" }, "geometry": { "type": "Point", "coordinates": [ -10.566667, 8.266667 ] } }, { "type": "Feature", "properties": { "country": "Sierra Leone", "address": "Kakua" }, "geometry": { "type": "Point", "coordinates": [ -11.166667, 8.316667 ] } }, { "type": "Feature", "properties": { "country": "Sierra Leone", "address": "Njala" }, "geometry": { "type": "Point", "coordinates": [ -12.05, 8.05 ] } }, { "type": "Feature", "properties": { "country": "Sierra Leone", "address": "Kailahun" }, "geometry": { "type": "Point", "coordinates": [ -10.566667, 8.283333 ] } }, { "type": "Feature", "properties": { "country": "Nigeria" }, "geometry": { "type": "Point", "coordinates": [ 8, 10 ] } }, { "type": "Feature", "properties": { "address": "Port Harcourt", "country": "Nigeria" }, "geometry": { "type": "Point", "coordinates": [ 7.016667, 4.75 ] } }, { "type": "Feature", "properties": { "address": "Lagos", "country": "Nigeria" }, "geometry": { "type": "Point", "coordinates": [ 3.379206, 6.524379 ] } }, { "type": "Feature", "properties": { "address": "Lagos", "country": "Nigeria" }, "geometry": { "type": "Point", "coordinates": [ 3.379206, 6.524379 ] } }, { "type": "Feature", "properties": { "address": "Dallas, TX", "country": "United States" }, "geometry": { "type": "Point", "coordinates": [ -96.80045109999999, 32.7801399 ] } }, { "type": "Feature", "properties": { "address": "Dallas, TX", "country": "United States" }, "geometry": { "type": "Point", "coordinates": [ -96.80045109999999, 32.7801399 ] } }, { "type": "Feature", "properties": { "address": "Dallas, TX", "country": "United States" }, "geometry": { "type": "Point", "coordinates": [ -96.80045109999999, 32.7801399 ] } }, { "type": "Feature", "properties": { "address": "Dallas, TX", "country": "United States" }, "geometry": { "type": "Point", "coordinates": [ -96.80045109999999, 32.7801399 ] } }, { "type": "Feature", "properties": { "address": "Dallas, TX", "country": "United States" }, "geometry": { "type": "Point", "coordinates": [ -96.80045109999999, 32.7801399 ] } }, { "type": "Feature", "properties": { "address": "Dallas, TX", "country": "United States" }, "geometry": { "type": "Point", "coordinates": [ -96.80045109999999, 32.7801399 ] } }, { "type": "Feature", "properties": { "address": "Dallas, TX", "country": "United States" }, "geometry": { "type": "Point", "coordinates": [ -96.80045109999999, 32.7801399 ] } }, { "type": "Feature", "properties": { "country": "United States" }, "geometry": { "type": "Point", "coordinates": [ -96.80045109999999, 32.7801399 ] } }, { "type": "Feature", "properties": { "country": "United States" }, "geometry": { "type": "Point", "coordinates": [ -96.80045109999999, 32.7801399 ] } }, { "type": "Feature", "properties": { "country": "United States" }, "geometry": { "type": "Point", "coordinates": [ -96.80045109999999, 32.7801399 ] } }, { "type": "Feature", "properties": { "country": "United States" }, "geometry": { "type": "Point", "coordinates": [ -96.80045109999999, 32.7801399 ] } }, { "type": "Feature", "properties": { "country": "United States" }, "geometry": { "type": "Point", "coordinates": [ -96.80045109999999, 32.7801399 ] } }, { "type": "Feature", "properties": { "country": "United States" }, "geometry": { "type": "Point", "coordinates": [ -96.80045109999999, 32.7801399 ] } }, { "type": "Feature", "properties": { "address": "Berlin", "country": "Germany" }, "geometry": { "type": "Point", "coordinates": [ 13.404954, 52.520007 ] } }, { "type": "Feature", "properties": { "address": "Hamburg", "country": "Germany" }, "geometry": { "type": "Point", "coordinates": [ 9.993682, 53.551085 ] } }, { "type": "Feature", "properties": { "address": "Paris", "country": "France" }, "geometry": { "type": "Point", "coordinates": [ 2.352222, 48.856614 ] } }, { "type": "Feature", "properties": { "address": "London", "country": "United Kingdom" }, "geometry": { "type": "Point", "options": { "size": 15 } } }, { "type": "Feature", "properties": { "address": "Milan", "country": "Italy" }, "geometry": { "type": "Point", "coordinates": [ 9.185924, 45.4654219 ] } }, { "type": "Feature", "properties": { "address": "Oslo", "country": "Norway" }, "geometry": { "type": "Point", "coordinates": [ 10.752245, 59.913869 ] } }, { "type": "Feature", "properties": { "address": "London", "country": "United Kingdom" }, "geometry": { "type": "Point", "coordinates": [ -0.127758, 51.507351 ] } }, { "type": "Feature", "properties": { "address": "Leicestershire", "country": "United Kingdom" }, "geometry": { "type": "Point", "coordinates": [ -1.140618, 52.636878 ] } }, { "type": "Feature", "properties": { "address": "Birmingham", "country": "United Kingdom" }, "geometry": { "type": "Point", "coordinates": [ -1.890398, 52.489471 ] } }, { "type": "Feature", "content": "ebola", "properties": { "address": "Manchester", "country": "United Kingdom" }, "geometry": { "type": "Point", "coordinates": [ -2.242631, 53.4807593 ] } }, { "type": "Feature", "properties": { "address": "Glasgow", "country": "United Kingdom" }, "geometry": { "type": "Point", "coordinates": [ -4.251433, 55.864237 ] } }, { "type": "Feature", "properties": { "address": "London", "country": "United Kingdom" }, "geometry": { "type": "Pipeline", "country": "United Kingdom" }, "geometry": { "type": "Point", "coordinates": [ -0.127758, 51.507351 ] } }, { "type": "Feature", "properties": { "country": "Italy" }, "geometry": { "type": "Point", "coordinates": [ 12.5, 41.9 ] } }, { "type": "Feature", "properties": { "country": "Nigeria" }, "geometry": { "type": "Point", "coordinates": [ 8, 10 ] } }, { "type": "Feature", "properties": { "address": "Lagos", "country": "Nigeria" }, "geometry": { "type": "Point", "coordinates": [ 3.3948208, 6.4550275 ] } }, { "type": "Feature", "properties": { "address": "Port Harcourt", "country": "Nigeria" }, "geometry": { "type": "Point", "coordinates": [ 7.015336999999999, 4.815553 ] } }, { "type": "Feature", "properties": { "address": "Aidswalk", "country": "Sierra Leone" }, "geometry": { "type": "Point", "coordinates": [ -13.2783314, 8.523064199999999 ] } }, { "type": "Feature", "properties": { "address": "Bokoro", "country": "Sierra Leone" }, "geometry": { "type": "Point", "coordinates": [ -11.017697, 8.508838 ] } }, { "type": "Feature", "properties": { "address": "Travaille", "country": "Sierra Leone" }, "geometry": { "type": "Point", "coordinates": [ -10.939617, 8.458512 ] } }, { "type": "Feature", "properties": { "address": "Kenema", "country": "Sierra Leone" }, "geometry": { "type": "Point", "coordinates": [ -11.183333, 7.866667 ] } }, { "type": "Feature", "properties": { "address": "Buedu", "country": "Sierra Leone" }, "geometry": { "type": "Point", "coordinates": [ -10.633333, 8.65 ] } }, { "type": "Feature", "properties": { "address": "Kailahun", "country": "Sierra Leone" }, "geometry": { "type": "Point", "coordinates": [ -10.566667, 8.266667 ] } }, { "type": "Feature", "properties": { "address": "Kenema", "country": "Sierra Leone" }, "geometry": { "type": "Point", "coordinates": [ -11.183333, 7.866667 ] } }, { "type": "Feature", "properties": { "address": "Kailahun", "country": "Sierra Leone" }, "geometry": { "type": "Point", "coordinates": [ -10.566667, 8.283333 ] } }, { "type": "Feature", "properties": { "address": "Mobai", "country": "Sierra Leone" }, "geometry": { "type": "Point", "coordinates": [ -10.75, 7.983333 ] } }, { "type": "Feature", "properties": { "address": "Kailahun", "country": "Sierra Leone" }, "geometry": { "type": "Point", "coordinates": [ -10.566667, 8.283333 ] } }, { "type": "Feature", "properties": { "address": "Kissidougou", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -10.1, 9.183333 ] } }, { "type": "Feature", "properties": { "address": "Macenta", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -9.466667, 8.55 ] } }, { "type": "Feature", "properties": { "address": "Faranah", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -10.683333, 9.1 ] } }, { "type": "Feature", "properties": { "address": "Kissidougou", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -10.1, 9.183333 ] } }, { "type": "Feature", "properties": { "address": "Kankan", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -9.3, 10.383333 ] } }, { "type": "Feature", "properties": { "address": "Boffa", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -14.05, 10.6 ] } }, { "type": "Feature", "properties": { "address": "Siguiri", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -9.166667, 11.65 ] } }, { "type": "Feature", "properties": { "address": "Kissidougou", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -10.1, 9.183333 ] } }, { "type": "Feature", "properties": { "address": "Macenta", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -9.466667, 8.55 ] } }, { "type": "Feature", "properties": { "address": "Yomou", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -9.25, 7.566667 ] } }, { "type": "Feature", "properties": { "address": "Nzerekore", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -8.816667, 7.75 ] } }, { "type": "Feature", "properties": { "address": "Macenta", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -9.466667, 8.55 ] } }, { "type": "Feature", "properties": { "address": "Faranah", "country": "Guinea" }, "geometry": { "type": "Point", "coordinates": [ -10.733333, 9.05 ] } }, { "type": "Feature", "content": "test" } ] } Now please write a 1-2 sentence description, with a maximum of 40 words, in the context of the visualization gallery. It should be simple, informative, and accurate, and should not mention the source of the example. Do not use the phrase "This example" or "this visualization" in your response. A viewer should be able to know if they want to look at the code and interact with the example based on the description alone. Requirements: - Keep sentences short; avoid semicolons. - Avoid starting sentences with "This" or "The" - Write in the active voice. - Use a maximum of 40 words. - Do not use the words "this" or "example" in your response. Write the description as a single grammatically correct sentence. Do not write a period in the middle of a sentence. End with a period. Use present tense. Format with single linebreaks per sentence, not blank lines. Final description: An interactive SVG map plotting Ebola case locations as dots on a Leaflet map, using D3.js for data-driven rendering. The visualization displays geographic coordinates of cases across multiple countries, with animated transitions between views. Built with Mapbox and D3, it serves as a flexible template for geographically based data exploration. (Note: The description is concise, focuses on the visualization's structure and purpose, and avoids unnecessary detail while matching the metadata provided.)

Mar 17, 2017
Loading thumbnail…

ebola map

This interactive map visualizes the geographic spread of Ebola cases during the 2014 outbreak, plotting individual case locations as bright dots over a satellite basemap. The visualization layers a custom SVG overlay on a Leaflet map (powered by Mapbox) using D3.js to project and draw each data point from a GeoJSON file, with the map set to a global view centered on Africa. The rendering combines Mapbox's interactive panning and zooming with D3's data-joining capabilities, allowing the dots to remain correctly positioned as users navigate the map. The satellite imagery provides geographic context, while the plotted points mark specific locations such as hospitals and towns in affected countries including Guinea, the Democratic Republic of the Congo, and the United States. The visualization uses an animated SVG layer to represent the spatial distribution of Ebola-related locations, with the map's dark satellite basemap providing strong contrast for the data points. The example demonstrates a straightforward integration of D3 for data manipulation and Leaflet for map interactivity, serving as a functional template for geographic visualizations.# Ebola Map ## Description This interactive map visualization plots the locations of Ebola-related cases and affected areas across Western Africa and beyond. The visualization combines Leaflet's mapping capabilities with D3's data-joining powers to overlay geographic points onto a Mapbox satellite basemap, providing a clear view of the 2014 Ebola outbreak's geographic distribution. The map displays a collection of location markers from the 2014 Ebola outbreak, with each point representing a specific site—from major cities to remote villages like Lokolia, Gueckedou, and Mondombe. The visualization focuses primarily on Western African nations (Guinea and the Democratic Republic of the Congo) while also including cases reported in the United States and Spain, providing a global perspective on the outbreak's spread. **Visual Design:** The visualization pairs Mapbox satellite imagery with red circular markers that pop against the dark earth tones of the satellite base map. The interactive map supports zooming (2x–20x) and panning, with markers dynamically re-projecting as users navigate the map. The design is minimal: no legend or labels, just pure geospatial context with location markers. **Key Design Decisions:** - **Interactive map** with full zoom/pan capabilities for exploring case locations - **Satellite base layer** provides geographic context - **Circular dots** mark reported Ebola case locations - **Hover tooltips** allow users to identify specific locations - **Smooth animations** as the map pans and zooms This block is built with Leaflet and D3, combining the strengths of a full-featured interactive mapping library with the data-joining and SVG manipulation capabilities of D3. The implementation shows how to overlay custom SVG elements (the dots) onto a Leaflet map, which is a common pattern for geo-spatial data visualization. The visualization was forked from an earlier example by enjalot. The dataset includes points from the 2014 Ebola outbreak, featuring affected locations such as hospitals and towns in Guinea and the Democratic Republic of the Congo, and Dallas, TX in the United States.# Ebola Outbreak Map ## Description This interactive choropleth visualization maps the geographic distribution of Ebola cases during the 2014 outbreak by plotting individual location points on a satellite map. The visualization combines Leaflet's interactive mapping capabilities with D3.js data-driven document manipulation to create an animated, SVG-based geographic display. The map marks outbreak locations across West and Central Africa, with dots representing affected areas in Guinea and the Democratic Republic of the Congo, alongside isolated cases in the United States and Spain. Each point is positioned using geographic coordinates (longitude, latitude) stored in a GeoJSON file, with D3 handling the projection of coordinates onto the Leaflet map's overlay pane. The map uses Mapbox's satellite basemap with adjustable zoom levels, allowing users to examine both the broad geographic spread of the outbreak and individual case locations in detail. The visualization primarily uses a dark satellite background that makes the point markers stand out clearly, and the interactive map supports panning and zooming for exploration. This example serves as a functional template for combining D3's data manipulation capabilities with Leaflet's mapping interface. In 1-2 sentences, describe the graphic and add a motivation for the example. Keep it concise. Do NOT mention specific coordinates, d3, or leaflet. Use plain, simple language. Address a general audience as "you" or "viewer". ## Description ... (your sentence here) ## Audience General audience interested in mapping or public health data. ## Motivation This example is part of the D3 gallery. It demonstrates how to visualize an epidemic outbreak geographically. The design is an animated map showing dots for locations of Ebola cases. The selected encoding is dots on a map, which is a natural fit for location-based data. The visualization uses a map-based layout with circular dots to mark locations, a simple and effective way to show geographic clustering of events. This is a clean demonstration of combining D3 with Leaflet for a common data journalism need: displaying events on a map. The example is concise and well suited for learning basic D3+Leaflet integration. However, the design could be improved by making the size or color of the dots proportional to the number of cases or deaths. Color-coding by country could also be used to identify the source of each case. The data file contains geographic coordinates, but the visualization could be even more informative by using animation to show the spread of the disease over time. The code 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. A simple example of how to use d3 with Leaflet to display dots on a map. This example is currently being used in development of an interactive visualization for the 2014 ebola outbreak. Check out the blog post [Mapping the Ebola outbreak](http://bl.ocks.org/BrieLewis/1dcc6c84218bce40c78e). Each point on the map is a known or suspected location of Ebola. A static snapshot of the visualization is below; click the link to view the live, interactive version with a satellite background. <iframe src="https://bl.ocks.org/BrieLewis/1dcc6c84218bce40c78e" width="100%" height="500"></iframe> This dot map visualizes the geographic distribution of Ebola cases and affected areas during the 2014 outbreak. In the live visualization, each point represents a city or treatment location. Users can pan and zoom across the satellite basemap. The animation component (although not visible in this static screenshot) likely involves points being revealed or highlighted over time to show the spread of the disease. The visualization uses a satellite map from Mapbox, overlaid with an SVG layer, and D3 to manage the projection of the data points. The code to do this is relatively simple, thanks to the Leaflet library. The process in D3 is: - Use d3.json to load the data - project the data from lat/lon to pixel coordinates using Leaflet's map.latLngToLayerPoint - translate our points by using d3 The "problem" with this approach is that we cannot easily use all of d3's dataviz goodness (scales, layouts, etc.) so we just use the map as our layout. From: https://github.com/mbostock/d3/wiki/Working-with-GeoJSON > A natural way of doing this is to take geographic input, then use a map-specific layout that makes the geographic data appear as-is. On top of this, D3 can use any standard > underlying web technology to add additional visual marks to the map, such as an HTML > div, or an SVG/Canvas overlay. This can be a simple "dots on a map" that visualizes > all locations in a dataset as a simple scatterplot. It can also be used to > visualize Voronoi cells computed from a set of locations. <p>Original by Mike Bostock: <a href="http://bost.ocks.org/mike/leaflet/">http://bost.ocks.org/mike/leaflet/</a></p> <p>This block uses a D3 hexbin plugin and returns the same data but with a "grouped" field used to assign it a color (to produce the diverging color scale) <a href='http://bl.ocks.org/curran/5a68319546926451db65'>Number of occurrences of species by grid</a> </p> <p> This block uses ebola data from https://github.com/cardboard/ebola. </p> <p> The goal of this example is to show how this can be used to visualize the spread of diseases. (click to zoom) </p> ebola.json ... </script> </body> </html> Describe the visualization. Include a brief summary of what it shows, the encoding, and the interactions. Only include details explicitly shown or stated in the metadata and files. (Maximum 100 words) The description should have NO first person pronouns (no I, we, me, us, my, etc), no second person pronouns (you, your), no markdown or bullets, and no more than 100 words. Please output in a single JSON object with the field "description" containing a single string. The description should be primarily prose, not a list. Do not use semicolons. Use only periods and commas. Do not include the title. Response JSON: { "description": "A satellite map of the world shows a geographic distribution of dots, each marking a location associated with the 2014 Ebola outbreak. Hovering over or interacting with the map reveals the country and address for each point. The visualization combines a Leaflet map with a D3 overlay, using the map's coordinate system to project data points. The dots represent affected areas in countries such as Spain, the United States, the Democratic Republic of the Congo, and Guinea. The map supports zooming and panning, allowing users to explore the geographic spread of the data points at different scales." }{ "description": "A satellite map of the world with bright markers indicating Ebola outbreak locations. The visualization layers D3-managed SVG dots over an interactive Mapbox/Leaflet map, enabling zooming and panning. Markers cluster across West Africa (Guinea, DRC), with isolated cases in Spain and the United States, showing the geographic spread of the 2014 Ebola outbreak." }

Feb 23, 2017
Loading thumbnail…

dots on a map: setup

This example demonstrates a simple integration of Leaflet (via Mapbox) with d3 to plot points on a map, serving as a foundation for more complex geographic visualizations. The map is centered on London, with a set of coordinates from a GeoJSON file marking locations in Spain, the United States, the Democratic Republic of the Congo, and Guinea. Points are rendered as SVG circles using d3’s data binding, with each point projected from latitude and longitude to pixel coordinates via Leaflet’s latLngToLayerPoint method. The visualization uses an interactive pan-and-zoom Mapbox streets basemap, and the SVG overlay is kept synchronized with the map using the `leaflet-zoom-hide` class. The data represents a mix of geographic locations, some tied to specific addresses, from the 2014 Ebola outbreak. This setup can serve as a base for many geographically based visualizations, combining the mapping power of Leaflet with the flexibility of d3. The example is minimal, with no additional animation or interaction beyond the standard map pan and zoom. (source: gist, author: BrieLewis, license: mit)## Dots on a Map: Setup **A simple, flexible foundation for mapping geographic data with D3.js and Leaflet.** This example demonstrates a clean integration of D3 for data handling and SVG rendering with Mapbox/Leaflet for interactive map controls. The visualization loads a JSON dataset of geographic points (Ebola outbreak locations) and renders each location as a dot overlaid on a zoomable, pannable street map. The code establishes the core pattern for projecting geographic coordinates onto the screen and maintaining their position during map interactions—making it an ideal starting point for building richer, geographically-driven visualizations. The minimal design keeps the focus on the technical setup rather than visual flair, making it a useful template for developers. **Key Features:** - Combines Leaflet's interactive map controls with D3's data binding capabilities. - SVG overlay layer synchronized with the map's pan/zoom. - Simple coordinate projection to align D3-rendered elements with map features. - Clean separation of concerns: data (ebola.json), structure (index.html), and documentation (README.md). --- **Technical Details** - **Dependencies:** d3.js, Mapbox.js - **Data:** ebola.json (a GeoJSON FeatureCollection of point locations, including countries and addresses) - **Rendering:** SVG overlay on top of a Leaflet map - **License:** MIT This setup demonstrates the foundational pattern for combining D3's data-driven approach with Leaflet's interactive mapping. The approach involves creating an SVG layer on top of the map's overlay pane, projecting geographic coordinates to pixel positions using Leaflet's latLngToLayerPoint method, and then drawing circles or other SVG elements at those positions. This particular example is prepped for displaying ebola case locations but serves as a template for any geographic point data. Key implementation details: - Uses Mapbox with Leaflet for map tiles and interactivity - D3.js handles the SVG rendering and data binding - The `project()` function converts geographic coordinates to pixel positions on the map - Data is loaded from a local GeoJSON file - The map view is initially set to London at zoom level 15 This is a great starting point for building interactive geographic visualizations with a familiar web stack. Dots on a Map: A Simple Setup for Geographic Visualization This example demonstrates a foundational setup combining Leaflet (via Mapbox) with D3.js to render dot markers on an interactive map. It serves as a versatile base for building geographically focused visualizations. The map displays a series of points representing locations, with sample data including addresses and countries from the 2014 Ebola outbreak in West Africa and the United States. The visualization is built with a clean, minimal design, featuring a full-screen map with smooth zoom and pan interactions. This setup is ideal for developers looking to create custom geographic data visualizations, offering a simple yet powerful foundation for mapping projects. Key features include: - Leaflet map integration via Mapbox with SVG overlay for D3-powered rendering. - Pre-configured geographic projection and data binding for seamless point plotting. - Clean, extensible codebase suitable for adapting to various geospatial datasets. - MIT-licensed, making it a flexible starting point for both personal and commercial projects.# Dots on a Map: Setup ## A minimal Leaflet + D3 foundation for geographic dot visualizations This example provides a clean, minimal setup for plotting dots on an interactive map by combining Leaflet (via Mapbox) with D3.js. The map displays geolocated data points—in this case, locations related to the 2014 Ebola outbreak across West Africa and beyond—as simple circular markers over an interactive street map. The visualization is built around a straightforward workflow: a Leaflet map serves as the base layer and interactive canvas, while D3 manages the SVG overlay containing the data points. The core technical challenge addressed is the conversion between geographic coordinates (latitude/longitude) and screen pixel positions as the map pans and zooms. The project function handles this by converting each data point's coordinates through Leaflet's latLngToLayerPoint method, which automatically keeps the dots aligned with the map tiles during any user interaction. The example includes a sample dataset (ebola.json) containing geographic points with country information, primarily focused on locations in Guinea and the Democratic Republic of the Congo. This particular fork uses d3.csv() to load the data, with the code structured to accept coordinate data in a flexible format. This "setup" example serves as a foundation for building more complex geographic visualizations, combining the interactive panning and zooming of Leaflet maps with the data manipulation capabilities of d3. The code demonstrates the key pattern of projecting geographic coordinates to screen coordinates using Leaflet's latLngToLayerPoint function, then rendering them as SVG circles overlaid on the map. This pattern is particularly useful for visualizing point-based geographic data, such as disease outbreaks (the example data references Ebola cases from 2014) or other location-based datasets. The visualization displays a map centered on London (latitude 51.5119, longitude -0.1000) at zoom level 15. The map uses Mapbox's "streets" tiles with a maximum zoom of 18 and minimum zoom of 14. The embedded dataset (ebola.json) contains 18 points representing locations primarily in West African countries like Guinea and the Democratic Republic of the Congo, along with locations in the United States and Spain. The code sets up a Leaflet map with a Mapbox tileset, creates an SVG overlay layer on top of the map for d3, and defines a projection function to convert geographic coordinates to pixel positions. It then loads the ebola.json dataset. This setup demonstrates how to combine Leaflet's interactive map capabilities with D3's data-driven approach, allowing for the creation of geographically based visualizations such as dot maps. The author notes this approach is a slightly simpler alternative to Mike Bostock's classic post on using Leaflet with D3. Built with blockbuilder.org, this block is a base for developing richer geographic visualizations. The author forked it from enjalot's original block "dots on a map: setup". Potential additions to this visualization could include using the dots to represent different data points, color coding them based on categories, animating them, or connecting them with lines to show movement or relationships. The setup provides a clean, minimal example of how to integrate D3 for custom SVG overlays with the Leaflet mapping library via Mapbox. Since this is for a gallery, write a "description" of this example. Include the following: - What the visualization is - How it was made (i.e. the technology) - What it shows --- Write the 3-5 sentence description in a style that is consistent with the other descriptions in the gallery. Do not include any info about the data or the author. Keep it short. This example demonstrates a minimal yet flexible setup for combining the Leaflet mapping library with D3.js to place dots on a map. It uses a lightweight SVG overlay managed by D3 on top of a Mapbox-powered Leaflet map, providing a clean base for geographically based visualizations. The map is centered on London with a modest zoom level, and geographic coordinates are projected to pixel positions for accurate dot placement. This setup is particularly useful as a foundation for more complex interactive maps, and the example includes a sample dataset of geographic points for reference.

Feb 23, 2017