Mapa de Actores y Proyectos en Territorio

100%

Mapa de Actores y Proyectos en Territorio

✓ Published0🌍 Public

Last edited Aug 1, 2018

Created on Aug 1, 2018

A map of actors and projects in Panama City visualizes a network of urban, environmental, and social initiatives overlaid on a Leaflet tile layer. Colored circles represent projects, plans, programs, and stakeholder types, with links drawn as lines; clicking a node reveals its connections by fading unrelated elements. The visualization uses d3.forceSimulation for layout, d3.drag for node movement, and D3 transitions for interactive opacity changes, while geographic coordinates pin nodes to the map via Leaflet’s SVG layer.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/pierreee1/'>pierreee1</a>'s block: <a href='http://bl.ocks.org/pierreee1/cacba454f35e6be936abd4d6e5462ec0'>nodos_mapa1</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Map Pan / Zoom with Cities v5

This map example displays world country boundaries and major global cities, with interactive pan and zoom functionality centered on the Pacific Ocean. The visualization uses d3.geoMercator for projection and d3.geoPath to render geographic features from a TopoJSON world file. City locations from a CSV dataset are plotted as red circles, each hyperlinked to a Google search. Users can apply d3.zoom with a scale extent of 1 to 8, transforming both paths and circles accordingly. The map is rendered as SVG elements within a d3 selection.

Dd3noob

66% match

Loading thumbnail…

Map Pan / Zoom with Cities and Text v5

This example displays an interactive map of the world centered on the Pacific, overlaid with red circular markers for eleven cities and their labels. Pan and zoom controls are implemented using the `d3.zoom` API, which applies SVG `transform` attributes to all map paths, circles, and text. The map geometry and city positions are projected using `d3.geoMercator` and `d3.geoPath`, with country outlines loaded from a TopoJSON file. City coordinates come from a CSV loaded via `d3.csv`, and text labels are placed above each marker, each linking to a web search.

Dd3noob

65% match

Loading thumbnail…

Map Pan / Zoom with Cities and Text v7

This example shows a world map centered on the Pacific with red city markers and text labels for each city, all of which can be panned and zoomed together. The map is rendered using D3 v7 with a Mercator projection and a topojson world dataset. City positions are projected from latitude and longitude coordinates loaded from a CSV file. D3’s zoom behavior applies a transform to the map paths, circles, and text, and each city label links to a Google search for its name.

Dd3noob

65% match

Loading thumbnail…

Map Pan / Zoom with Cities and Text v6

This D3.js (version 6) example displays a world map centered on the Pacific Ocean using a Mercator projection, with red circles marking cities from a CSV data file and city names as text labels. Each city is hyperlinked to a Google search for its name. The visualization supports pan and zoom interactions through the `d3.zoom` API, applying the zoom transform to the map paths, city circles, and text elements. The map geometry comes from a TopoJSON file processed with the `topojson` library, and all rendering uses SVG.

Dd3noob

64% match

Loading thumbnail…

Map Pan / Zoom with Cities v7

This example shows a pan-and-zoomable Mercator map of the world, centered on the Pacific Ocean, with city locations marked by red dots. The map uses an SVG rendering with countries styled as grey paths, and city coordinates are loaded from a CSV file containing airport codes, city names, and latitude/longitude values. Pan and zoom interactions are enabled through d3.zoom, which applies a transform to all map elements. The map itself is drawn using d3.geoPath with a d3.geoMercator projection, and world topology data is fetched as a JSON file, then converted via topojson’s feature function before being rendered.

Dd3noob

64% match

Loading thumbnail…

Map Pan / Zoom with Cities v6

This example shows a Mercator map of the world centered on the Pacific Ocean, with red circles marking eleven cities from a CSV file. Users can pan and zoom the entire map and city markers using the d3.zoom behavior, with a scale extent of 1 to 8. The map is rendered as SVG paths from a TopoJSON file via d3.geoPath, while city positions are projected using d3.geoMercator. Each city circle is wrapped in a link that opens a Google search for that city.

Dd3noob

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

63% match

Loading thumbnail…

Mapping : Part 2 - Cities

This example visualizes worldwide cities as semi-transparent teal dots layered over a natural Earth projection map. It uses d3.geoNaturalEarth1 and d3.geoPath to render landmasses, graticules, and interior boundaries from the world-atlas TopoJSON dataset, while city coordinates are plotted via d3.csv from a cleaned world cities dataset. The React component fetches both data sources asynchronously using useEffect, then projects each city’s longitude and latitude into SVG circles with fixed pixel radii.

Zzeeeeem

63% match