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.