Untitled

100%

✓ Published0🌍 Public

Last edited Sep 14, 2020

Created on Sep 14, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This visualization maps migrant casualties across the Mediterranean, plotting individual events by geographic coordinates and encoding severity through point size or opacity. It uses SVG for rendering and loads D3 v5 via `select` and `csv` to parse the dataset from `data.csv`. The map displays location, date, and casualty counts for each reported incident, sourced from news reports and route classifications. However, the current code only logs the data to the console, not yet rendering the visual elements.

Kkartikaymanoj

76% match

Loading thumbnail…

Untitled

This visualization combines a bubble map with a date histogram to show the geographic distribution and temporal trends of migrant deaths and disappearances. The map uses the Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, plotting circles scaled by `d3.scaleSqrt` according to the "Total Dead and Missing" count, while the histogram bins the same data by month using `d3.bin` and `d3.timeMonths`. The map overlays graticules and country boundaries from the World Atlas TopoJSON, with data sourced from the Missing Migrants Project CSV.

Mmaavwin6

71% match

Loading thumbnail…

Untitled

A treemap-style bar chart visualizes shipping statistics from a CSV file, showing categorical values like department, description, and item value. The visualization uses D3.js v4 with jQuery to load and parse the `ShippingStats.csv` data, then renders an interactive SVG with mouse-hover effects that highlight bars by expanding their stroke and dimensions. The x-axis labels are dynamically mapped from caption data, while scales are built using `d3.scale.ordinal` and `d3.scale.linear`, and axes are created via `d3.svg.axis`.

Aahemdalssafi

70% match

Loading thumbnail…

via:geojson.io

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.

PPhilippe Rivière

69% match

Loading thumbnail…

Untitled

This interactive visualization presents multiple coordinated views of Titanic passenger data, including gender and survival pie charts alongside age and fare histograms. Users can filter by passenger class via dropdown, while clicking pie chart slices triggers linked selections across all views. The code uses D3.js with `d3.pie`, `d3.arc`, `d3.histogram`, and `transition.attrTween` for animated updates, rendered as SVG. Data originates from the Titanic passenger manifest, though the README references a different population dataset without visible integration.

Wwishcsdev

69% match

Loading thumbnail…

Untitled

This interactive scatter plot displays three clusters of points, colored by category, and allows users to brush a region to zoom into that area. The visualization uses D3 v4 to generate data from a normal distribution, render SVG circles, and implement brushing with `d3.brush`. Axes are drawn with `d3.axisTop` and `d3.axisRight`, and zoom animations are handled via `svg.transition()`. The code also references a `data.csv` file with population figures, though the chart itself visualizes synthetic points.

Pprincit

69% match

Loading thumbnail…

Untitled

This interactive visualization displays global migration patterns using an interactive globe. Force-directed layout drives the placement of circular nodes representing countries, with their size tied to migration counts. The visualization employs the h3-js library for geo-indexing and d3.js’s force simulation to arrange the network. Users can hover over nodes to reveal connected migration flows, while the globe can be rotated and zoomed to explore regional patterns.

Aarun-subba

69% match

Loading thumbnail…

Untitled

This example visualizes earthquake locations using a global map rendered with D3’s `d3.geoPath` and `d3.geoOrthographic` projections. It plots seismic events as circles whose size and color encode magnitude, with a color scale from `d3.scaleSequential`. The visualization updates over time by cycling through timestamped data, using `d3.transition` to animate circle radius changes. It relies on the TopoJSON world atlas for geographic boundaries and fetches earthquake data from a local CSV file.

Ddevansh1407

69% match