Skip to main content
SimilarExport ZIP
100%

Choropleth Map

✓ Published0🌍 Public
AAniketShahane
Last edited Dec 14, 2021
Created on Dec 13, 2021
Forked from HTML Starter

An interactive choropleth map shades countries by the average number of Olympic medals won, with a dropdown menu to switch between gold, silver, and bronze. D3 v6 drives the visualization, using `d3.geoMercator` and `d3.geoPath` to project GeoJSON country boundaries, while `d3.scaleThreshold` maps medal counts to color scales like `d3.schemeOranges`. Hovering highlights a country and displays a tooltip with its name and medal total. Data comes from a CSV of Olympic medal summaries, rendered as SVG with animated opacity transitions.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

medal-rank

This visualization uses Olympic medal data from 1896 onward to show how country rankings shift depending on how heavily gold medals are weighted versus silver and bronze. Each country displays a grid of 2D heatmaps, where the x-axis varies the silver-to-bronze weight and the y-axis varies the gold-to-silver weight. D3.js renders each cell as a colored rectangle whose hue maps to the country’s average rank under that scoring scheme, sorted by best possible ranking. The animation and tooltip use D3 selections and SVG.

11wheel
79% match
Loading thumbnail…

Choropleth Map

A choropleth map colors countries by their income group using a categorical ordinal color scale, with hover effects highlighting individual nations. Built with D3 v5, it renders geographic boundaries as SVG paths via `d3.geoPath` and `geoNaturalEarth1`, and loads world geometry from the world-atlas TopoJSON dataset. A custom color legend displays the categories, while zooming is enabled through `d3.zoom`. Data is processed asynchronously with Promises, merging TSV metadata with TopoJSON features.

Ss-janibekova
79% match
Loading thumbnail…

Choropleth Map

A choropleth map colors countries by their income group using a categorical ordinal color scale, with hover effects highlighting individual nations. Built with D3 v5, it renders geographic boundaries as SVG paths via `d3.geoPath` and `geoNaturalEarth1`, and loads world geometry from the world-atlas TopoJSON dataset. A custom color legend displays the categories, while zooming is enabled through `d3.zoom`. Data is processed asynchronously with Promises, merging TSV metadata with TopoJSON features.

Ss-janibekova
79% match
Loading thumbnail…

Choropleth Map

A choropleth map colors countries by their income group using a categorical ordinal color scale, with hover effects highlighting individual nations. Built with D3 v5, it renders geographic boundaries as SVG paths via `d3.geoPath` and `geoNaturalEarth1`, and loads world geometry from the world-atlas TopoJSON dataset. A custom color legend displays the categories, while zooming is enabled through `d3.zoom`. Data is processed asynchronously with Promises, merging TSV metadata with TopoJSON features.

Ss-janibekova
79% match
Loading thumbnail…

Choropleth Map

A choropleth map colors countries by their income group using a categorical ordinal color scale, with hover effects highlighting individual nations. Built with D3 v5, it renders geographic boundaries as SVG paths via `d3.geoPath` and `geoNaturalEarth1`, and loads world geometry from the world-atlas TopoJSON dataset. A custom color legend displays the categories, while zooming is enabled through `d3.zoom`. Data is processed asynchronously with Promises, merging TSV metadata with TopoJSON features.

Ss-janibekova
79% match
Loading thumbnail…

Choropleth map

A choropleth map colors countries by income group using a categorical color scale, with a hover effect that turns each country red and a tooltip showing the country name and income group. The visualization loads geographic data from the World Atlas TopoJSON and TSV files, processes it with `topojson.feature` and `d3.tsv`, and projects it using `d3.geoNaturalEarth1` and `d3.geoPath`. A custom legend built with `d3.scaleOrdinal` and `schemeSpectral` renders interactive color swatches, while `d3.zoom` enables panning and zooming on the SVG map.

Rroncando
78% match
Loading thumbnail…

Choropleth Map

A choropleth map visualizes the geographic distribution of artists by country, with each nation’s color intensity reflecting its artist count. The map renders in SVG using `d3.geoPath` and `d3-geo-projection` for world geography, while data loads asynchronously via `d3.json` from the Wasabi API’s `artist_all/77490` endpoint. A tooltip shows country-specific details, and the legend uses `d3-scale-chromatic` for color encoding. The visualization employs d3.v4 and is styled with a prominent bordered container, with hover interactions driven by mouse events.

TThibautDARE
77% match
Loading thumbnail…

Choropleth Map

A choropleth map colors world countries by economic classification using an ordinal color scale derived from d3.scaleOrdinal and d3.schemeSpectral, with a legend rendered via a custom colourLegend component. Geographic shapes are drawn with d3.geoPath and a Natural Earth projection, while data loads from World Atlas TopoJSON and TSV files. Hovering highlights countries, and d3.zoom enables panning and zooming with animated transitions on the legend circles.

JJoseph Popoola
77% match