via:geojson.io

100%

via:geojson.io

✓ Published0🌍 Public

Last edited Aug 18, 2013

Created on Aug 18, 2013

This visualization maps ship locations from a GeoJSON FeatureCollection, plotting each vessel as a point on a geographic backdrop. It shows the spatial distribution of maritime traffic across various years, with each point encoded by coordinates and labeled with ship name and voyage date. The map is rendered using D3.js, leveraging `d3.geoPath` for map projection and `d3.forceSimulation` to adjust label or point placement, while the raw GeoJSON data is parsed directly. The visualization uses a Canvas-based rendering approach, with `getImageData` potentially used for pixel-level interactions or distance queries.

AI-generated description

Similar vizzes

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

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

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

71% match

Loading thumbnail…

Gist 9c71a22865403f89b4fad8c8cba86cbd

This visualization maps 282,322 historical ship logbook entries from the CLIWOC21 dataset, displaying their geographic positions and associated meteorological and navigational attributes. Using GeoPandas to read the GeoPackage file and MovingPandas for trajectory analysis, the notebook loads and inspects the data’s coordinate reference system (EPSG:4326) before plotting. The map reveals global shipping routes and weather observations, with each point representing a recorded position, while the extensive column list—covering variables like wind speed, temperature, and ship details—highlights the dataset’s richness for studying historical climate and maritime conditions.

FFrieseWoudloper

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

70% match

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

70% match

Loading thumbnail…

Untitled

This visualization combines an interactive map of shipwrecks with a force-based clustering algorithm to reveal spatial patterns in maritime losses. It overlays circles on an Ocean Basemap, with each circle representing a shipwreck; as users zoom, the circles coalesce into larger clusters labeled with their count of wrecks. The code uses D3 v5, d3-cluster, d3-tile, and d3.geoMercator for projection and tile loading, rendering the basemap as SVG images and the circles on a canvas via `ctx.arc`. The data comes from a `shipwrecks.csv` file, with zoom and pan handled through d3.zoom.

KKrishu

69% match

Loading thumbnail…

Gist bea3b68601c5004145624bdb03eaa43e

This example maps oceanographic CTD (conductivity, temperature, depth) sampling locations along the British Columbia coast and offshore Pacific. A GeoJSON MultiPoint dataset feeds a D3 map using `d3.geoPath` with a TopoJSON basemap for landmasses. Points cluster tightly near the continental shelf and along a repeating offshore grid, while a supplementary CSV (`proflocations.csv`) suggests profile station coordinates. The visualization shows the spatial distribution of oceanographic measurements, highlighting dense nearshore sampling versus broader offshore transects, rendered as a static point-layer over geographic context.

MMbrownshoes

69% match