ICE - 8 Singapore Map(Revanth)

100%

ICE - 8 Singapore Map(Revanth)

✓ Published0🌍 Public

Last edited Jul 10, 2022

Created on Jul 10, 2022

Forked from ICE - 8 Singapore Topojson using d3

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.

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…

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

85% match

Loading thumbnail…

ICE - 8 - World Map

This interactive world map displays countries as green regions on a blue sphere, highlighting each country in red on hover. The visualization uses a TopoJSON file containing geographic data, loaded from a GitHub gist, and renders the map using SVG paths. Built with React and D3 v5, the code employs D3’s `geoEquirectangular` projection and `geoPath` to generate the map, while the `topojson.feature` function converts the TopoJSON data into GeoJSON features for country boundaries.

Ggunasindhuja

76% match

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

76% match

Loading thumbnail…

ICE 8 India Country Map

Using React and D3 v6, this interactive map of India displays state and district boundaries as SVG paths. A click on any region zooms and pans the map to that area, using `d3.zoom` with a smooth transition. The `geoMercator` projection and `geoPath` render the TopoJSON features, with boundary data loaded from two remote GeoJSON files. The map dynamically filters to show either all states or the districts of the selected state, with fill colors set via CSS.

SSrujana390

76% match

Loading thumbnail…

ICE-8 World Map - Nghia Dang

This interactive world map uses an orthographic projection to display the globe, rendering landmasses in blue and highlighting internal country boundaries with silver strokes. A yellow graticule grid overlays the sphere, which has an empty fill. Built with D3 v7 and React, the visualization fetches country topologies from the world-atlas package, using `d3.geoOrthographic`, `d3.geoPath`, and `d3.geoGraticule`. The `topojson` library's `feature` and `mesh` functions process the data, while SVG paths draw the resulting map elements.

Tteohangxanh

75% match

Loading thumbnail…

ICE-8 INDIA

This visualization displays a zoomable map of India with its states and districts, using a Mercator projection centered on the country. The map renders district boundaries as colored paths with hover tooltips revealing district and state names, while state outlines appear as distinct boundaries. Built with React and D3, the code uses `geoMercator`, `geoPath`, and `scaleOrdinal` to handle projection and coloring, with TopoJSON data from the datameet and deldersveld repositories. The SVG also includes zoom functionality through D3’s zoom behavior.

MManohar Kowthavarapu

74% match

Loading thumbnail…

ICE 8 Indian map

This interactive map of India renders both state and district boundaries using a spherical Mercator projection, centered on the country with color-coded districts from a categorical palette. Hovering over a district turns it yellow and reveals its name and state via a tooltip. Built with React and D3, the code uses `d3.geoMercator`, `d3.geoPath`, and `d3.scaleOrdinal` to generate SVG paths from TopoJSON sources, while `d3.zoom` enables pan and zoom interactions.

Aajayrao0

74% match

Loading thumbnail…

ICE8 - India map

This visualization displays a choropleth map of India, with each district and state boundary rendered as SVG paths. District polygons are filled with colors from `d3.scaleOrdinal` and `schemeCategory10`, while state outlines appear in green with hover effects turning districts black. The map uses `d3.geoMercator` projection and `d3.geoPath` to render TopoJSON data for districts and states. Users can pan and zoom via `d3.zoom`, with tooltips showing district and state names on hover.

Aavnreddy95

74% match