Skip to main content
SimilarExport ZIP
100%

proyecto Jerónimo

✓ Published0🌍 Public
MMarcosHiramRojasSosa
Last edited Mar 22, 2017
Created on Mar 22, 2017

This example combines Mapbox GL with D3 to render a small set of geographic points from a CSV file (dots.csv) as circles on an interactive map. A custom circle selector component allows users to click and drag to define a circular region, highlighting all dots that fall within it by changing their fill color. The code uses D3's data join and transitions for animations, alongside Mapbox GL's map projection and viewreset/move events for re-rendering.

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>

mit Licensed

Similar vizzes

Loading thumbnail…

mapa proyectos 7

This interactive map visualization displays two geographic points as dots on a Mapbox GL map, centered on a specified location in Mexico. Users can draw a circular selection region directly on the map using a custom `circleSelector` component, which uses D3's projection and inverse projection functions to translate between screen coordinates and longitude/latitude. The dots' colors change from teal to pink when they fall within the selection circle, providing immediate visual feedback based on the user's spatial query. The map uses Mapbox GL and D3.js, and renders data from a simple CSV file containing latitude and longitude coordinates.

MMarcosHiramRojasSosa
79% match
Loading thumbnail…

dots on a map-gl: circle

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.

BBenHeubl
75% match
Loading thumbnail…

fresh block

Three points from a CSV file are plotted as glowing cyan dots on an interactive Mapbox map centered on a location in Mexico. The visualization uses Mapbox GL to render the base map and D3.js to overlay an SVG layer, projecting geographic coordinates to screen positions. Each dot animates from a small radius to a larger one using D3 transitions. The dots re-project whenever the map is panned or zoomed, ensuring they remain anchored to their geographic locations.

MMarcosHiramRojasSosa
73% match
Loading thumbnail…

d3-composite-projections test

This example demonstrates an interactive map of Spain’s autonomous regions using the d3-composite-projections library to combine separate projections into a single visualization. It loads preprojected TopoJSON data from the es-atlas package and renders boundaries with `d3.geoPath`, while a dashed brown overlay marks the composite projection’s internal borders. As the user moves the mouse, the code uses `projection.invert` to display geographic coordinates and appends fading circles at each cursor position, using SVG transitions to shrink them. Points outside the valid projection area trigger an error message instead of drawing.

LLuisSevillano
70% match
Loading thumbnail…

My map

This example presents a choropleth-style map of a single region, likely a state, rendered as a filled polygon in a light blue SVG container. The map uses the Mercator projection and d3.geoPath to draw geographic boundaries from a GeoJSON file, while d3.csv loads city data for potential point markers. The visualization is built with D3 v5 and styled as a responsive SVG using a viewBox, with a custom CSS class for layout. The code demonstrates loading external data files and projecting them onto a large canvas.

Aatree-rohit
70% 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
69% match
Loading thumbnail…

A D3 Map, points plotted with canvas instead of SVG

This example shows a zoomable map of Manhattan with tree locations from a CSV file, plotted as red circles. It uses D3 v3 for map tile fetching and projection, while rendering the points onto a Canvas 2D context instead of SVG for performance. The code demonstrates a hybrid approach where D3's `d3.geo.tile` and `d3.geo.mercator` handle geographic transforms, and the canvas context draws arcs at projected coordinates. Zooming and panning trigger redraws, and the mouse position is displayed with latitude/longitude.

SShweta-tech
69% match
Loading thumbnail…

Gist 6245338

This visualization maps three Spanish cities as individual points on a geographic projection, with each point represented by a small dot. It uses a custom map projection and renders the GeoJSON features as a filled landmass, while the city markers are drawn as circles. The code relies on `d3.geoPath` to project and draw the map geometry, and `d3.forceSimulation` is not used here; instead, the points are placed directly at their projected coordinates. The canvas API (`getContext('2d')`) handles all rendering, and the map’s geographic boundaries come from the embedded `map.geojson` FeatureCollection.

PPhilippe Rivière
69% match