Skip to main content
100%

D3 - Thailand Map

✓ Published0🌍 Public
Aadkdev
Last edited Apr 14, 2017
Created on Jan 26, 2017

This interactive map of Thailand displays province-level geographic data from the apisit/thailand.json GeoJSON dataset, rendered as SVG paths using a customized Mercator projection. Hovering over a province highlights it in orange and displays its name in large text, while clicking a province smoothly zooms in at 4x scale, recolors the selected province, and updates the label. Clicking the background resets the view. Built with D3 v3, the visualization combines mouse interactions with animated transitions for an engaging exploration of Thai administrative boundaries.

AI-generated description

D3 - Thailand Map

Basic d3 Thailand map with hover info and zoomable when mouse click.

Based on:

Data:

Thailand GeoJson Data: - apisit's thailand.json

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
95% match
Loading thumbnail…

Thailand map by population density

This interactive D3.js map visualizes population density across Thailand’s provinces, colorizing each region on a white-to-blue gradient based on density values. Hovering highlights a province in orange and displays its name and density in a large text label. Clicking a province triggers a smooth zoom animation (750 ms) to focus on that region, changing its fill to a distinct pink while others return to their density-based colors. The map uses a customized Mercator projection centered on Thailand, with vector-effect non-scaling strokes for crisp borders. Population data comes from a local JSON file, and the visualization is implemented with SVG and animated transitions under the MIT license.

663anp3ca
84% match
Loading thumbnail…

Thailand map by population density

This interactive map of Thailand visualizes population density by province, with colors ranging from white to blue as density increases. Hovering over a province displays its name and density value, while clicking zooms in on the selected province with a smooth animated transition, highlighting it in pink. The visualization uses a Mercator projection customized to center Thailand, and it loads geographic data from an external JSON file. Built with D3 v3, the map renders as SVG and supports zoom-on-click interactions.

Aadkdev
83% match
Loading thumbnail…

map

This interactive dashboard visualizes election results across Thai provinces, combining a geographic map with a dot-matrix chart. The map renders GeoJSON data using d3.geoMercator and d3.geoPath, with tooltips displaying province names and click events triggering alerts. A separate bivariate choropleth legend uses a color matrix to show relationships between electoral irregularities and victory margins. The visualization supports filtering by political party and election type (district or party-list), with interactive features including hover tooltips and animated state changes. The layout integrates multiple D3.js components including SVG rendering and custom color schemes.

NNatnaree kludbupa
78% match
Loading thumbnail…

Fork of D3 Starter

This example presents a tile grid map of Thailand’s provinces, using a dot per electoral district to compare three metrics: reported problems, invalid ballots, and voter turnout. A tab interface switches between these modes, recoloring the dots accordingly, with hover tooltips identifying each district. Built with D3 v7, the visualization positions province tiles via a custom grid coordinate system and renders the underlying SVG with rectangles, text, and circles. Data is embedded directly in the code as a JavaScript array of province names, grid positions, and district counts.

66642113326@student.chula.ac.th
76% match
Loading thumbnail…

Bangkok Map using React D3 Hover and Zoom-in out

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.

PPichayut Liamthong
73% match
Loading thumbnail…

China Map with Province Name Tooltip v4

This choropleth map of China uses D3 v4 to render province boundaries from a GeoJSON file as an SVG. The map is a simple, static geographic visualization that colors each province as a filled polygon. Hovering over a province displays its name in a tooltip, providing a straightforward way to identify regions. The visualization focuses on the geographic layout of China with minimal visual elements, letting the province names appear on demand through the tooltip. The use of the d3.js library and SVG rendering allows for clean, scalable vector output. The project is built using blockbuilder.org and is available under the MIT license.

Aabrahamdu
72% match
Loading thumbnail…

D3 Provincie Nederland

This interactive map of Dutch provinces uses D3.js to display geographic boundaries and animate a zoom-and-pan interface. It fetches TopoJSON data from Cartomap, projects it with `d3.geoMercator`, and renders paths via `d3.geoPath`. Clicking a province highlights it in red and smoothly zooms using `d3.zoom` and `transform` transitions, while a custom dummy coordinate marker appears as a small circle. The SVG output includes subtle stroke opacity and a dark background for contrast.

Rralfz123
71% match