Skip to main content
SimilarExport ZIP
100%

sample

✓ Published0🌍 Public
DDillu1991
Last edited Dec 28, 2022
Created on Dec 28, 2022
Forked from TP 10-12-22

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.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Merged

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`.

TTEKMS
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…

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

Map

This example visualizes world countries as a choropleth-style map, coloring each country green with white borders on a dark blue spherical backdrop. The map renders as SVG using D3.js with a Natural Earth projection via `d3.geoNaturalEarth1`, and country boundaries are generated through `d3.geoPath`. Geographic data loads from the world-atlas TopoJSON file (countries-110m.json), which is converted to GeoJSON using the `feature` function from the topojson library. Hovering a country changes its fill to red, and each country includes a title tooltip displaying its name.

VVlad Bogo
79% match
Loading thumbnail…

Maps-Exemple

This example displays a choropleth map of world countries colored by population estimates, with hover highlighting and zoom/pan interaction. It uses D3 v5’s `d3.geoMercator` projection and `d3.geoPath` to render SVG paths from TopoJSON data loaded from the world-atlas package, while population values and country names come from a supplementary TSV file. A linear `d3.scaleLinear` maps population magnitudes to a red color ramp, and the `d3.zoom` behavior applies transforms to all country paths.

JJShellBach
79% 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
78% match
Loading thumbnail…

Choropleth Map

This choropleth map visualizes world countries using color to distinguish region boundaries and a blue sphere to represent the Earth’s surface. It loads geographic data from the World Atlas TopoJSON and TSV files via Promise.all, then renders each country as an SVG path using d3.geoPath with the d3.geoNaturalEarth1 projection. Hovering turns countries red, and tooltips display country names through appended title elements. The visualization supports zoom interaction via d3.zoom, with light green fills and black strokes for borders.

Yylzami40
78% match
Loading thumbnail…

map exemple

This map example visualizes global population estimates by country using a dark red color scale. The code loads geographic data from the world-atlas package and joins it with a TSV file containing population statistics. The visualization uses the d3.geoMercator projection and d3.geoPath to render country boundaries as SVG paths, while the topojson library converts the GeoJSON features. Hovering over a country turns it purple, and the map supports zooming through d3.zoom and event handling.

JJuliette
78% match