Map TDF wins

100%

✓ Published0🌍 Public

Last edited May 12, 2024

Created on May 11, 2024

This example juxtaposes a world map with a scatter plot to explore Tour de France victories by country. Hovering over a country on the map highlights all its associated win-dots, while hovering over a dot highlights its country and enlarges the dot. The visualization uses `d3.geoEqualEarth` and `d3.geoPath` for the map, with a log color scale for country win counts. The scatter plot uses `d3.scaleLinear` and `d3.scaleOrdinal` axes, with interactive `mouseover` and `mouseleave` events linking the two views. Data includes world GeoJSON and cleaned TDF rider statistics.

AI-generated description

This is another part of my tour de france project.

This file is not finalized at all but is more of a proof on concept. Try mousing over dots and countries to see how the linking works. Mosuing over a country selects all from that country, whereas a dot, slects just that dot and the country.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Chloropleth - TDF

This visualization pairs a choropleth map with a scatterplot to explore Tour de France rider data. The map shades countries by the number of riders, while the scatterplot plots winning margin against year. Hovering over either a country or a rider dot highlights corresponding elements across both views using shared IDs and D3 selections. The code uses `d3.geoEqualEarth` and `d3.geoPath` for the map, with SVG rendering driven by `d3.csv` and `d3.json` data loading.

Gg_beck@coloradocollege.edu

83% match

Loading thumbnail…

Map and Interactive Bar Chart

This interactive visualization explores the dominance of different nations in the Tour de France across time. A choropleth map and bar chart update synchronously as users drag a slider from 1903 to 2023, revealing cumulative wins per country. The map uses `d3.geoPath` with a `d3.geoEqualEarth` projection, while bars employ `d3.scaleBand` and `d3.scaleOrdinal`. Hovering highlights matching countries and bars, with a tooltip showing year, country, and win count. Data comes from CSV and GeoJSON sources. Non-held years display a notation.

Gg_beck@coloradocollege.edu

81% match

Loading thumbnail…

interactive Bar Chart

This interactive bar chart illustrates the cumulative number of Tour de France wins per country from 1903 to 2023. A slider allows viewers to select a specific year, dynamically updating the horizontal bars to reflect the total wins for each nation up to that point, with years when the race was not held clearly annotated. The visualization uses the D3.js v6 library, leveraging `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` for chart construction. Bar transitions are animated via the `.transition()` method, and the data originates from a CSV file containing country-wise win totals per year.

Gg_beck@coloradocollege.edu

76% match

Loading thumbnail…

Interactive Line, TDF time gaps

This interactive scatterplot visualizes time gaps between first place and other positions in the Tour de France from 1903 to 2023, with data sourced from a GitHub-hosted CSV. Users select which gap to display via a dropdown menu, and each dot represents a race year with tooltips revealing winner details and converted time formats. The visualization uses d3.v7 with SVG rendering, d3.line for trend paths, d3.scaleLinear for axes, and d3.axisBottom/axisLeft for tick marks. Manual Y-axis range inputs allow dynamic rescaling, though the underlying data spans large temporal and numerical domains.

Gg_beck@coloradocollege.edu

74% match

Loading thumbnail…

Final Submission For DataViz

This visualization combines a world map and an animated scatterplot to explore chess player transfer data. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` with TopoJSON world-atlas data, allowing users to select up to 20 countries. The scatterplot, rendered with SVG circles, plots selected quantitative attributes like ELO ratings or birth year, with transitions from `d3.transition`. Menu selectors and brushing filter the data, updating map highlights and the plot’s title. The dataset is loaded via `d3.json` from a GitHub gist.

PPatrick-Houlihan

71% match

Loading thumbnail…

Let's make a map with D3.js!

This example shows an interactive world map built with D3.js v5, displaying countries as green SVG paths with black borders that turn red on hover. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, with country boundaries loaded from a TopoJSON file (world-atlas 50m) and country names from a matching TSV file. Zooming is enabled through d3.zoom, which applies a transform to the map group. The sphere background is rendered as a blue path, and each country includes a tooltip title showing its name.

YYoram

70% match

Loading thumbnail…

Fork of Making a Bar Chart

A slider-driven bar chart displays the number of Tour de France wins by country for a selected year, with data from a GitHub-hosted CSV. The visualization updates in response to slider input, re-rendering the chart with a new year’s dataset via D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`. SVG rectangles represent each country’s win count, styled with steelblue fill, while the slider’s `change` event triggers a redraw using the stored global data.

Gg_beck@coloradocollege.edu

70% match

Loading thumbnail…

Interactive Map with d3.js

This example shows an interactive world map rendered as SVG, with countries colored dark gray on a light sphere and highlighted in red on hover. The visualization uses d3.geoEqualEarth projection with d3.geoPath to draw country boundaries from TopoJSON data, while country names are loaded from a TSV file and displayed as tooltips via SVG title elements. Pan and zoom are enabled through d3.zoom, with scale limits between 1x and 8x, and the map renders using the world-atlas dataset at 110m resolution.

MMaciek Sitkowski

70% match