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." }