HK map

100%

✓ Published0🌍 Public

Last edited May 3, 2020

Created on May 3, 2020

This visualization shows a map of Hong Kong using D3 v5 with SVG rendering. The map displays geographic boundaries through a projection and path generator, with the region outlined against a minimal white background. The code relies on d3.geoPath to convert GeoJSON data into SVG paths, while the page layout uses a simple 960x500 pixel SVG canvas with hidden overflow. The visualization imports D3 from a CDN and structures the map using standard D3 mapping techniques, though the specific data source file is not included in the provided files.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Map of Hong Kong

This interactive map of Hong Kong uses SVG and D3 v4 to let users select districts, with zoom controls for closer inspection. Built with `d3.geoPath` to render geographic boundaries from the included `hongkong.js` data, the visualization updates a text label based on district selection. The code also incorporates the Font Awesome icon library for the zoom buttons and demonstrates common SVG features like event handling and dynamic styling, making it a practical reference for building choropleth-style maps.

Ddrowningchild92

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

A world map drawn with D3.js shows country boundaries as SVG paths projected with the Natural Earth projection, with a dark sphere as the background. The visualization loads geographic data from the world-atlas TopoJSON file and renders each country as a filled path. Interactive mouseover and mouseout events change the fill color and stroke width of individual countries, providing immediate visual feedback. The code uses D3 v5 functions such as `geoPath`, `geoNaturalEarth1`, and `select` alongside the TopoJSON `feature` API.

Hhlkyt

72% match

Loading thumbnail…

地图的交互

This visualization displays a world map rendered with D3 v5 using the geoMercator projection and topojson data from the world-atlas package. Country boundaries are drawn as SVG paths, colored green with a red hover effect, and each country includes a title tooltip showing its name from the accompanying TSV file. The map supports interactive zooming and panning through d3.zoom, which applies a transform to the grouped SVG elements. Population data from a local CSV is loaded but not yet visualized, leaving the focus on the geographic interaction.

HHillKinsh

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…

World Map

This world map visualization renders geographic data as an SVG using D3.js v5. It draws the map with the `d3.geoPath` projection and loads external JSON data via `d3.json`. The page initializes an empty SVG canvas with fixed dimensions, while global styling sets the body margin to zero for a full-viewport display. The code demonstrates basic DOM selection and attribute manipulation in D3, though the actual map geometry and data source are not fully implemented in the visible files.

AAlex Jiasheng Ni

71% match

Loading thumbnail…

Map

This example visualizes a map of Taiwan using a Transverse Mercator projection, with geographic regions rendered as gold SVG paths that turn white on hover. The visualization uses d3-geo, including `d3.geoTransverseMercator` and `d3.geoPath`, to project and draw the geometry. A zoom behavior via `d3.zoom` enables interactive panning and scaling. The geographic data comes from a remote GeoJSON file loaded with `d3.json`, while the projection parameters are tuned to center and scale the map within the SVG canvas.

TTekmal-Bhavana

71% match