FORK OF CHINA MAP

100%

FORK OF CHINA MAP

✓ Published1🌍 Public

Last edited Mar 29, 2023

Created on Mar 28, 2023

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.

AI-generated description

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

Similar vizzes

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

84% match

Loading thumbnail…

Fork of visualizing the China map

This example displays a map of China’s administrative divisions, rendered as a single green SVG path with a teal outline. It loads GeoJSON data converted from TopoJSON via `topojson.feature` and `topojson.presimplify`, then projects it using `d3.geoMercator` and draws it with `d3.geoPath`. The map refits to the SVG container on window resize, and a custom `d3.geoTransform` applies simplification based on a threshold during rendering.

Ssivamani

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

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

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

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

79% match

Loading thumbnail…

Fork of Fork of Map of India with D3 - chloropleth map

This choropleth map of India visualizes the country’s states, each filled with a distinct color from the `d3.scaleOrdinal` and `d3.schemeCategory10` palette. State names are rendered as labels at the centroid of each shape, computed with `d3.geoPath.centroid`. The code loads TopoJSON data from a remote GitHub source and converts it using `topojson.feature`. The map uses a `d3.geoMercator` projection, and all elements are drawn as SVG paths with black stroke outlines.

RRuanzhenglin

79% match

Loading thumbnail…

Fork of Fork of Japan Map.viz

This example displays a choropleth-style map of Japan’s administrative regions, rendered as SVG paths with an orange fill and white strokes. Users can pan and zoom the map via `d3.zoom`, which applies a transform to the grouped map elements. The code uses `d3.geoMercator` for projection, `d3.geoPath` to generate paths, and TopoJSON’s `feature` to parse the geographic data from a remote JSON file. A categorical color scale (`d3.scaleOrdinal`) is also defined, though the visible map uses a fixed CSS fill.

NNikhilchiguru-8

78% match