ICE-8: Fork of Indian map with D3.js

100%

ICE-8: Fork of Indian map with D3.js

✓ Published2🌍 Public

Last edited Apr 4, 2022

Created on Apr 3, 2022

This visualization displays a map of India with individual states and their borders. Using D3.js version 5 and React, it applies a geoMercator projection via d3.geoPath to render the geographic features as SVG paths. The code loads TopoJSON data from a remote URL, using topojson.feature and topojson.mesh to extract state polygons and interiors. State fill is cyan with gray borders, while internal boundaries appear teal. The map fits within a 960 by 500 pixel viewport using projection.fitExtent.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of India Map: ICE-8

This visualization displays a choropleth map of Indian states, with each state filled by a color from the d3 schemeCategory10 scale and labeled with its name. It uses d3.geoMercator and d3.geoPath to project and render the TopoJSON data loaded from a GitHub repository, adding interactivity through SVG title elements. The map includes an adjustment that shifts the data array and custom projection settings to frame the country appropriately.

Aamiralitah

91% match

Loading thumbnail…

ICE8 11554625

This visualization displays a map of Indian states, rendered as an SVG using a Mercator projection centered on Europe. The code employs React for the page structure while D3.js v5 handles the geographic rendering. It loads TopoJSON data from a GitHub repository, converts it to GeoJSON via the topojson library, and draws each state boundary as a white-filled path with grey strokes. The `d3.geoPath` generator applies the projection to transform geographic coordinates into screen positions.

MManohar Kowthavarapu

91% match

Loading thumbnail…

FORK OF ICE-8: FORK OF INDIA MAP WITH D3.js

This choropleth map displays the states of India, with each region filled in a deep maroon color and outlined in a soft silver stroke. Interior boundaries between states are highlighted with a bright cyan line, making the internal divisions stand out clearly. The visualization uses the D3.js `geoPath` and `geoMercator` projection to render GeoJSON features of Indian administrative regions, sourced from a TopoJSON file. It is built within a React framework, and the SVG paths are generated from the `feature` and `mesh` functions of the TopoJSON API.

Mmandalasaikrishna007

90% match

Loading thumbnail…

Fork of India Map: ICE-8

This visualization displays a map of India, with each state rendered as a colored SVG path and labeled with its name. The map uses a spherical Mercator projection, achieved through `d3.geoMercator()` with custom translation and scaling. State boundaries are drawn with a black stroke, and each state’s fill color is assigned from a categorical color scale using `scaleOrdinal` and `schemeCategory10`. State names are positioned at each state’s centroid via `geoPath.centroid()`. The geographic data is loaded from a TopoJSON file containing India’s administrative divisions, processed with the `topojson` library’s `feature` function.

Tttummala17

90% match

Loading thumbnail…

Fork of India Map: ICE-8

This visualization displays a choropleth map of Indian states, colored with a categorical scheme and labeled with state names at their geographic centroids. Using D3 v5, it loads TopoJSON data for India’s administrative boundaries, removes the first feature, and projects the geometry with `geoMercator`. Paths are generated via `d3.geoPath`, while text labels are positioned using `pathGenerator.centroid`. The SVG rendering includes hover titles and a color scale from `scaleOrdinal(schemeCategory10)`, with styling applied through CSS.

DDINESH SAI BOPPANA

90% match

Loading thumbnail…

Fork of ICE 8 country map

This example renders a choropleth map of India using a Mercator projection, with each state filled by a categorical color scale. The visualization loads GeoJSON data from a TopoJSON file hosted on GitHub, then applies `d3.geoPath` to draw the state boundaries as SVG paths. The code uses `d3.zoom` and `d3.event` for interactivity, and `d3.scaleOrdinal` with `d3.schemeCategory10` for coloring. The map includes a static title and uses `d3.geoMercator` with manual translation and scale settings.

DDINESH SAI BOPPANA

90% match

Loading thumbnail…

Fork of ICE 8 : Country map -India

This visualization displays a choropleth map of India, with each district colored by its state. The map renders state and district boundaries as SVG paths, and hovering over a district highlights it in dark green. Built with React, the code uses D3’s `geoPath`, `geoMercator`, and `scaleOrdinal` to project TopoJSON data from deldersveld and datameet, with zoom functionality enabled.

Rrallabandisushen@gmail.com

89% 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

89% match