Skip to main content
SimilarExport ZIP
100%

City of China

✓ Published0🌍 Public
DdaojunL
Last edited Nov 2, 2020
Created on Nov 2, 2020

This visualization displays a hierarchical tree of Chinese provinces and cities, with Beijing, Shanghai, Hongkong, and several regional groupings as top-level nodes. Leaf nodes such as Guangzhou and Shenzhen are shown with uniform values. The graph uses D3 v5’s `d3.hierarchy` and `d3.tree` to compute node positions, while `d3.linkHorizontal` generates Bézier curves for the links. Nodes are rendered as white circles with blue strokes, and labels are placed beside each circle in an SVG canvas.

AI-generated description

This graph introduces some provinces and cities of China.

MIT Licensed

Similar vizzes

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

Tree

This example visualizes the hierarchical structure of Xinjiang’s administrative divisions and their populations using a vertical tree layout. Each node is a circle colored by its top-level prefecture, with links drawn via `d3.linkVertical` and text labels rotated vertically. The code uses `d3.hierarchy` and `d3.tree` to compute positions, `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and renders output as SVG. Population data comes from the embedded `xinjiang.json` file.

Vvivianaaai@qq.com
72% 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
72% 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
71% match
Loading thumbnail…

Chinese Map Template

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.

LLex
71% match
Loading thumbnail…

Customizing Axes

This bar chart displays the populations of the top 2 most populous cities, Shanghai and Beijing, using estimated data from the United Nations World Population Prospects 2017. The visualization highlights customized D3 axes: the y-axis uses a band scale with ticks stripped of lines and domain, while the x-axis uses a linear scale with tick formatting that abbreviates numbers (e.g., converting billions to "B"). The SVG renderer applies distinct styling to ticks, labels, and the chart title via CSS.

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

World Countries Tree

This interactive treemap displays the hierarchical structure of Tsinghua University, showing its schools and their constituent departments. The visualization uses a horizontal tree layout with curved links, rendered as SVG paths. It reads from a local `data.json` file, and the code uses D3 v5’s `tree`, `hierarchy`, `linkHorizontal`, and `zoom` APIs to compute the layout and enable pan/zoom functionality. Text labels adjust their font size based on depth level.

Ccohaesio
70% match