Singapore topoJSON import

100%

Singapore topoJSON import

✓ Published0🌍 Public

Last edited Apr 13, 2021

Created on Apr 9, 2021

This example displays the planning areas of Singapore as interactive SVG polygons, loaded from an external topoJSON file and rendered using D3’s `geoMercator` projection and `geoPath` generator. The map supports pan and zoom via the `d3.zoom` behavior with configurable scale and translate extents. Hovering over a region changes its fill color to red, and clicking logs the feature to the console. The visualization demonstrates importing topoJSON data with the `topojson.feature` helper, projecting geographic coordinates, and attaching zoom interactivity to a D3 selection.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE - 8 Singapore Topojson using d3

This example visualizes a choropleth map of Singapore’s planning areas using a TopoJSON dataset loaded from a GitHub gist. It renders the map as SVG paths with a blue fill and yellow hover highlighting, using a Mercator projection fitted to the viewport. The code employs `d3.geoMercator`, `d3.geoPath`, and `topojson.feature` to convert the TopoJSON data into drawable paths, while `d3.zoom` enables pan and zoom interactions with configurable scale and translate extents. The visualization runs entirely in the browser with D3 v6 and the d3-geo-projection module.

SShishiraRudrabhatla

87% match

Loading thumbnail…

ICE - 8 Singapore Map(Revanth)

This interactive map of Singapore displays planning area boundaries loaded from a JSON file hosted on GitHub. The visualization uses D3’s geo-mercator projection and geoPath to render the polygons within an SVG, and supports mouse-wheel zoom and drag-panning via d3.zoom. Each region is clickable and changes color on hover, with the area name shown as a tooltip. The map is built with D3.js and topojson, styled with a pink background and blue fill.

RRevanthGrreddy

76% match

Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as SVG paths, with country boundaries drawn from TopoJSON data. The visualization uses D3 v5’s `geoMercator` projection and `geoPath` to convert geographic coordinates into screen paths, while the `topojson.feature` API extracts country geometries from the world-atlas dataset. All countries are appended as individual `path` elements to a 960×500 SVG canvas. The code loads data asynchronously via `d3.json` and relies on the bundled `index.js` to handle the data-binding and path generation.

Aaxliao

75% match

Loading thumbnail…

TopoJSON

This visualization displays a world map rendered as a sphere using the TopoJSON format. The map shows country boundaries in blue with no fill, projected using the geoEqualEarth projection. The code loads geographic data from a gist, converts TopoJSON to GeoJSON using topojson’s `feature` function, and renders paths with d3’s `geoPath`, all within a React component drawing to SVG.

KKoundinya

74% match

Loading thumbnail…

Let's make a map with D3.js!

This example uses D3.js to build an interactive orthographic map of the world, rendered as SVG paths. It loads GeoJSON country boundaries from a TopoJSON dataset via `topojson.feature`, then draws the globe with `d3.geoOrthographic` and `d3.geoPath`. Hovering highlights countries in red, while the `d3.zoom` behavior enables pan and zoom transformations on the entire map group.

Nnouralkhoury

74% match

Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map rendered with SVG paths, using D3.js v5 and TopoJSON. It loads geographic country boundaries from the world-atlas dataset and projects them with a Mercator projection. The code uses `d3.geoPath` and `d3.geoMercator` to generate the map, while `topojson.feature` converts the TopoJSON data into GeoJSON features. Countries appear filled in steel blue with black, semi-transparent borders, demonstrating a minimal choropleth-style base map.

HHwl98

74% match

Loading thumbnail…

Untitled

A world map rendered in the Mercator projection displays country boundaries as grey paths with thin white strokes. The example demonstrates loading GeoJSON-derived topology data from a local `world-110m2.json` file and converting it to SVG paths using `d3.geoPath`. The map is centered and rotated with `d3.geoMercator` and `projection.rotate`, and country features are extracted via `topojson.feature` from the TopoJSON library. The page uses D3 v7 to fetch the data asynchronously with `d3.json` and append the resulting paths to an SVG container.

Sspace-captain96

74% match

Loading thumbnail…

Map it

This visualization presents a world map created from TopoJSON data loaded via `d3.json` and tab-separated country names from `d3.tsv`. The map is rendered as SVG elements using the `d3.geoPath` projection, with the code structuring asynchronous data loading through `Promise.all`. The example demonstrates basic geographic data binding and SVG rendering, where the map fills a 960×500 canvas with a minimal, clean aesthetic. It serves as a starting point for adding interactive features or choropleth styling.

Yylzami40

74% match