Skip to main content
๐ŸŒ Public

Share visualization

Send this visualization to others.

Bangkok Map using React D3 Hover and Zoom-in out

Public visualization

Bangkok Map using React D3 Hover and Zoom-in out

0 stars1๐ŸŒ Public
PPichayut Liamthong
Last edited Sep 30, 2020
Created on Sep 30, 2020

This example presents an interactive map of Bangkok with 50 constituencies, sourced from a Wikimedia Commons SVG. Using D3 and React, it enables users to hover over districts to highlight them in yellow and click to zoom in, with an active district highlighted in red. The implementation loads the SVG via `d3.xml`, applies event listeners for mouseover, mouseout, and click, and uses transitions to animate scaling and translation of the map.

AI-generated description

A bangkok map containing 50 cities from Wikimedia Commons.

The SVG Mmap was load using D3 and eventListener was implemented on zoom upon click (still in debugging since the transform still does not align the clicked region on the center).

Comments

Sign in to join the discussion.

MIT Licensed