Skip to main content
SimilarExport ZIP
100%

Fork of Let's make a map with D3.js!

✓ Published0🌍 Public
GGangtokMet
Last edited Jun 25, 2022
Created on Jun 25, 2022

This visualization displays the district boundaries of Sikkim, India, as a wireframe-style map rendered using D3.js v5 and SVG. It uses `d3.json` to load a local GeoJSON file containing district polygons, then projects them with a Mercator projection centered on the region. The `d3.geoPath` generator draws the outlines, while the SVG viewBox is set to a fixed coordinate system. The map shows only the raw feature boundaries without fills, emphasizing the geometric shapes through thin, semi-transparent strokes.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Let's make a map with D3.js!

This example uses D3.js v5 and TopoJSON to render an interactive map of Bhutan as a static SVG visualization. The code imports `geoMercator` and `geoPath` to project geographic coordinates onto a 960×500 canvas, with the country’s polygon data embedded directly in the script. A blue sphere background and light-green country fill with subtle black strokes are styled via CSS. The map is rendered using SVG paths, demonstrating a straightforward Mercator projection without additional interaction or animation.

SSubhamChhetri
79% match
Loading thumbnail…

Sikkim Map

This visualization displays the Indian state of Sikkim, rendered with its internal district boundaries highlighted in teal against a light gray globe. The map uses a natural Earth projection via d3.geoNaturalEarth1 and d3.geoPath to draw geographic features, while d3.geoGraticule adds the background graticule grid. The React component loads GeoJSON data through d3.json and converts it using topojson.feature and topojson.mesh, applying CSS styling to differentiate land, sphere, graticules, and interior borders.

Hhimanshucse2012
79% match
Loading thumbnail…

Fork of Fork of Fork of india map

This visualization displays a zoomable map of India with all its districts and states, rendered as SVG paths. The map uses categorical colors for districts and overlays state boundaries with red strokes. Built with D3 v5, it employs `d3.geoMercator` for projection and `d3.geoPath` to generate paths from TopoJSON data. The map supports interactive zooming via `d3.zoom`, and hovering over districts changes their fill to silver, while tooltips show district and state names from the loaded data.

DDivyaVellanki
79% match
Loading thumbnail…

Fork of Fork of Fork of india map

This visualization shows a choropleth map of India with district-level boundaries colored by state and overlaid with state outlines, enabling pan and zoom interaction. The map renders districts using `d3.geoPath` with a `geoMercator` projection, while state and district data come from external TopoJSON files. Hovering a district displays its name and state in a tooltip via appended `title` elements, and the view transforms with `d3.zoom`. District colors derive from `scaleOrdinal` with `schemeCategory10`.

Ssaiteja0725
77% match
Loading thumbnail…

Fork of India Map

This visualization displays a choropleth map of India with its districts and states, rendered using the Mercator projection and geographic path generation. It overlays district boundaries colored by state using `d3.scaleOrdinal` with `schemeCategory10`, while state borders are stroked in black, and hovering highlights districts in dark blue. The map supports interactive zooming via `d3.zoom`, with district and state data loaded from GeoJSON and TopoJSON sources, and uses SVG paths for rendering.

GGogineni44
77% match
Loading thumbnail…

Fork of Let's make a map with D3.js!

This example displays a world map rendered as SVG paths, with countries filled in light green against a blue spherical backdrop. It uses D3.js v5’s `geoPath` and `geoNaturalEarth1` projection to generate geographic outlines from the world-atlas TopoJSON dataset. The code also loads the TopoJSON library to extract country features, then appends each path to the SVG container. The visualization demonstrates a straightforward choropleth-style map without interactivity, emphasizing the projection and vector rendering pipeline.

SSnapika
77% match
Loading thumbnail…

Fork of Let's make a map with D3.js!

This example presents a static world map rendered as SVG, showing countries as pink regions on a sky-blue spherical backdrop. The map is built using D3.js version 5 and the topojson library, which decodes GeoJSON-like data from the `world-atlas` package. The `d3.geoPath` and `d3.geoNaturalEarth1` APIs handle the projection and path generation. The code first draws a full sphere, then loads country boundaries from a remote JSON file and appends them as separate paths. The styling uses a faint blue stroke for country borders.

Bbhanuprasadk19
77% match
Loading thumbnail…

Fork of india map

This interactive visualization displays India’s administrative divisions, using distinct colors for districts and dark green highlighting on hover. It also marks state boundaries with a black stroke. The map is rendered as SVG using `d3.geoPath` with a Mercator projection, and supports zoom and pan via `d3.zoom`. District and state boundaries come from TopoJSON files, with district names and states shown as tooltips. The code also loads a CSV of Indian cities, though city markers are not rendered.

Bbindhureddy98
76% match