Merged

100%

✓ Published0🌍 Public

Last edited Dec 4, 2022

Created on Dec 4, 2022

This interactive choropleth map visualizes the global distribution of album counts by country, using a green color scale that darkens with higher values. Users can zoom and pan via D3’s `zoom` behavior, hover to see a tooltip with country name and album total, and click to open a modal displaying additional statistics like top genres and artists. The map is rendered with `d3.geoPath` and topojson world data, while country counts come from a local `data_map.json` file, with colors mapped through `d3.scaleLinear`.

AI-generated description

⚠⚠⚠ Si jamais rien ne s'affiche, réactualisez avec ctrl + shift + R ⚠⚠⚠

MIT Licensed

Similar vizzes

Loading thumbnail…

TP 10-12-22

This map visualization displays the geographic distribution of music albums, with country colors shaded by count according to a green scale. It shows a choropleth of world data where users can hover to see precise album counts and click to open a modal with detailed statistics about genres, artists, and yearly totals. The implementation uses D3 v5 with d3.geoMercator projection, d3.geoPath, and a d3.scaleLinear color scale, pulling TopoJSON country boundaries from world-atlas and loading country album counts from a local JSON file. Zooming is enabled via d3.zoom, with Bootstrap modals and tooltips providing interactivity.

TToky R

85% match

Loading thumbnail…

sample

This example shows a choropleth map of global album counts by country, using a green color scale from light to dark to indicate higher totals. Clicking a country opens a modal with placeholder cards for genre, artist, and yearly album statistics, while hovering displays a tooltip with the country name and album count. The map is rendered with D3 v5’s `geoMercator` projection and `geoPath`, with data loaded from `world-atlas` TopoJSON and a local `data_map.json`. Zoom and pan are enabled via D3’s `zoom` behavior, and Bootstrap handles the modal interaction.

DDillu1991

85% match

Loading thumbnail…

WorldMap

This world map visualization displays the geographic distribution of music album counts, using a green color scale where darker shades represent higher numbers of albums per country. Users can zoom and pan the map, and hovering over a country reveals a tooltip with its name and album count, while clicking opens a Bootstrap modal showing detailed country statistics. The visualization is built with D3 v5, using `d3.geoMercator` for projection, `d3.geoPath` to render country shapes from TopoJSON data from world-atlas, and a linear scale for coloring. Country-specific album data is loaded from a local JSON file.

UUmarani Vemula

84% match

Loading thumbnail…

Sauvegarde 4-11-22

This data visualization is a choropleth map showing the number of music albums per country, rendered as an interactive SVG using D3 v5. The map uses a green color scale to represent album counts, and users can hover over countries to see details via a tooltip or click to open a modal with statistics. The code leverages D3’s `geoMercator` projection, `geoPath`, and `scaleLinear` for color mapping, and loads world map data from the `world-atlas` package alongside a local `data_map.json` file.

TToky R

80% match

Loading thumbnail…

(interactive) Choropleth Map

This interactive choropleth map visualizes global economic data across countries using a spectral color scale. The map supports zooming and panning via d3.zoom, with a clickable color legend that highlights matching countries and dims others. Built with d3-geoPath and a Mercator projection, it renders SVG paths from TopoJSON data sourced from the world-atlas dataset. The legend uses d3.scaleOrdinal and d3.schemeSpectral to map categorical values to colors, with opacity transitions indicating selection state.

ZZY Huang

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

80% match

Loading thumbnail…

Choropleth Map

This choropleth map displays the world’s countries, each filled with a light green color that turns red on hover, while the ocean remains blue. It uses D3 v5 and TopoJSON to load world-atlas data, combining a TSV file for country names with a JSON topology for geographic boundaries. The map is rendered with an SVG using a natural Earth projection via `d3.geoPath`, and interactive panning and zooming are enabled through `d3.zoom`.

MMajaha21

79% match

Loading thumbnail…

Sauvegarde 02/12/2022

This choropleth map visualizes the world using a green color scale, where each country is rendered as an SVG path and is interactive. Clicking a country opens a Bootstrap modal displaying statistics about that nation, including the total number of albums, top genres, popular artists, and albums per year. The map is built with D3.js v5 and TopoJSON, using a Mercator projection (`d3.geoMercator`) and `d3.geoPath` to generate the shapes. Country names and ISO codes come from a TSV file, while geographic boundaries are loaded from a world-atlas JSON.

TToky R

79% match