Map of Hong Kong

100%

Map of Hong Kong

✓ Published0🌍 Public

Last edited Nov 23, 2019

Created on Nov 23, 2019

Forked from Shapes and Colors with SVG and CSS

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.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

HK map

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.

Nnorangai

84% match

Loading thumbnail…

Interactive Map

An interactive world map rendered as an SVG using D3.js, with pan and zoom controls. The map displays countries as gray polygons with dark borders, and allows users to click on a country to highlight it and display its label. It uses d3.geoEquirectangular for projection, d3.geoPath for rendering, and the d3.zoom behavior for interactive navigation. The map data comes from a TopoJSON file, and the visualization also responds to window resizing by recalculating zoom limits and centering the view.

CChooo4u

71% match

Loading thumbnail…

Untitled

This interactive map of New York City boroughs uses a Mercator projection to display a choropleth where each region’s fill color reflects the length of its name. Hovering over a borough triggers a playful “text art” effect that cycles through random Google Fonts, while clicking zooms into the selected region. Built with D3 v3 and React, the visualization leverages `d3.geo.path` for map rendering, `d3.scale.linear` for color encoding, and animated SVG transitions for the zoom effect.

YYuren Dong

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

71% match

Loading thumbnail…

Map Pan / Zoom with Cities and Text v5

This example displays an interactive map of the world centered on the Pacific, overlaid with red circular markers for eleven cities and their labels. Pan and zoom controls are implemented using the `d3.zoom` API, which applies SVG `transform` attributes to all map paths, circles, and text. The map geometry and city positions are projected using `d3.geoMercator` and `d3.geoPath`, with country outlines loaded from a TopoJSON file. City coordinates come from a CSV loaded via `d3.csv`, and text labels are placed above each marker, each linking to a web search.

Dd3noob

71% match

Loading thumbnail…

Map Pan / Zoom with Cities v5

This map example displays world country boundaries and major global cities, with interactive pan and zoom functionality centered on the Pacific Ocean. The visualization uses d3.geoMercator for projection and d3.geoPath to render geographic features from a TopoJSON world file. City locations from a CSV dataset are plotted as red circles, each hyperlinked to a Google search. Users can apply d3.zoom with a scale extent of 1 to 8, transforming both paths and circles accordingly. The map is rendered as SVG elements within a d3 selection.

Dd3noob

70% match

Loading thumbnail…

map-other-density

This example displays a choropleth map of eight blocks in Palghar district, India, using SVG paths rendered via `d3.geoPath` with a `geoMercator` projection. The map shows the percentage of stunted children per block, with fill patterns generated using the textures library and a slider to adjust classification thresholds. A tooltip appears on mouseover, and zooming is enabled through `d3.zoom`. Data is loaded from a CSV file and joined to GeoJSON features.

Zzoniyac

70% match

Loading thumbnail…

Map Pan / Zoom with Cities and Text v6

This D3.js (version 6) example displays a world map centered on the Pacific Ocean using a Mercator projection, with red circles marking cities from a CSV data file and city names as text labels. Each city is hyperlinked to a Google search for its name. The visualization supports pan and zoom interactions through the `d3.zoom` API, applying the zoom transform to the map paths, city circles, and text elements. The map geometry comes from a TopoJSON file processed with the `topojson` library, and all rendering uses SVG.

Dd3noob

70% match