Fork of Map

100%

✓ Published0🌍 Public

Last edited Nov 1, 2025

Created on Nov 1, 2025

Forked from Map

This interactive map of Italy visualizes a playful, made-up “Pasta Variety Index” for ten major cities. Circle size and color encode the index value on top of the country’s geographic outline, with a hover tooltip revealing city details. The visualization is built with D3.js v7, rendering to SVG, and uses the `topojson-client` library to load world-atlas TopoJSON data. A custom `d3.geoPath` projection draws the country, while a simple CSS-based tooltip provides interactivity.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE-8

This choropleth shows a world map with countries colored by their Pasta Variety Index, a higher value indicating more varieties. Hovering reveals each country’s value via a tooltip. Built with D3 v7 and TopoJSON, it uses `d3.geoMercator` and `d3.geoPath` to project the 110m country outlines, with a sequential `YlOrRd` color scale mapping values from 4 to 13. The map fetches world-atlas data asynchronously and renders to SVG.

Kkovuribalanagavinay@gmail.com

83% match

Loading thumbnail…

Fork of Italy Map

This example displays a map of Italy’s provinces using D3’s `geoMercator` projection and `geoPath` to render SVG paths. TopoJSON data is loaded from a GitHub source and converted with `feature`, while a categorical color scale fills each region. The map supports zoom and pan via D3’s `zoom` behavior, which applies transforms to a group element.

Kkirangithub23

81% match

Loading thumbnail…

Fork of Country Map

This example displays a choropleth map of Italy, highlighting its regional borders and using a Mercator projection to shape the geographic outlines. The visualization is rendered as an SVG, with sky-blue fill for regions and black strokes for interior boundaries, while a hover effect changes the region color to PaleVioletRed. The code leverages D3 v5’s `geoMercator` and `geoPath` for map projection and path generation, TopoJSON’s `feature` and `mesh` functions to process geographical data from the italy.json file, and React with a custom `useData` hook to fetch and manage the data.

RRinoj-Gautam

80% match

Loading thumbnail…

Fork of Map

This map shows a world map rendered entirely in SVG, with each country drawn as a gray shape with dark borders. The visualization loads country boundaries from the `world-atlas` TopoJSON package, converts the topology to GeoJSON using the `topojson` library, and projects it with the Mercator projection via `d3.geoMercator`. The code uses `d3.geoPath` to generate the SVG paths and displays country identifiers in tooltips.

Kkodalijagadeesh9@gmail.com

75% match

Loading thumbnail…

Fork of map

This interactive world map colors each country by economy group using a categorical ordinal scale with a spectral color scheme. Users can pan and zoom the map through d3.zoom, while hovering highlights individual countries. The visualization loads geographic data from the world-atlas TopoJSON dataset and joins it with TSV metadata, rendering with d3.geoPath and a natural Earth projection. A custom color legend component displays the ordinal scale, and the code imports utilities from d3 v5 and topojson.

RRahulChaitu999

74% match

Loading thumbnail…

Fork of Map

This interactive visualization presents two distinct maps—a world map and a US map—that can be panned and zoomed using D3’s zoom behavior. It renders geographic features from the TopoJSON data in the world-atlas and us-atlas packages, using a natural Earth projection for the world and an appropriate projection for the US. The SVG maps include hover effects that change country and state fills, and they feature on-screen zoom control buttons to adjust the view.

Ppragnyalipsa96@gmail.com

74% match

Loading thumbnail…

Fork of map

This visualization presents a world map using a geographic projection, rendering countries as black shapes with red outlines on a light blue sphere. It highlights countries on hover by changing their fill to orange. The code uses D3 v5 for geo-spatial functions like `geoEquirectangular`, `geoPath`, and `select`, while TopoJSON’s `feature` method converts the external GeoJSON data to map features. The map data is sourced from a world-atlas JSON file hosted via CDN.

TTekmal-Bhavana

74% match

Loading thumbnail…

Fork of Let's make a map with D3 (Tricks).js!

This interactive map displays world countries using a natural Earth projection, rendered as SVG paths with green fill that turns red on hover. The visualization loads geographic data from the World Atlas TopoJSON file and converts it to GeoJSON features using `topojson.feature`. Users can pan and zoom the map through `d3.zoom`, with transformations applied to a group element containing the country paths. The map also includes a blue sphere outline drawn via `d3.geoPath` with the `geoNaturalEarth1` projection, and each country displays its name as a tooltip using SVG `title` elements.

BBKirst3

74% match