Map and Interactive Bar Chart

100%

Map and Interactive Bar Chart

✓ Published0🌍 Public

Last edited May 13, 2024

Created on May 12, 2024

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.

AI-generated description

I'm curious about the how dominate different nations have been in The Tour de France. This file contains a bar chart that updates as you move the time slider that shows the total number of wins per coutnry.

An additonal file for this project can be found here: <a href="https://vizhub.com/georgeb3ck/b27afe8ff3d74a778e813e40d88cc044">line chart</a>

MIT Licensed

Similar vizzes

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

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

83% match

Loading thumbnail…

Map TDF wins

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.

Gg_beck@coloradocollege.edu

81% match

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

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

77% match

Loading thumbnail…

Bar Chart Race

An animated bar chart race tracks total Summer Olympic medals earned by each country from 1896 onward. The visualization smoothly interpolates bar positions and widths between yearly data snapshots using D3 transitions applied to SVG rectangles, with a reusable join pattern for entering, updating, and exiting elements. A ticker and axis labels update along with the bars, driven by a data-driven keyframe generator. The chart also displays country name labels and animated value counts by leveraging D3’s `transition` and text-tweening, with a replay button to restart the sequence.

AAniketShahane

74% match

Loading thumbnail…

France Electoral and Immigration Map

This interactive visualization compares COVID-19 data across countries using two synchronized views: a bar chart race and a choropleth map. Users can toggle between the chart and map modes, scrub through time with a slider, and play an animation of the pandemic’s progression from January 2020 to May 2021. The bar chart uses `d3.scaleBand` and `d3.scaleLinear` for ranking, while the map, rendered via `d3.geoPath` with TopoJSON, colors countries using a linear gradient scale. Data comes from an augmented COVID-19 CSV and a countries-50m TopoJSON file.

LLouis Durand

74% match

Loading thumbnail…

barGraph

This visualization displays the 2022 population of countries as a bar chart, with options to sort the bars in ascending or descending order. The chart also includes a scatter plot overlay with circles at the top of each bar, and a tooltip showing country and population details on hover. Built with D3 v5, the visualization uses `scaleBand`, `scaleLinear`, and `axisLeft`/`axisBottom` for axes, with `transition` animations when sorting. The data comes from a CSV file, and the SVG rendering includes interactive buttons for reordering.

TTimothyMiage

74% match