Skip to main content
100%

Transat Jacques Vabre

✓ Published0🌍 Public
Aaangelot
Last edited Nov 17, 2017
Created on Nov 17, 2017

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

race results

This visualization maps race results by plotting each runner's finishing position against their time. Circles are placed along the x-axis by position and along the y-axis by minutes extracted from the time string (split on ':'), with a fixed radius of 4 pixels and a teal fill. Built with D3 v4 and SVG, it loads data from a TSV file listing position, name, sex, and time, encoding each runner as a circle. The y-coordinate is computed by multiplying the minute component of the time by 5, creating a vertical spread of finish times relative to rank.

Aandrewcowley
70% match
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
69% match
Loading thumbnail…

Data Viz Course

This scatterplot displays the relationship between the number of trains that ran and the number of delayed trains across various TGV routes, colored by rail axis (e.g., Atlantique, Sud-Est). It uses a D3.js v4 SVG rendering with a Vue framework, featuring animated circles and a tooltip that reveals the monthly regularity percentage on hover, sourced from a semicolon-delimited CSV file.

CCernewein
67% 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
67% match
Loading thumbnail…

projet v20

This visualization tracks the progress of tennis players through a tournament, plotting the difference in their ranking against their opponents at each round. It shows the trajectory of individual players with lines, where wins and losses are marked, and a reset button allows the view to be refreshed. The visualization is built with D3 version 3 and uses SVG for rendering, with animation for interactive feedback. Data is loaded from CSV files containing tournament results, and the code uses D3's `d3.csv` function to parse the data, while custom logic calculates ranking differences.

NNaram22
67% 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
67% match
Loading thumbnail…

projet v22

This visualization shows the ranking differences between winners and losers across the rounds of a Grand Slam tennis tournament, with each player represented as a line tracking their progress from the first round through the finals. The SVG chart uses two line styles—a solid steelblue line for wins and a dashed line for losses—and includes a reset button to reinitialize the animation. Built with D3 v3, the code loads ATP match data from a CSV file, parses player rankings, and constructs a parallel-coordinates-style plot with an interactive tooltip.

NNaram22
67% match
Loading thumbnail…

Svelte + D3: Line (II)

The chart displays daily Atlantic sea surface temperatures from 1982 to 2024, with each year drawn as its own line. Recent years are highlighted—2024 in blue and 2023 in pink—while older years appear as faint white strokes, emphasizing the temperature trajectory over time. Built with Svelte, it uses D3's `csv` and `autoType` to load data, `scaleLinear`, `extent`, and `line` with `curveCatmullRom` for the paths, and `groups` to structure lines by year. The SVG renders against a dark gradient background, with an overlay legend identifying the color coding.

MMatthias Stahl
67% match