Skip to main content
SimilarExport ZIP
100%

Fork of Italy Map

✓ Published0🌍 Public
Kkirangithub23
Last edited Jul 10, 2022
Created on Jul 10, 2022
Forked from Japan 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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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

Country Map

This example displays a choropleth map of Italy, with its administrative regions filled in sky blue and separated by black borders. The map uses the Mercator projection and renders geographic features with the `geoPath` function from d3. Hovering over a region highlights it. The application is built with React, fetching TopoJSON data from a remote URL and processing it with the `topojson` library to generate land features and interior borders.

CCH SAMPATH
81% match
Loading thumbnail…

Fork of 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.

Kkovuribalanagavinay@gmail.com
81% match
Loading thumbnail…

Fork of Japan Map

This example displays a map of Japan rendered as SVG paths, with each geographic region filled in a solid color and outlined by white borders. The visualization uses a Mercator projection configured with `d3.geoMercator` and applies a zoom behavior via `d3.zoom` to enable interactive panning and scaling. Geographic data is loaded as TopoJSON from a remote GitHub source and converted to GeoJSON using the `feature` function from `topojson`. Color encoding relies on `d3.scaleOrdinal` with `schemeCategory10`, though the code fetches a Greece dataset, so the map’s actual region boundaries may not match the title.

YYiorgos Bagakis
81% match
Loading thumbnail…

Fork of Fork of Japan Map.viz

This example displays a choropleth-style map of Japan’s administrative regions, rendered as SVG paths with an orange fill and white strokes. Users can pan and zoom the map via `d3.zoom`, which applies a transform to the grouped map elements. The code uses `d3.geoMercator` for projection, `d3.geoPath` to generate paths, and TopoJSON’s `feature` to parse the geographic data from a remote JSON file. A categorical color scale (`d3.scaleOrdinal`) is also defined, though the visible map uses a fixed CSS fill.

NNikhilchiguru-8
78% match
Loading thumbnail…

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

This example shows a world map rendered as SVG paths, with countries filled in light green against a blue spherical background. It uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to generate the map, while TopoJSON’s `feature` extracts country boundaries from the world-atlas dataset (110m resolution). The code appends a sphere path first, then loads the TopoJSON data asynchronously and appends individual country paths, styling them via CSS classes. The result is a static, interactive-free choropleth-style map.

DDario Thornhill
78% match
Loading thumbnail…

Fork of austrailia

This fork of a D3.js map visualization displays Argentina’s provinces using a transverse Mercator projection. The code loads GeoJSON data from a gist and renders each region as a styled SVG path with hover effects, using `d3.geoPath` and `d3.geoTransverseMercator`. A zoom behavior via `d3.zoom` allows interactive panning and scaling of the map. The visualization also incorporates `topojson.feature` and a sphere background, with a green-to-maroon hover fill for country outlines.

TTekmal-Bhavana
78% match
Loading thumbnail…

Fork of Japan Map

This example visualizes Japan’s administrative boundaries using a Mercator projection rendered as SVG paths. The map displays prefecture outlines in pink with black strokes, colored via d3.scaleOrdinal and schemeCategory10, and supports pan and zoom through d3.zoom. Data is loaded via d3.json from a TopoJSON file, converted to GeoJSON with topojson.feature, and drawn using d3.geoPath. The code imports d3 modules for selection, projections, scales, and event handling, while d3-geo-projection.v2 is included for additional projection support.

KKeerthipriyaBankuru
77% match