Chips and bots

100%

Chips and bots

✓ Published0🌍 Public

Last edited Jan 10, 2018

Created on Jan 9, 2018

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.

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

74% match

Loading thumbnail…

ship

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.

Aanojoual

72% match

Loading thumbnail…

Flight Animation

This animated visualization plots historic sailing routes from OpenFlights data as glowing yellow arcs on a dark Stamen toner map. Using OpenLayers and D3, each route is drawn progressively as a great-circle arc between its source and destination ports, with the line growing over time at a constant rate. Flights are added sequentially with a delay, creating a staggered animation as the arcs trace their paths across the globe. The map uses the EPSG:3857 projection and the animation runs continuously via OpenLayers' postcompose event, rendering each flight's partial trajectory frame by frame until complete.

Aanojoual

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

65% match

Loading thumbnail…

Transat Jacques Vabre

This visualization tracks the positions of racing sailboats in the Transat Jacques Vabre, plotting each vessel's latitude and longitude as points on an SVG map. It uses the D3 v4 library to render the race data from a semicolon-delimited CSV, encoding boat rank through color or label placement. The chart highlights the geographic spread of the fleet, with tooltips likely revealing boat name, crew, distance to finish, and speed. The minimalist design focuses on the spatial relationships between competitors at a single timestamp, emphasizing the race's tactical aspect.

Aaangelot

64% match

Loading thumbnail…

Force Layout Oceanic Routing

This example uses D3’s force simulation to compute animated ocean shipping routes between Lisbon, Luanda, and Colombo. A world map is drawn with a Mercator projection, and land masses are filled with a grid of fixed force nodes. Route waypoints are generated along straight-line paths between ports and connected with links; the simulation then lets these waypoints repel from land nodes, curving the routes around continents. Yellow lines visualize the force network during the simulation. After the simulation settles, a black cardinal spline is drawn through the waypoints and animated with a stroke-dashoffset transition to trace the final paths.

Aandrew-reid

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

63% match

Loading thumbnail…

Sailing

A serene sea scene rendered with SVG and animated using D3.js v6. The visualization depicts a sailboat with a brown hull, green triangular sail, and mast, floating on a deep blue ocean with white wave circles oscillating vertically via chained transitions with sinusoidal easing. Clouds drift horizontally across the sky using linear transitions, while simple black bird shapes flap through the air. The code constructs the scene procedurally, generating wave data with `d3.range` and `Math.sin`, and animates all elements using D3 transitions with recursive callbacks for infinite looping.

AAsrar Al Qassem

62% match