dots on a map-gl: circle

100%

dots on a map-gl: circle

✓ Published0🌍 Public

Last edited Jun 17, 2016

Created on Jun 17, 2016

Dots on a Mapbox GL map visualize geographic points from a CSV file, with each dot representing a lat/lng coordinate. Users can click and drag to draw a circle around clusters of dots; dots inside the circle change color, while those outside remain blue. Built with d3 and Mapbox GL JS, the visualization uses map events to re-project SVG circles onto the canvas as the view changes. A custom circleSelector component handles the interactive selection logic, projecting mouse positions to geographic coordinates.

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-gl</a>

forked from <a href='http://bl.ocks.org/enjalot/'>enjalot</a>'s block: <a href='http://bl.ocks.org/enjalot/dc1ce756527c072885dc'>dots on a map-gl: circle</a>

forked from <a href='http://bl.ocks.org/enjalot/'>enjalot</a>'s block: <a href='http://bl.ocks.org/enjalot/0912e1962ed512093895'>dots on a map-gl: circle</a>

Similar vizzes

Loading thumbnail…

dots on a map: setup

A Leaflet map displays a set of circular dots, each colored teal with a darker stroke, positioned over a street map of London. The visualization is built by combining the Leaflet mapping library with D3.js, which manages the SVG layer and handles data binding from a CSV file containing latitude and longitude coordinates. The dots animate their radius from 1 to 6 pixels via a D3 transition. On map pan or zoom, the projection and positions are recalculated and re-rendered, keeping the dots aligned with the geographic locations.

KKerchoo

77% match

Loading thumbnail…

Red Dots On A Map

This visualization renders a map of the United States covered in red dots, with the number of dots dynamically displayed in the corner. It uses Poisson-disc sampling to distribute non-overlapping dots across landmasses, refined by a point-in-polygon test to ensure dots remain within state boundaries. The code relies on d3.geo.albersUsa for projection, d3.geo.path for drawing geographic features, and a Canvas context for rendering. The user can adjust the dot radius using a mousewheel or the dat.GUI slider, which triggers redraws.

FFrissAnalytics

72% match

Loading thumbnail…

Goed voorbeeld

A clustered dot plot arranges 50 circles around a central point, with each circle's distance from the center determined by how its randomly generated count differs from a selected circle's count. Clicking any circle increments its count and causes it to move to the center while all other circles reposition based on the new distance metric. The visualization uses d3.scaleSqrt for sizing, d3.scaleLinear for both radial distance and color mapping from steelblue to red, and transitions with an 800-millisecond duration to animate the repositioning. An SVG container with concentric gray guide rings provides a static backdrop for the interactive data.

GGJHazelaar

71% match

Loading thumbnail…

Points on a Map

This example displays a world map with small, semi-transparent dots marking cities with populations over 50,000. The map is rendered as SVG using D3’s `geoNaturalEarth1` projection, with landmasses, graticules, and country interiors drawn via `geoPath`. City locations are projected from latitude and longitude coordinates loaded from a CSV file, with each point drawn as a circle. The React application uses custom hooks to fetch the world atlas and city data, with styling applied through CSS classes.

Jjwlam83

71% match

Loading thumbnail…

circles on the map

This visualization displays a world map with countries colored green or red based on data from a CSV file, indicating a binary attribute for the year 2020. The map uses the D3.js library with a `d3.geoNaturalEarth1` projection and `d3.geoPath` to render geographic features. TopoJSON data from the visionscarto-world-atlas is merged with the CSV data, and an SVG path is generated for each country. Zoom functionality is enabled via `d3.zoom`.

Nntech9613

71% match

Loading thumbnail…

Points on a Map

This visualization displays a world map with circles representing the populations of cities, scaled using a square root scale from D3. The map, rendered as SVG in a React app, uses the D3 `geoNaturalEarth1` projection to place points. Geographic data comes from the world-atlas TopoJSON via `topojson.feature` and `topojson.mesh`, while city data loads from a CSV. The graticule, sphere, and land outlines are styled via CSS, and the semi-transparent teal circles have opacity set to 0.3.

Vvmonney

71% match

Loading thumbnail…

MB zoom circles in and out

This example demonstrates a zoomable map interface where clicking a circle smoothly scales and pans the view to center on that circle, with a reset option to return to the initial state. It uses D3 v4 with SVG rendering and animation, relying on `d3.zoom` and `d3.zoomIdentity` for transform handling and `transition.call(zoom.transform)` for the animated effect. The data is a static array of circle objects with coordinates, radius, and colors, while a topojson feature layer provides the underlying map context. The background rectangle enables click-to-reset functionality, and strokes adjust dynamically based on zoom scale.

IIgathi

71% match

Loading thumbnail…

Points on a Map

This example displays a world map with dots marking cities, sized proportionally to population via a square-root scale. The map uses a Natural Earth projection and includes graticules and country borders. The visualization is built with React and D3 v5, leveraging `geoNaturalEarth1`, `geoPath`, and `geoGraticule` for geographic rendering, while city data comes from the Data Canvas Sense Your City dataset. Circles are positioned using the projection and styled with opacity.

CChira Cezara Victoria

71% match