Skip to main content
SimilarExport ZIP
100%

CHINA MAP

✓ Published0🌍 Public
AAISWARYAMARAPATLA1999
Last edited Apr 6, 2023
Created on Apr 6, 2023
Forked from HTML Starter

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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

visualizing the China map

This example visualizes the country map of China using a D3.js v4 geo projection. The map renders administrative regions as SVG paths, colored green with aquamarine strokes, beneath a purple header. It uses topojson.presimplify and topojson.feature to process geographic data from a GitHub-hosted JSON file. The visualization applies a d3.geoMercator projection fitted to the SVG dimensions via d3.geoPath, and it dynamically redraws the map on window resize using the draw function. The map’s boundaries are simplified based on a threshold within the d3.geoTransform, though the threshold remains at zero, showing all geographic details. The code relies on d3.select, d3.json, and d3.geoTransform to manage the SVG element and projection.

PPrathyusha Jampala
86% match
Loading thumbnail…

FORK OF CHINA MAP

This example visualizes the provinces of China as a choropleth map, with each region filled in blue and outlined in yellow, rendered as an SVG graphic. The map uses the `geoEquirectangular` projection and `geoPath` to draw geographic features from TopoJSON data, with `scaleOrdinal` and `schemeCategory10` for color encoding. Interactive zooming is enabled through D3’s `zoom` function, applied to the entire SVG container.

Ssivamani
84% match
Loading thumbnail…

中国地图

A choropleth map of China renders each province as an SVG path using a Mercator projection centered on the country. The D3.js code loads GeoJSON map data and applies a categorical color scale, with provinces highlighted yellow on mouseover. Province names are positioned using projected centroid coordinates, with a vertical offset applied to prevent overlap between Macau and Hong Kong labels. The visualization demonstrates D3’s geographic path generator (`d3.geoPath`) and projection utilities.

Zzhuomo-maker
84% match
Loading thumbnail…

Country Map of china

This visualization displays a map of India, rendered using SVG paths generated with d3.geoPath and a d3.geoMercator projection. TopoJSON data is loaded via d3.json and parsed with topojson.feature to create country boundaries, which are filled using a scaleOrdinal color scale. The map includes an interactive hover effect that changes the fill color to pink, and features a title attribute displaying the interpolateRainbow value for each region.

BBajiSharifPatan@my.unt.edu
83% match
Loading thumbnail…

Chinese Map Template

This map of China displays province-level data with a proportional symbol overlay, where circle size encodes a numeric value from a local CSV joined to TopoJSON geographic features. Each province is colored with a categorical scale and shows its name on hover. The visualization uses d3.geoMercator for projection, d3.geoPath for rendering SVG paths, d3.geoCentroid for positioning circles, and a custom legend component built with d3.scaleSqrt.

Iinroadings
81% match
Loading thumbnail…

China City Basemap

This example displays a basemap of China’s cities and provinces as a static SVG map, rendered using the D3.js library (v5) and its `geoMercator` projection, `geoPath`, and `select` APIs. It loads TopoJSON data from a GitHub gist, converts it to GeoJSON features via the `topojson` package’s `feature` function, and draws each region as a path with an SVG fill. The map’s projection is centered on China with a specific scale, and the country outlines are styled with a green fill and semi-transparent black stroke.

ZZ-Richard
81% 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
81% match