Skip to main content
SimilarExport ZIP
100%

Fork of Chloropleth - TDF

✓ Published1🌍 Public
Gg_beck@coloradocollege.edu
Last edited May 9, 2024
Created on May 2, 2024
Forked from Choropleth

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.

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…

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

Fork of Fork of Chloropleth

This visualization pairs a choropleth map with a scatterplot, both driven by a year slider. It uses D3 v6’s `d3.geoEqualEarth` projection and `d3.geoPath` to render world map polygons, colored by life expectancy. The scatterplot places each country as a circle along a horizontal life-expectancy axis. Hovering over a map region or a circle highlights the corresponding element in both views and shows a tooltip with country, life expectancy, and year.

Cc_peimann@coloradocollege.edu
82% match
Loading thumbnail…

Fork of Chloropleth

This visualization pairs a choropleth map with a scatterplot to explore global demographic data from a 2023 CSV and GeoJSON world map. The map uses `d3.geoEqualEarth` and `d3.geoPath` to color countries by birth rate, while a `d3.scaleLinear` maps fertility rate and life expectancy onto the scatterplot axes, with point size encoding population. Both SVGs support synchronized mouseover highlighting that turns matching countries or points red, using `d3.selectAll` with shared ids.

Wwillapolman@gmail.com
81% match
Loading thumbnail…

Fork of Chloropleth

This fork of a choropleth map pairs a geographic view of countries colored by birth rate with a scatter plot of fertility rate against life expectancy, with point size encoding population. Both SVG panels are rendered side by side using D3.js v6, with the map drawn via `d3.geoEqualEarth` and `d3.geoPath`. The scatter plot uses `d3.scaleLinear` for axes and `d3.axisBottom`/`d3.axisRight` for ticks, while country data comes from a 2023 CSV and continent assignments from a JSON file. Hovering synchronizes highlights across both views.

Ooliverkendall99@gmail.com
81% match
Loading thumbnail…

Fork of Choropleth

This fork of the choropleth example combines a geographic map with a scatter plot. It uses D3.js v6 to render two SVG elements side-by-side, with the map using `d3.geoEqualEarth` projection and `d3.geoPath` to draw country borders. The map is colored by urban rate, while the scatter plot shows life expectancy against GDP per capita, with point size encoding population and color distinguishing continents. The visualization includes an interactive tooltip that appears on hover, and data is loaded from external sources.

HHOURPRIMERA@GMAIL.COM
80% match
Loading thumbnail…

Fork of Chloropleth

This fork of a choropleth combines a geographic map with a scatter plot, both rendered as SVG. The map colors countries by birth rate using a linear scale, while the scatter plot displays fertility rate against life expectancy, with circle size encoding population and color representing continent via an ordinal scale. The code uses `d3.geoEqualEarth`, `d3.geoPath`, and `d3.axisBottom`/`d3.axisRight`. Data comes from a GeoJSON file, a CSV of world statistics, and a JSON continent mapping, all loaded with `Promise.all` and `d3.json`/`d3.csv`.

Gg_ivaska@coloradocollege.edu
80% match
Loading thumbnail…

Fork of Choropleth

This fork of a choropleth combines an interactive map with a scatter plot to explore global development metrics. It uses D3 v6 to project country polygons with `d3.geoEqualEarth` and `d3.geoPath`, while a second SVG shows life expectancy versus GDP per capita. A hover tooltip appears via CSS, and both views share data from a `Map` of country entries with attributes like population and urban rate.

Wwillapolman@gmail.com
79% match
Loading thumbnail…

Fork of Choropleth

This interactive dashboard combines a choropleth map with a linked scatter plot to explore country-level data. Users can select attributes for the x- and y-axes of the scatter plot and toggle between linear and logarithmic scales, while the map’s color encodes a chosen variable. The visualization uses D3 v6 with a `d3.geoEqualEarth` projection, `d3.geoPath` for map rendering, and `d3.scaleOrdinal` for categorical colors. A tooltip provides details, and transitions animate axis updates.

Ooliverkendall99@gmail.com
79% match