100%

[The Map of Kaohsiung, Taiwan](http://bl.ocks.org/violetvivirand/f39da85441b08e218422587d88cf86ae)

✓ Published0🌍 Public

Last edited Aug 11, 2016

Created on Jun 19, 2016

A map of Kaohsiung, Taiwan, rendered in SVG with D3 v3, displays the city's administrative districts as interactive regions. Hovering over a district highlights it in green and shows its name in a tooltip. District names and circular markers are positioned at each region's centroid using a Mercator projection. The map is built from TopoJSON data converted from government shapefiles.

AI-generated description

The Map of Kaohsiung, Taiwan

Built with blockbuilder.org

This is my first D3 Block, and I'm still working on it, try hard to learn. :)

How to make the TopoJSON file of Kaohsiung

Download from here, extract them, and use the commands below:

$ ogr2ogr -f GeoJSON -where "C_Name IN ('高雄市')" municipality.json County_MOI_1041215.shp
$ ogr2ogr -f GeoJSON -where "C_Name IN ('高雄市')" town.json Town_MOI_1041215.shp
$ topojson -o kh.json --id-property OBJECTID --properties name=NAME --shapefile-encoding big5 municipality.json town.json

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

[Kaohsiung Bicycle Routes](http://bl.ocks.org/violetvivirand/ca78fdf18a52d60bcc921fd612f38ab9)

This visualization displays the bicycle routes of Kaohsiung City overlaid on an OpenStreetMap base map. It uses D3.js v3 to render the route data as smooth SVG paths on top of a Leaflet map, with hover tooltips showing each route's name. The underlying data comes from Open Data Kaohsiung in TWD97 coordinate format, which is converted to WGS84 before being encoded as TopoJSON and projected onto the map using Leaflet's coordinate system via a custom D3 geographic transform.

VVioletVivirand

82% match

Loading thumbnail…

[Taiwan Map](http://bl.ocks.org/violetvivirand/56cc297a57b0b710263124701c153faf)

Taiwan Map shows the island and its outlying counties as filled polygons overlaid on an OpenStreetMap tile layer, with county names labeled at each region's centroid. The map uses Leaflet for interactive panning and zooming, while D3.js renders the TopoJSON boundaries as SVG paths that reposition on map view changes. The TopoJSON data is converted from shapefiles published by Taiwan’s open-data portal, and hover effects highlight individual counties.

VVioletVivirand

81% match

Loading thumbnail…

Taiwan Map for Datamaps.co

A choropleth map of Taiwan's 22 counties and cities, rendered as an SVG using D3 with TopoJSON. The map visualizes data loaded from an external CSV file, with each region's color intensity reflecting the assigned value. Hovering over a region displays a tooltip with the region's name, and clicking zooms in for a closer view. The map uses a beige base color for regions with no data and blue shades for populated values, with a legend explaining the color scale.

VVioletVivirand

80% match

Loading thumbnail…

Fork of Page Title

This visualization displays a map of Taiwan's counties and municipalities, rendered as an SVG using D3.js. The map uses a Mercator projection centered on Taiwan, with county boundaries drawn using TopoJSON topology data. Each county polygon is interactive, highlighting in yellow on mouseover. The visualization relies on D3's geo projection and path APIs, alongside TopoJSON's mesh and feature methods, with a CSS gradient background applied to the page.

Aannie520143

75% match

Loading thumbnail…

Map

This example visualizes a map of Taiwan using a Transverse Mercator projection, with geographic regions rendered as gold SVG paths that turn white on hover. The visualization uses d3-geo, including `d3.geoTransverseMercator` and `d3.geoPath`, to project and draw the geometry. A zoom behavior via `d3.zoom` enables interactive panning and scaling. The geographic data comes from a remote GeoJSON file loaded with `d3.json`, while the projection parameters are tuned to center and scale the map within the SVG canvas.

TTekmal-Bhavana

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

74% match

Loading thumbnail…

全國運動場館

This visualization shows a map of Taiwan's counties, rendered as an SVG using D3.js version 6. The map uses a Mercator projection with a custom center and scale, and each county is drawn as a path with a light green fill and gray stroke. Hovering over a county triggers a CSS hover effect that changes the fill to light gray, and a simple tooltip displays the county name via a title element. The geographic data comes from a local GeoJSON file loaded with `d3.json`, and the paths are generated using `d3.geoPath`. The React framework is mentioned in the metadata but is not used in the provided code, which relies on plain D3 selections and SVG manipulation.

YYang Shun Yu

70% match

Loading thumbnail…

towns

The visualization displays the geographic distribution of towns across Taiwan, using their names, county affiliations, and administrative codes from a CSV dataset. It presents a map-like layout where each town is depicted as a point or region in relation to its county, with labels showing traditional Chinese names and English romanizations. The code leverages d3.geoPath to render town boundaries or locations from the geospatial data, while d3.forceSimulation could arrange overlapping points into a readable pattern. The rendering relies on Canvas and browser APIs to draw the map, with the source data sourced from a gist by GeoWill.

GGeoWill

70% match