Gist 6245338

100%

✓ Published0🌍 Public

Last edited Aug 15, 2013

Created on Aug 15, 2013

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.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 54a4da81bb77308303fc5537ac587fe5

This example creates a minimal map visualization using a single GeoJSON Point feature representing the Dinagat Islands, positioned at coordinates (-86.8098, 36.1442). It first renders the point’s geometry using `d3.geoPath` and a standard geographic projection, then applies `d3.forceSimulation` to animate the point’s position, demonstrating how a fixed geographic coordinate can be displaced by a force-directed layout. The code uses both Canvas and SVG elements, with the simulation updating the point’s screen location each tick while the underlying projection remains static.

CCliffordAnderson

74% match

Loading thumbnail…

My map

This map displays global cities as labeled points overlaid on a Mercator-projected world map. It uses d3.geoPath to render country boundaries from a GeoJSON file and d3.geoMercator to project coordinates. City data from a CSV file is plotted with SVG circles and text labels. The visualization is built with React, uses SVG rendering, and loads both datasets via Promise.all.

VVineel Gannu

73% match

Loading thumbnail…

via:geojson.io

This example uses a geospatial dataset of rectangular polygons to visualize named regions across South America and West Africa. It renders a map from a GeoJSON FeatureCollection, with each polygon’s properties labeling its area and name. The visualization relies on a mapping library to project and draw the geometry, while the interaction between overlapping regions (like the nested “South America Pacific” and “Atlantic” areas) is shown through distinct filled shapes. The code likely employs `d3.geoPath` for path generation and Canvas or SVG rendering, with the raw coordinate data directly defining the boundaries. The source is a gist, and the author is Fil.

PPhilippe Rivière

73% match

Loading thumbnail…

Gist bb974dcf54acc39a81cb60d79bf0aa5c

This example plots earthquake epicenters as points on a map using GeoJSON features. It renders the geographic coordinates with `d3.geoPath` and a map projection, while each point is positioned via `d3.forceSimulation` to avoid overlapping labels. The visualization shows five recent seismic events, with the primary ID as magnitude and the secondary ID as a location description. The code uses D3’s force-directed layout to spread the point markers, and the map background likely comes from a geographic shapefile or topojson layer, making the data immediately readable by region.

JJn1532

73% match

Loading thumbnail…

Points on a Map

This example displays global city locations as semi-transparent circles on a natural Earth map projection. It renders the world using `geoPath` and `geoNaturalEarth1` from d3-geo, with graticules and country interiors overlaid via TopoJSON world atlas data. City coordinates are projected from latitude/longitude pairs using the same projection, drawing each point as an SVG circle. The data comes from the Data Canvas Sense Your City Dataset, loaded through d3.csv, with React managing the component state and SVG rendering.

MMichael Bergerson

73% match

Loading thumbnail…

Gist 34bad0b124f4effdf99d5555cb3222d8

This example shows how spatial relationships between geographic features can be explored through an interactive map. It uses D3.js with `d3.geoPath` to render country outlines from a GeoJSON source, while a force-directed layout via `d3.forceSimulation` positions non-overlapping markers for data points. The visualization computes marker placement on a Canvas, reading pixel colors with `getImageData` to detect land versus water and ensure points remain on landmasses. Hover interactions trigger a tooltip and highlight neighboring regions, with smooth transitions handled by `transition.attrTween`. The data originates from a public GitHub gist and is embedded in a Power BI report, where the canvas is updated on each zoom or pan event.

HHugoberry

73% match

Loading thumbnail…

Gist 10676346

This map displays labeled points from a GeoJSON file, plotting locations like "Internet Archive," "China," and "New York" at their geographic coordinates. The visualization likely renders a large-scale point cloud, with overlapping labels suggesting a messy or aggregated dataset. Using a mapping library, likely D3.js with `d3.geoPath` for drawing map features and standard SVG or Canvas techniques for placing text labels, the code creates a simple geographical scatter plot. The rendering emphasizes the spatial distribution of these named places across the globe.

CCliffordAnderson

73% match

Loading thumbnail…

Gist 9bd5ca69fc039cff50383b3a3459858b

This example shows how to render a spatial distribution of data points on a map using D3.js. It uses `d3.geoPath` to draw geographic boundaries and `d3.forceSimulation` to position overlapping points, while Canvas `getImageData` is used to read pixel data for collision detection. The visualization reads from a PGP-encrypted text file, suggesting the underlying dataset is not directly accessible. The code relies on D3’s selection and transition APIs to animate point movements, and it appears to use a projection to convert latitude and longitude coordinates into screen positions. The result is an interactive scatterplot overlaid on a map, with points dynamically adjusting to avoid overlap.

CCliffordAnderson

72% match