ICE-8 Fork of China City

100%

ICE-8 Fork of China City

✓ Published0🌍 Public

Last edited Mar 30, 2023

Created on Mar 30, 2023

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.

AI-generated description

Map of China

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

82% match

Loading thumbnail…

Fork of China City Basemap

This example visualizes a basemap of Chinese cities, using a Mercator projection centered on China to render province and city boundaries as SVG paths. The map displays the geographic outlines in a muted blue with subtle black strokes. The code uses `d3.geoMercator`, `d3.geoPath`, and TopoJSON's `feature` method to convert TopoJSON data into GeoJSON for rendering. The basemap data is loaded remotely from a GitHub gist, and each feature is styled via a CSS class.

Mmyoung1032

82% match

Loading thumbnail…

ICE 8 Map - China

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.

Aanushaanumula

82% match

Loading thumbnail…

Fork of ICE 8 country map

This example displays a choropleth-style map of India, colored with the d3.scaleOrdinal and schemeCategory10 palette, with hover states that turn regions orange. The visualization uses d3.geoMercator projection, d3.geoPath for rendering, and topojson.feature to parse GeoJSON from a geoBoundaries TopoJSON file hosted on GitHub. The React-based code loads data via d3.json, appends SVG paths, and includes zoom functionality through d3.zoom, with the map heading and styling defined in HTML and CSS.

YYerlan Yeszhanov

81% match

Loading thumbnail…

Fork of ICE 8 country map

This example displays a choropleth-style map of India rendered in SVG, with each state filled by a categorical color scale. It loads TopoJSON data from a GitHub gist and projects the geometry using `d3.geoMercator` with a custom translation and scale. The visualization leverages `d3.json` for fetching, `topojson.feature` for conversion, and `d3.geoPath` to generate paths. Hovering over a state turns it orange via CSS, while the map is titled "India Map" using a simple text element.

Aamiralitah

81% match

Loading thumbnail…

Fork of ICE 8 country map

This example renders a choropleth map of India using a Mercator projection, with each state filled by a categorical color scale. The visualization loads GeoJSON data from a TopoJSON file hosted on GitHub, then applies `d3.geoPath` to draw the state boundaries as SVG paths. The code uses `d3.zoom` and `d3.event` for interactivity, and `d3.scaleOrdinal` with `d3.schemeCategory10` for coloring. The map includes a static title and uses `d3.geoMercator` with manual translation and scale settings.

DDINESH SAI BOPPANA

81% match

Loading thumbnail…

Fork of ICE 8 - Country Map

This example displays a static choropleth-style map of countries, rendered as gray SVG paths with dark strokes on a white background. The code uses D3 v4’s `d3.geoPath` with a `d3.geoAlbersUsa` projection, though the title suggests a country map. It loads TopoJSON data from a remote gist via `d3.json`, then applies `topojson.feature` to extract country geometries. The map is positioned within an SVG using margin-based translation, styled with CSS from an external stylesheet.

GGalineeharika

81% match

Loading thumbnail…

Fork of Fork of Fork of ICE 8 - Country Map

This example displays a static map of countries filled in red with dark outlines, rendered as SVG paths on a light green background. It uses D3 v4’s `d3.geoPath` with an AlbersUSA projection to draw geographic boundaries, and `topojson.feature` to extract country polygons from a remote TopoJSON source. The map is centered and scaled within a fixed viewport, with no interactive or animated behavior.

KKarnisrikanth

81% match