Skip to main content
SimilarExport ZIP
100%

Let's make a yunnan map with D3.js!

✓ Published0🌍 Public
GGerryLivermore
Last edited Apr 29, 2019
Created on Apr 26, 2019

An interactive D3.js map of Yunnan Province visualizes population data across its administrative regions as semi-transparent circles sized by a square-root scale. Built with d3.geoMercator for projection and d3.geoPath for rendering GeoJSON boundaries, the map supports zooming and panning via the d3.zoom API. The choropleth uses a two-tone fill to distinguish regions with data from those without, while a legend explains the circle sizing. Population statistics are loaded from a CSV file and joined to geographic features using TopoJSON.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

yunnanMap with Selectable Countries

This example visualizes a choropleth map of Yunnan Province, China, with selectable countries. The map encodes a categorical color value (`yszl`) using an ordinal color scale with a spectral scheme, and users can click individual countries to highlight them and dim the rest. A color legend allows filtering by color value. The visualization uses D3 v5’s `geoPath`, `geoMercator`, and `zoom` modules to project and render GeoJSON features, while the legend and map interactions are built with D3’s selection and event APIs. Data is loaded from external CSV and JSON sources.

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

Let's make a map with D3.js!

This example uses D3.js v5 to render an interactive-free SVG map of Guangzhou. It draws a blue sphere as a base layer, then projects and displays light green country polygons on top using the Natural Earth projection. The geographic data is loaded from a JSON file provided by geo.datav.aliyun.com, and the topojson library converts it into GeoJSON features. The code leverages `d3.geoNaturalEarth1` for projection and `d3.geoPath` to generate the SVG paths, with styling applied through CSS classes.

Wweakchicken-19
72% match
Loading thumbnail…

D3 - World Choropleth

This example displays a world choropleth map of population in 2023, using a Mercator projection and a yellow-to-red sequential color scale to represent each country’s population. The map is rendered as SVG paths, with a tooltip that appears on hover showing the country name and population. The code loads GeoJSON and CSV data via D3’s `d3.queue` and `d3.json`/`d3.csv` APIs, and it builds the choropleth using `d3.geoPath` with a projected path generator. A legend is added using the `d3.legend` library, and the project utilizes D3 v4, `d3-scale-chromatic` for the color interpolation, and `d3-geo-projection` for the map projection.

CChandana Srinivas
72% 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
71% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays an interactive world map using D3.js, with countries rendered as SVG paths filled in green and a blue sphere background. Hovering over a country turns it red, and users can zoom and pan the map via mouse interactions enabled by d3.zoom. The map uses d3.geoNaturalEarth1 projection and d3.geoPath to draw country boundaries from TopoJSON data, while country names are loaded from a TSV file and added as SVG `<title>` tooltips.

Lliyaxuanliyaxuan
71% match
Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a map using D3.js, displaying country boundaries over a blue sphere. The visualization uses a Natural Earth projection via `d3.geoNaturalEarth1` and renders geographic paths as SVG elements with the `d3.geoPath` generator. Country data is fetched from the world-atlas TopoJSON dataset and converted using the `topojson.feature` API. The map is styled with CSS, filling countries in light green and the sphere in blue, with a basic interactive-free presentation.

YYIN Wanxuan
71% match