BeiJing

100%

✓ Published0🌍 Public

Last edited Nov 7, 2023

Created on Nov 7, 2023

Forked from Volcano

This example visualizes the administrative districts of Beijing using a GeoJSON dataset. It renders the district boundaries as SVG paths on a 1600x800 canvas, with each polygon outlined in black and left unfilled. The visualization uses D3.js v6, specifically leveraging `d3.geoNaturalEarth1()` for map projection, `d3.geoPath()` for converting geographic coordinates to SVG path data, and `d3.json()` for loading external data. The code also includes commented-out alternatives for other projections like Mercator and Mollweide, as well as a disabled label overlay.

AI-generated description

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

Similar vizzes

Loading thumbnail…

BeiJing

This example visualizes the administrative districts of Beijing using GeoJSON data loaded from `beijing.json`. It renders a map with the districts as white polygons outlined in black, and each district displays its name in a tooltip on mouseover. The visualization uses D3 v6 with a `d3.geoNaturalEarth1` projection fitted to the SVG canvas via `projection.fitSize`, and paths are generated with `d3.geoPath`. Tooltips are implemented with the `d3-tip` library, triggered by `mouseover` and `mouseout` events.

Vvivianaaai@qq.com

95% 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…

Karte Berlin

This example shows a map of Berlin’s districts, rendered as outlined polygons on a blank SVG canvas. The visualization uses the `geoConicEqualArea` projection and `geoPath` from D3 to convert GeoJSON features into SVG paths. Data is loaded asynchronously via `d3.json` from a GitHub-hosted GeoJSON file provided by Funke Interaktiv. The React component structure manages state and renders the map, with styling applied through CSS to define stroke and fill for the district boundaries.

CChrisHeinirch

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…

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…

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

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…

Untitled

This example displays a map of New York State, rendering its geographic boundaries as steel-blue shapes on an SVG canvas. It loads GeoJSON data from a remote GitHub gist using `d3.json` and projects the coordinates with `d3.geoAlbersUsa`. The code uses `d3.geo.path()` to convert the projected features into SVG path data, appending each region as a `<path>` element within grouped `<g>` elements. The visualization relies on D3 v5 and React, with the final output showing a simple, unadorned state outline.

Llupica.matthew@gmail.com

69% match