Skip to main content
SimilarExport ZIP
100%

ebola map w/checkboxes

✓ Published0🌍 Public
BBrieLewis
Last edited Feb 28, 2017
Created on Feb 28, 2017

This map visualization displays the locations of Ebola cases across several countries, with points plotted on a Leaflet map using Mapbox tiles and D3.js. The interactive element consists of checkbox filters for country selection, letting viewers toggle the visibility of markers for the United States, the Democratic Republic of the Congo, and other affected regions. The rendering uses SVG circles positioned via geographic coordinates from an external GeoJSON file, providing a straightforward geographic overview of outbreak locations. The animation and interactivity are minimal, focusing on the clear display of spatial data points and country-based filtering.

AI-generated description

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 <a href='http://bl.ocks.org/enjalot/'>enjalot</a>'s block: <a href='http://bl.ocks.org/enjalot/18cb7a77b2d9de597b86'>dots on a map: setup</a>

forked from <a href='http://bl.ocks.org/BrieLewis/'>BrieLewis</a>'s block: <a href='http://bl.ocks.org/BrieLewis/581694b01133def1d45d91348bf04125'>ebola map</a>

forked from <a href='http://bl.ocks.org/BrieLewis/'>BrieLewis</a>'s block: <a href='http://bl.ocks.org/BrieLewis/d26ab4bec45f23a03ed6423556e65b3b'>ebola map</a>

mit Licensed

Similar vizzes

Loading thumbnail…

ebola cases with checkboxes modified

An interactive map visualizes the spread of Ebola cases, with reports from Guinea, the Democratic Republic of the Congo, Spain, and the United States. Users toggle checkboxes for each country to show or hide the corresponding case locations on the map. The visualization combines the Mapbox.js library for the base map with D3.js for rendering and animating the case markers as orange circles. The map includes a zoom and pan control, and the data comes from a local JSON file containing geographic coordinates.

GGeneExplorer
92% match
Loading thumbnail…

ebola cases

This interactive map visualizes the geographic distribution of Ebola cases using a Leaflet-powered SVG overlay. Points mark affected locations across Guinea, the Democratic Republic of the Congo, the United States, and Spain, loaded from an external GeoJSON feature collection. The map uses Mapbox tiles with D3-rendered SVG circles to represent case locations, while checkboxes above the map allow users to toggle visibility for cases in the DRC, Guinea, or Liberia. The visualization combines geographic context with an interactive filtering interface to explore outbreak data across countries.

BBrieLewis
92% match
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.

BBrieLewis
92% match
Loading thumbnail…

ebola map

This interactive map visualizes the spread of Ebola cases, plotting individual locations as dots on a tiled satellite basemap. The geographic coordinates (longitude, latitude) of each case are stored in a GeoJSON FeatureCollection, with properties indicating the country and sometimes a specific address or town (e.g., "Dallas, TX", "Gueckedou", "Boende moke"). Rendered as an animated SVG overlay on a Leaflet map, the visualization supports zooming and panning. The map is initialized to a world view centered at [20,-37] with a zoom level of 3, and the D3-selected SVG layer is synced with Leaflet's overlay pane to ensure that the points remain correctly positioned as users interact with the map. The points are plotted based on their latitude and longitude coordinates from the dataset, with labels providing the location name and country. This example demonstrates a straightforward pattern for combining Leaflet's interactive map controls with D3's data-driven SVG rendering, useful for geographically distributed point data like disease outbreak locations.

BBrieLewis
88% match
Loading thumbnail…

ebola cases

An interactive map plots reported Ebola cases as animated dots across Western Africa and beyond, using real-world geographic coordinates from a GeoJSON dataset. The visualization combines Leaflet with Mapbox for the base map and D3.js for the dynamic overlay, placing each case as a circle that expands on load. Users can toggle visibility by country using checkboxes, while the map supports zooming and panning with the dots repositioning in sync via D3's projection logic.

KKunnyKou
88% match
Loading thumbnail…

dots on map for ebola cases

This visualization plots Ebola case locations as animated dots on an interactive Mapbox map. Using Leaflet with a Mapbox.js tile layer, D3.js projects geographic coordinates from a GeoJSON file into screen positions, rendering circles that expand from radius 1 to 6 pixels. The map supports zoom and pan, with the SVG overlay repositioned dynamically through Leaflet's viewreset and move events.

GGeneExplorer
86% match
Loading thumbnail…

ebola cases

This interactive map plots Ebola cases as cyan dots over satellite imagery, with each dot representing a reported location across multiple countries, including Guinea, the Democratic Republic of the Congo, Spain, and the United States. The visualization combines D3.js with Mapbox’s Leaflet library, using a custom SVG overlay that projects geographic coordinates into pixel positions via `map.latLngToLayerPoint`. Dots animate from a small radius to a larger size, and the map re-renders positions on zoom or pan events. The data comes from a GeoJSON FeatureCollection containing point geometries with country and address attributes.

KKunnyKou
86% match
Loading thumbnail…

Simple Mapping- Ebola

This interactive map visualizes the locations of Ebola cases, displayed as animated dots on a Mapbox base layer. The visualization plots individual data points from a GeoJSON file on a world map, with each circle representing a case location. The code uses D3.js to handle data loading and SVG circle creation, while Mapbox.js manages the map rendering and projection. As users pan or zoom, the map triggers a render function that recalculates the pixel coordinates of each dot, ensuring they stay aligned with their geographic positions.

LLisaPicado
86% match