Fork of Fork of ICE8 USA Map

100%

Fork of Fork of ICE8 USA Map

✓ Published0🌍 Public

Last edited Mar 29, 2023

Created on Mar 29, 2023

This example displays a choropleth map of India, highlighting the country's regional boundaries with a simple gray-and-black color scheme. It uses a custom `d3.geoAlbersIndia` projection to render the map from TopoJSON data loaded via the `india-atlas` package, while also drawing a separate India outline using `d3.geoMercator` and `world-atlas` data. The code leverages `d3.json`, `d3.geoPath`, `topojson.feature`, and `d3.scaleOrdinal` to process and visualize the geographic shapes, with CSS hover states that turn regions red.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE 8 country map

This example visualizes an interactive choropleth map of India with hover highlighting, using a Mercator projection to render individual states as colored paths. The map displays each region with a categorical color scale and a tooltip title showing the region name. Built with D3 v5 and TopoJSON, the code loads India’s geographic data from a GitHub Gist, projects it using `geoMercator` and `geoPath`, and applies color via `scaleOrdinal` and `schemeCategory10`. The SVG rendering and zoom behavior are handled through D3’s selection and event APIs.

SSaiSreya1

91% match

Loading thumbnail…

Fork of ICE 8 country map

This example displays a choropleth-style map of India rendered in SVG, with each state filled by a categorical color scale. It loads TopoJSON data from a GitHub gist and projects the geometry using `d3.geoMercator` with a custom translation and scale. The visualization leverages `d3.json` for fetching, `topojson.feature` for conversion, and `d3.geoPath` to generate paths. Hovering over a state turns it orange via CSS, while the map is titled "India Map" using a simple text element.

Aamiralitah

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 Fork of Fork of Fork of ICE 8 country map

This visualization displays a choropleth map of India, with individual states filled using an ordinal color scale. The map is rendered as SVG paths generated via `d3.geoPath` and a Mercator projection, with the geographic data parsed from a TopoJSON file using the `feature` function. The code also integrates zoom and pan functionality from D3 v5, and applies a hover effect through CSS to highlight state boundaries.

DDINESH SAI BOPPANA

90% match

Loading thumbnail…

Fork of Fork of India Map: ICE-8

This example displays a choropleth map of India’s administrative regions, colored with a categorical palette and labeled with state names. The visualization uses D3 v5’s `geoMercator` projection and `geoPath` to render TopoJSON boundaries, while `scaleOrdinal` and `schemeCategory10` assign fills. The code loads geographic data from a remote TopoJSON source and manipulates the feature collection by removing the first entry before drawing.

YYerlan Yeszhanov

89% match

Loading thumbnail…

Fork of ICE 8 country map

This example presents an interactive choropleth map of India, rendered as SVG paths using the Mercator projection. The visualization colors each state based on a categorical scale, with hover effects highlighting regions in orange. Built with D3 v5, the code loads TopoJSON data from a GitHub gist and uses `d3.geoPath` and `d3.geoMercator` for geographic rendering. The implementation leverages `d3.json` for data loading and `d3.schemeCategory10` for color assignment, with CSS controlling the hover interaction.

TTejucmandava

89% match

Loading thumbnail…

Fork of India Map ICE-8

This D3.js visualization renders a choropleth map of India, coloring each state from a categorical palette based on its name. The map uses the Mercator projection to position SVG paths generated via `d3.geoPath`, with state boundaries outlined in white. State labels are placed at each polygon’s centroid, and hovering over a state turns it yellow. The geographic data comes from a TopoJSON source, which is converted to GeoJSON using the `topojson` library’s `feature` and `mesh` functions.

Rreddysushma994@gmail.com

89% match

Loading thumbnail…

Fork of ICE 8 country map

This example displays a choropleth-style map of India, colored with the d3.scaleOrdinal and schemeCategory10 palette, with hover states that turn regions orange. The visualization uses d3.geoMercator projection, d3.geoPath for rendering, and topojson.feature to parse GeoJSON from a geoBoundaries TopoJSON file hosted on GitHub. The React-based code loads data via d3.json, appends SVG paths, and includes zoom functionality through d3.zoom, with the map heading and styling defined in HTML and CSS.

YYerlan Yeszhanov

89% match