Skip to main content
100%

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

✓ Published0🌍 Public
VVioletVivirand
Last edited Aug 11, 2016
Created on Jun 30, 2016

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.

AI-generated description

Kaohsiung Bicycle Routes

Built with Leaflet, blockbuilder.org

Data Source

Please download it from Open Data.Kaohsiung. However, the unit of the data is based on TWD97, we need to convert them to something like WGS84 then things would get easier.

If you wanna build your own script to convert, here are some references:

Or you gonna use somebody else's script to achievve the goal, here are something you can use:

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

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

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.

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

My bike route to UofT.

This visualization animates a bike route to the University of Toronto on a Leaflet map with a dark CartoDB basemap. A moving marker travels along the path, which is drawn from a series of GeoJSON points containing timestamps. The code uses d3.json to load the GeoJSON and d3.geo.path with a custom Leaflet projection to convert coordinates into SVG paths, while d3.svg.line connects the points into a single route. A transition animates the marker along the line, with the path and waypoints also rendered in SVG.

MMbrownshoes
68% match
Loading thumbnail…

Vector Tiles

This interactive map displays road networks from Mapzen vector tiles, rendered as SVG paths over OpenStreetMap basemap tiles. The visualization uses d3-tile to manage tile loading and d3.zoom for panning and scaling, with vector data fetched from Mapzen’s tile server. Roads are styled by class (highway, minor_road, rail) and sorted by sort_key for correct layering. The projection updates dynamically with zoom, and hovering shows coordinates using d3.geoMercator inversion.

JJuanSMartinez
66% match
Loading thumbnail…

GPS

This example visualizes GPS route data on an interactive map, showing a path of timestamped waypoints overlaid on OpenStreetMap tiles. The map centers on the route’s starting location and renders the track as a red line connecting green waypoints. Built with D3.js v5 and Leaflet, the code uses `d3.geoPath` with a custom `d3.geoTransform` to project GeoJSON coordinates into Leaflet’s layer points, while SVG elements are appended to the map’s overlay pane for animation and styling.

XXiaoyu Su
65% match
Loading thumbnail…

Vector Tiles

This example displays a static vector-tile map of San Francisco’s roads, with major highways, minor roads, and rail lines rendered as stylized SVG strokes. Using D3 v3, it loads Mapzen’s OpenStreetMap “roads” tiles via `d3.json`, sorts features by `sort_key`, and draws each path with `d3.geo.path` and a Mercator projection. A custom `d3.geo.tile` helper computes the visible tile range and scale, while CSS classes like `.highway` and `.rail` assign distinct colors and widths.

Mmbostock
65% match
Loading thumbnail…

HK map

This visualization shows a map of Hong Kong using D3 v5 with SVG rendering. The map displays geographic boundaries through a projection and path generator, with the region outlined against a minimal white background. The code relies on d3.geoPath to convert GeoJSON data into SVG paths, while the page layout uses a simple 960x500 pixel SVG canvas with hidden overflow. The visualization imports D3 from a CDN and structures the map using standard D3 mapping techniques, though the specific data source file is not included in the provided files.

Nnorangai
65% match