ICE - 8 Singapore Topojson using d3

100%

ICE - 8 Singapore Topojson using d3

✓ Published1🌍 Public

Last edited Jul 10, 2022

Created on Jul 10, 2022

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.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Singapore topoJSON import

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.

RRichard Wong

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

85% match

Loading thumbnail…

ICE 08 11590101

This example presents a world map rendered with D3 v5 and TopoJSON, using the `geoMercator` projection and `geoPath` to draw country boundaries from the world-atlas countries-110m dataset. The SVG displays oceans in blue and countries in purple, with a hover effect that changes the fill color to pink via CSS. The code loads the TopoJSON data asynchronously with `d3.json`, converts it to GeoJSON using `feature`, and appends each country as a path element.

DDivyasri0310

79% match

Loading thumbnail…

ICE 8 World Map with Topojson Data

This visualization displays a world map rendered as an SVG, with country boundaries drawn from TopoJSON data sourced from the world-atlas dataset. It uses D3 v5’s `d3.geoPath` and `d3.geoEquirectangular` to project and draw each country as a blue path with white strokes, while a white sphere outlines the globe. The `topojson.feature` method converts the TopoJSON topology into GeoJSON features for rendering. Hovering over any country changes its fill color to orange via CSS.

Ddivyakota99

79% match

Loading thumbnail…

ICE 8: World Map With TopoJson

This example renders a world map using the D3.js library, displaying countries as green shapes on a blue sphere. It loads TopoJSON data from a GitHub gist and converts it to GeoJSON using the `feature` method from the topojson library. The map uses `d3.geoNaturalEarth1` for the projection and `d3.geoPath` to generate SVG paths for each country and the surrounding sphere, with styling applied via CSS classes.

CChaitanya Galla

79% match

Loading thumbnail…

ICE 8

This example presents a choropleth map of India, rendered using the Mercator projection via `d3.geoMercator` and drawn with SVG paths. Each state is filled with a color from `scaleOrdinal(schemeCategory10)`, and hovering over a region turns it brown. The visualization loads TopoJSON data from a GitHub gist, parses it with the `topojson.feature` method, and projects the geometry using `d3.geoPath`. An explicit title element is added per state based on the data’s `interpolateRainbow` property, though no such property exists in the dataset.

Ppavan0828

79% match

Loading thumbnail…

ICE-8 Q 1.2

This example renders a choropleth map of India using D3.js v5 and TopoJSON, with each state colored via a categorical scale and labeled with its name. The map uses a Mercator projection and d3.geoPath to draw state boundaries as SVG paths, while state names are positioned using pathGenerator.centroid. The data comes from a remote India GeoJSON file, and the visualization highlights interactivity through a CSS hover effect that turns filled states white.

117761A04F1

78% match

Loading thumbnail…

ICE8 World Map

This example displays a world map rendered in SVG using D3.js and TopoJSON. It shows country boundaries filled in yellow against a sky-blue spherical backdrop, created with `d3.geoNaturalEarth1` and `d3.geoPath`. The code fetches GeoJSON data from a GitHub gist, converts it via the `feature` method from TopoJSON, and appends each country path to the SVG. The map’s styling is controlled through CSS classes for the sphere and countries, with a maroon stroke applied to borders.

TTulluripallavi

78% match