ICE 8 Map - China

100%

ICE 8 Map - China

✓ Published0🌍 Public

Last edited Jul 10, 2022

Created on Jul 9, 2022

This interactive map displays China’s administrative provinces as colored paths, rendered using a `d3.geoMercator` projection on an SVG canvas. Users can zoom and pan the map via `d3.zoom`, which transforms the grouped geometry. The visualization loads GeoJSON data from a GitHub gist, applies `d3.geoPath` to convert features into SVG paths, and colors each province with a categorical `d3.scaleOrdinal` scheme. The code leverages TopoJSON’s `feature` API to extract polygon geometries before styling them with CSS rules for fill and stroke.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 8 - China Map - Manasa V Jadda

This example displays a static map of China using a Mercator projection centered on the country. The visualization renders geographic boundaries as SVG paths, with provinces filled in green and stroked with dark green outlines. The code loads GeoJSON data from a GitHub gist and processes it using the TopoJSON `feature` API within a d3.json promise. It applies the d3.geoPath generator combined with d3.geoMercator for projection, and appends each country path to an SVG canvas sized at 960 by 700 pixels.

MManasa891-git

84% match

Loading thumbnail…

ICE-8 Fork of China City

This example displays a map of China using geographic data rendered as red SVG paths. It fetches TopoJSON basemap data from a GitHub gist and converts it to GeoJSON with the `feature` method from topojson. The map uses a `geoMercator` projection centered on China and draws the country boundaries with `d3.geoPath`, applying a red fill with black strokes. The visualization loads D3 v5 and topojson via external scripts, resulting in a simple, static choropleth-style city map.

IIndhuKrishnaraj

82% match

Loading thumbnail…

CHINA MAP

This example displays a choropleth map of China’s administrative regions, rendered as brown filled paths with white borders on a light yellow background. The visualization loads GeoJSON data for Chinese provinces and projects it using the equirectangular projection from `d3.geoEquirectangular`, with path generation handled by `d3.geoPath`. Users can pan and zoom the map via `d3.zoom`, which transforms the SVG group containing the state paths. The code integrates React, TopoJSON for feature extraction, and D3’s `scaleOrdinal` and `schemeCategory10` for potential color encoding.

AAISWARYAMARAPATLA1999

81% match

Loading thumbnail…

CHINA MAP

This example displays a map of China, highlighting its administrative regions in green with yellow borders. Users can pan and zoom the map using mouse interactions, which are enabled through D3's `zoom` behavior. The visualization is rendered as SVG, with geographic paths generated using `d3.geoPath` and a `geoEquirectangular` projection. It loads TopoJSON data from a GitHub gist and uses `topojson.feature` to extract the regions, while D3's `scaleOrdinal` assigns colors from the `schemeCategory10` palette.

SSravani93-creater

79% match

Loading thumbnail…

ICE - 8 - Map

This example presents a choropleth map of India's administrative regions, coloring each state according to its name using a categorical color scale. It renders the map with D3's `geoPath` and a Mercator projection, drawing state boundaries as SVG paths with white strokes. Data is loaded from a GeoJSON file hosted on GitHub, processed with `topojson`'s `feature` function, and each state is labeled at its centroid. The visualization uses D3 v5 within a React framework, with styling applied via CSS classes.

Ggunasindhuja

79% match

Loading thumbnail…

ICE 8 -Japan Map

This example displays a choropleth-free map of Japan’s prefectures, using skyblue fill and red strokes to delineate administrative boundaries. Built with D3.js, it employs `d3.geoMercator` projection, `d3.geoPath` for path generation, and `d3.zoom` for interactive pan and zoom. The geographic data is loaded from a TopoJSON file via `topojson.feature`, and `d3.scaleOrdinal` assigns categorical colors. The SVG-based visualization renders state-level polygons from the `JPN_adm1` layer.

BBhanuMotupalli

79% match

Loading thumbnail…

ICE 8 - Country Map

This visualization displays a choropleth map of India, with each state filled using a categorical color scheme. It uses `d3.geoMercator` projection and `d3.geoPath` to render the geographic boundaries, with `d3.scaleOrdinal` and `d3.schemeCategory10` for coloring. The map loads TopoJSON data from a GitHub gist via `topojson.feature` and renders as SVG. Hovering over a state turns it orange via CSS, while a title attribute reveals the state’s interpolated color value.

SSheela2930

79% match

Loading thumbnail…

ICE8 Country Map

This visualization renders a choropleth map of Indian states using D3.js with a Mercator projection. It loads GeoJSON data containing administrative boundaries and assigns each state a distinct color from D3’s schemeCategory10 palette. The code employs `d3.geoPath` with the projection to generate SVG paths, appending tooltip titles that display state names. The map uses topojson’s `feature` method to extract geometry, and the styling includes a light green background with white state borders, rendered via SVG elements.

Aakhila157

79% match