ship

100%

✓ Published0🌍 Public

Last edited Jan 5, 2018

Created on Jan 5, 2018

A ship icon follows a recorded hurricane path across an equirectangular map of the world, with its track animated as a colored line. The visualization uses D3 v3 with SVG and animation, loading ship coordinates from a CSV and world geography from TopoJSON. The path is drawn with a cardinal interpolation and a dasharray effect that animates the line's progress, while the ship icon moves along the route, changing color through a ColorBrewer YlOrRd quantile scale as it travels. A drop-shadow filter and graticule overlay enhance the visual presentation.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

ship4

This visualization animates ship routes on an equirectangular world map, tracing journeys as dashed red arcs between source and destination ports. The map displays land masses in gray with country boundaries outlined in white. Using a dataset of ship voyages, the animation cycles through 50 route pairs every 10 milliseconds, drawing each as a line with a stroke-dash animation that fades in and out over 2 seconds. Small circles mark the source and destination ports, fading in and out with the arcs. The visualization is built with D3 v3 and TopoJSON, rendering as SVG with animated transitions.

Aanojoual

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

72% match

Loading thumbnail…

Chips and bots

Ship tracks from 1776–77 for the vessel ANDALUZ are drawn as animated polylines on a geographic map, with each voyage segment traced sequentially in SVG. The visualization encodes latitude/longitude points over time, using animation to reveal the ship’s path as it travels across the Atlantic. Dots move along the route, creating a sense of movement as the position updates by date. The map background and ship tracks are rendered in D3 v4, with the data parsed from a CSV of dated coordinates. The animation highlights the vessel's progress and pauses, making the temporal dimension of the historical voyage tangible.

Aanojoual

72% match

Loading thumbnail…

ship2

A placeholder visualization displays a single line of instructional text in a monospace font on a blank SVG canvas. The code creates an SVG element with fixed dimensions and appends a text element using the D3 v4 library, setting its position and styling directly. No data is loaded or processed; the example simply demonstrates the basic setup of an SVG container and text rendering through D3’s selection and append methods. The visualization serves as a starting point for users to edit and build upon.

Aanojoual

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

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

Line ships at the Battle of Trafalgar

This visualization displays the ships of the line at the Battle of Trafalgar, showing each vessel’s complement or total casualties as horizontal bars colored by fleet affiliation. A dropdown menu toggles between the two numeric attributes. Built with React and D3 v6, it uses `scaleBand` and `scaleLinear` for positioning, with SVG rectangles rendered for each ship. Data is loaded from a CSV via `d3.csv`, and interactive hover tooltips display ship name, value, and fate.

Ttomahawk-jupiter

69% match

Loading thumbnail…

Document

This example analyzes British shipping routes and their environmental impact on major cities. It presents four interactive SVG visualizations: a map of the UK with city pollution levels, an arc chart ranking ship categories by sailing mileage, a line chart showing hourly sailing distances, and a scatter plot relating trip duration to distance. The code loads AIS track data and Emission data, using D3 modules such as `d3.nest`, `d3.sum`, and `d3.scaleBand` for aggregation, plus `d3.arc`, `d3.line`, and `d3.geoPath` for rendering, with transitions animating the arc chart.

Mmingchao080910

69% match