Skip to main content
SimilarExport ZIP
100%

Fork of Japan Map

✓ Published1🌍 Public
Ssivamani
Last edited Mar 28, 2023
Created on Mar 28, 2023
Forked from Japan Map

This example displays a choropleth map of Japan’s prefectures, rendered as SVG paths with a uniform orange fill and white strokes. The code loads TopoJSON data twice via `d3.json` and uses `topojson.feature` to extract administrative boundaries. A `d3.geoMercator` projection with `d3.geoPath` draws the geography, while `d3.scaleOrdinal` and `schemeCategory10` are available for potential color encoding. The map supports pan and zoom through `d3.zoom`, transforming a grouped `<g>` 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 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
93% match
Loading thumbnail…

Fork of Japan Map

This choropleth map of Japan displays prefecture boundaries as red polygons with white strokes on a blank background. The visualization loads geographic data from a GitHub-hosted TopoJSON file and renders it using D3’s `geoPath` with a `geoMercator` projection. Interactive pan and zoom are enabled via D3’s `zoom` behavior, which applies transforms to the SVG group. The map uses static color fill from `scaleOrdinal` and `schemeCategory10`, with no hover or tooltip interactions. D3 version 5 and topojson are loaded via CDN.

NNikhilchiguru-8
93% 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
93% match
Loading thumbnail…

Fork of Japan Map

This example presents a zoomable choropleth map of Japan’s administrative regions, rendered as SVG paths filled with distinct colors from a categorical scale. Using D3 v5 and d3-geo-projection, it applies a Mercator projection clipped to the viewport, with pan and zoom enabled via d3.zoom. Geographic boundaries come from TopoJSON data (JPN_adm1), processed with topojson.feature and drawn using d3.geoPath. The map highlights each prefecture uniformly, with white strokes separating regions.

Vviswak12
93% 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
92% match
Loading thumbnail…

Fork of Japan Map

This map of Japan displays its prefectural boundaries as distinct orange regions against a white background. Built with React and rendered as SVG, it uses D3’s `geoMercator` projection and `geoPath` to draw the shapes, while `d3-geo-projection` extends the available projections. The visualization supports zooming via D3’s `zoom` behavior, and prefectures are colored using `scaleOrdinal` with `schemeCategory10` for categorical distinction. State boundaries come from TopoJSON data loaded from external GitHub gists, and the page includes CSS for styling.

KKeerthipriyaBankuru
90% match
Loading thumbnail…

Fork of Fork of Fork of Japan Map.viz

This visualization displays the prefectural boundaries of Japan as colored SVG paths. The map uses a Mercator projection centered on the country, with each administrative region filled in a distinct color from a categorical scheme. The code employs the `d3.geoMercator` projection, `d3.geoPath` for generating path data, and `topojson.feature` to extract features from the TopoJSON source. Interactive zooming is enabled through the `d3.zoom` module, which updates the SVG group's transform.

NNikhilchiguru-8
90% match
Loading thumbnail…

Fork of Japan Map

This example displays a map of Japan with its administrative level-1 regions rendered as beige SVG paths with black borders. The visualization uses a geoMercator projection with clipExtent and scale settings to focus the map. Users can pan and zoom interactively through d3.zoom, which applies transforms to the grouped map elements. The code loads geographic data from a remote JSON file and processes it with topojson.feature to extract state boundaries, then renders them using d3.geoPath.

RRinoj-Gautam
89% match