100%

D3 - Thailand Map

✓ Published0🌍 Public

Last edited Oct 15, 2018

Created on Oct 15, 2018

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.

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

forked from <a href='http://bl.ocks.org/adkdev/'>adkdev</a>'s block: <a href='http://bl.ocks.org/adkdev/fe15a54ad3748c72e059475e3f43d462'>D3 - Thailand Map</a>

mit Licensed

Similar vizzes

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…

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

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

Loading thumbnail…

D3 Map Nederland

This interactive map of the Netherlands displays provincial boundaries, which users can click to zoom and highlight in red, with a click on the background resetting the view. Built with D3 v6 and TopoJSON, it uses `d3.geoPath` and a Mercator projection to render the shapes, while `d3.zoom` handles panning and scaling between 1x and 8x. The data loads from a remote TopoJSON file via `fetch`, and transitions animate the zoom and fill changes. Hover effects turn regions orange, and SVG elements are used for all rendering.

Llamartm

70% match

Loading thumbnail…

MapD3

This interactive map of Sweden displays municipal boundaries as SVG paths, with a tooltip revealing each region’s name on hover. The visualization relies on D3.js v5’s `geoMercator` projection and `geoPath` generator, while the TopoJSON library supplies the administrative geometry from a GitHub-hosted dataset. Pan and zoom controls, implemented via D3’s `zoom` event, let users explore the country, and region styling changes color on mouseover.

HHaris Vidimlic

68% match

Loading thumbnail…

Map of Vietnam

This map of Vietnam displays the country’s provincial boundaries as grey regions with blue outlines. Built with React and D3 v4, it uses `d3.geoMercator` for projection and `d3.geoPath` to render features filtered from the world GeoJSON dataset. The visualization loads world geography from a remote source, isolates Vietnam’s geometry, and presents the result in an SVG canvas with a simple green background.

KKevin Raj

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

67% match

Loading thumbnail…

Fork of D3 Starter

This example displays an interactive map of India, showing both state boundaries and district-level divisions, with each district colored by its state. Users can zoom and pan the map using d3.zoom, and hovering over a district reveals its name and state in a tooltip. The visualization uses d3.geoMercator for projection, d3.geoPath to render TopoJSON data from two external sources, and d3.scaleOrdinal with schemeCategory10 for colors. The code also includes an orthographic world map with draggable rotation in a separate module.

Aadapavaishnavi12

67% match