mapa proyectos 7

100%

mapa proyectos 7

✓ Published0🌍 Public

Last edited Aug 31, 2017

Created on Aug 31, 2017

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.

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>

forked from <a href='http://bl.ocks.org/MarcosHiramRojasSosa/'>MarcosHiramRojasSosa</a>'s block: <a href='http://bl.ocks.org/MarcosHiramRojasSosa/1d504c79320edecd39135741e30d2b00'>proyecto Jerónimo</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/2614a849907e1c53d0c5f89d6783fcc3'>proyecto Jerónimo</a>

mit Licensed

Similar vizzes

Loading thumbnail…

proyecto Jerónimo

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.

MMarcosHiramRojasSosa

79% 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

75% 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

73% match

Loading thumbnail…

ICE-8 Mexico map

This interactive map displays the states and boundaries of Mexico, rendered using a Mercator projection from D3. The visualization shows the country’s geography as SVG paths, with a graticule overlay in blue and teal. Data for the map comes from ArcGIS, processed with Mapshaper to create a TopoJSON file. The example is built in React, using `d3.geoPath` from D3 v6 for the geographic projections, and `json()` to ingest the TopoJSON data.

JJasvitha Allamsetty

72% match

Loading thumbnail…

Mexico Map ( D3 & React )

This example displays a map of Mexico with its state boundaries, rendered as SVG paths using a Mercator projection. The visualization loads GeoJSON data from a gist, which was originally sourced from ArcGIS and processed with Mapshaper to extract state polygons. Using D3 v6 within a React component, the code applies `geoMercator` for projection and `geoPath` to generate the path data for each state feature. The map is centered on Mexico using coordinates [-102, 24], and the styling fills the states with a teal color while using light gray strokes for borders, with fonts sourced from Google's Poppins family.

AAndres de la Garza

71% match

Loading thumbnail…

Mexico Map

This example displays an interactive map of Mexico's regions, rendered as SVG paths using the D3.js `geoMercator` projection and `geoPath` function. The map is built with React, loading TopoJSON data from a GitHub gist via the `topojson` library's `feature` function. A graticule overlay uses the `geoGraticule` API, and the regions adopt a gray fill color from the CSS, with hover states that change the stroke to pink.

Ppavan0828

71% match

Loading thumbnail…

Mexico

Mexico’s municipalities are displayed as a dark choropleth map, using a conic conformal projection applied client-side. The visualization renders each municipality as an SVG path, with hover highlighting in orange; state and municipality boundaries are drawn as white lines. The code uses D3’s `d3.geo.path`, `d3.geo.conicConformal`, and `topojson` to create the map from the preprocessed `mx.json` TopoJSON file. The underlying data derives from INEGI’s 2010 municipal geographic database, simplified and converted via `ogr2ogr` and the TopoJSON build script.

Mmbostock

71% match

Loading thumbnail…

Map of Mexico

This visualization renders a choropleth-style map of Mexico using React and D3 v6, displaying the country’s twelve regions as olive-colored SVG paths from TopoJSON data. The map uses a `geoMercator` projection via `d3.geoPath`, with graticule lines overlaid in purple. Land regions respond to hover with a pink stroke, while missing data areas appear gray. The code loads geographic features from an external JSON URL using `d3.json` and `topojson.feature`, then passes them to the `Marks` component for rendering.

SSweetierams

71% match