Bangkok Map using React D3 Hover and Zoom-in out

100%

Bangkok Map using React D3 Hover and Zoom-in out

✓ Published1🌍 Public

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

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 - Thailand Map

This map of Thailand displays provincial boundaries with an interactive zoom-and-pan effect. Built with D3 v3, the visualization uses a Mercator projection and renders each province as an SVG path. Hovering over a province highlights it in orange and displays its name in large text, while clicking a province zooms in by a factor of four, centers it, and recolors it pink. Clicking again returns the map to its default view. The map is generated from GeoJSON data and includes smooth animated transitions for zooming.

663anp3ca

75% match

Loading thumbnail…

Bangkok Map showing HIV patient with the interactive menu

This interactive visualization combines a Bangkok district map with a multi-line chart to explore HIV patient data. The map displays circles sized proportionally to new HIV cases per district for 2020, with data loaded from CSV files and the SVG map rendered via D3. Users can toggle selection mode to click districts, which updates a Vega-Lite chart showing quarterly trends. Menus switch between metrics like TX_NEW and TX_CURR, while a slider filters by quarter. Built with React, D3, and Vega-Lite API.

PPichayut Liamthong

71% match

Loading thumbnail…

Bangkok Map showing 'New HIV Cases in 2020'

This visualization displays the number of new HIV cases in Bangkok during 2020, using a map of 50 districts. Larger pink circles represent higher case counts, and hovering over a circle shows the exact number for that district. The map is loaded from an SVG via D3's `d3.xml`, with case data pulled from a CSV. The annotation is built with React and D3, using `mouseover` and `mouseout` events to display tooltips. The project uses D3 v5 and React 16.9, with plans to add interactive menus for selecting different metrics.

PPichayut Liamthong

71% match

Loading thumbnail…

Bangladesh map interaction with Sales Data

This example shows sales data for seven districts of Bangladesh overlaid on a choropleth-style map, displaying yearly, monthly, and weekly figures via tooltips on hover. The map is rendered as SVG using D3 v5, with geographic paths generated from TopoJSON data via d3.geoPath and a Mercator projection. Interactive zoom and drag are enabled through d3.zoom. District shapes are colored and styled with CSS, and tooltips are created by appending SVG title elements.

FFoysal Ahmed Emon

69% match

Loading thumbnail…

Bangladesh map interaction with Sales Data

This visualization displays Bangladesh sales data across a map, with hover interactions revealing yearly, monthly, and weekly figures for each district. Built with D3 v5, it uses `d3.geoMercator` and `d3.geoPath` to render TopoJSON map features as SVG paths. Zoom and drag functionality is implemented via the `d3.zoom` API, while district-specific sales information appears as native SVG `<title>` tooltips. The sales dataset is loaded from a local JSON file and matched to map districts by name.

SShamim Ehsan

69% match

Loading thumbnail…

Bangladesh Map

This example shows a choropleth-style map of Bangladesh, displaying the country’s districts with green fills and teal borders for internal boundaries. The visualization renders as an SVG using React, with the `geoMercator` projection and `geoPath` from D3 v5. TopoJSON data is loaded from a GitHub repository and converted to GeoJSON using the `feature` and `mesh` functions. The projection is fitted to the map extent, and district paths are drawn individually, with interior mesh lines separating administrative regions.

AAAL FORHAD

69% match

Loading thumbnail…

Bangkok Map showing HIV patient with the interactive menu

This interactive map of Bangkok displays HIV patient data for fifty districts, with circles overlaid on each district where the circle's size represents the number of new HIV cases in 2020. Users toggle between viewing "New" cases and "Currently on ARV" patients via a menu, and a slider selects the quarter (Q1–Q4). The visualization loads a Wikimedia Commons SVG map with D3, uses jQuery for DOM manipulation, and renders circle overlays with SVG animations, with data sourced from CSV files.

PPichayut Liamthong

69% match

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

68% match