Chinese Map Template

100%

Chinese Map Template

✓ Published2🌍 Public

Last edited Mar 20, 2020

Created on Mar 20, 2020

Forked from D3.js!

This map of China displays province-level case counts using a bubble chart overlay. Each province is colored with a categorical scheme, and red circles sized by a square-root scale represent the number of cases per region. The visualization uses D3’s geoMercator projection, geoPath for drawing boundaries, and geoCentroid to position circles. Data comes from a local CSV joined with TopoJSON province geometries, with an interactive hover effect highlighting provinces.

AI-generated description

MIT Licensed

Similar vizzes

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

91% 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

81% 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

78% match

Loading thumbnail…

map.js

This visualization shows the cumulative growth of China’s protected geographical indication products from 2003 to 2010. A choropleth map fills each province by the number of products registered up to a selected year, while a bubble map overlays proportional circles at province centroids. An interactive slider updates the year, and radio buttons switch between the two views. The code uses d3.json to load GeoJSON, d3.geoPath and d3.geoMercator for map rendering, d3.scaleThreshold and d3.scaleSqrt for color and size encoding, and d3.zoom for panning and zooming.

HhelloHailey-sketch

77% match

Loading thumbnail…

Affection Type Social Map

A choropleth map of China displays each province colored by category, overlaid with circles sized by social affection values using a square-root scale. The map uses `d3.geoMercator` projection and `d3.geoPath` to render province boundaries from TopoJSON data, while CSV data is merged with geographic features. A custom legend built with `d3.scaleSqrt` and `sizeLengend` shows circle radius mappings. Hovering highlights provinces, and the SVG rendering uses D3 v5 with `d3.csv` and `d3.json` for data loading.

LLex

77% match

Loading thumbnail…

MAP - CIRCLES

This visualization maps the spread of COVID-19 from China to other countries using circles overlaid on a natural Earth projection. The size of each circle encodes population data from the source files, while arcs are attempted from longitude and latitude coordinates parsed from two CSV files. Built with D3 v5, it uses `geoPath`, `geoCentroid`, `scaleSqrt`, and `zoom` for interactivity, plus TopoJSON for country boundaries. The SVG rendering includes hover effects and a size legend.

Iinroadings

76% match

Loading thumbnail…

Covid-19 Choropleth Map of China

A choropleth map of China displays cumulative confirmed COVID-19 cases per city as of June 21, 2020, with a logarithmic orange color scale and gray for missing data. The map uses `d3.geoMercator` projection and `d3.geoPath` to render city boundaries from a TopoJSON basemap, while case counts come from a CSV joined to city names. Colors are assigned via `d3.scaleLog` with `interpolateOranges`, and a legend is rendered with the d3-legend library. Data is sourced from the China Data Lab COVID-19 daily cases dataset.

ZZ-Richard

76% match

Loading thumbnail…

Fork of Choropleth Map

This example displays a choropleth map of China’s provinces, colored by economic group using an ordinal color scale from `d3.scaleOrdinal` and `schemeSpectral`. It renders geographic boundaries with `d3.geoPath` and a natural Earth projection, and supports interactive pan and zoom via `d3.zoom`. A legend, built with custom SVG circles and text, shows category colors. Province data comes from a local `chinaMap.json` file, with additional metadata merged from a TSV source.

HhelloHailey-sketch

76% match