BeiJing

100%

✓ Published0🌍 Public

Last edited Nov 7, 2023

Created on Nov 7, 2023

Forked from vol

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.

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 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.

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

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

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

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

70% match

Loading thumbnail…

City of China

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.

DdaojunL

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

68% match

Loading thumbnail…

ICE 8 Map - China

This interactive map displays China’s administrative provinces as colored paths, rendered using a `d3.geoMercator` projection on an SVG canvas. Users can zoom and pan the map via `d3.zoom`, which transforms the grouped geometry. The visualization loads GeoJSON data from a GitHub gist, applies `d3.geoPath` to convert features into SVG paths, and colors each province with a categorical `d3.scaleOrdinal` scheme. The code leverages TopoJSON’s `feature` API to extract polygon geometries before styling them with CSS rules for fill and stroke.

Aanushaanumula

68% match