ICE-8

100%

✓ Published0🌍 Public

Last edited Nov 3, 2025

Created on Nov 2, 2025

Forked from Map

This interactive D3.js (v7) visualization presents global and India-specific renewable energy shares for 2022 using SVG maps. It employs `d3.geoPath` to render world countries and Indian states as interactive polygons, with hover effects and tooltips. A color gradient legend uses SVG linear gradients to indicate renewable percentages. The tooltip dynamically displays data, while the hover transition adjusts stroke width. The map uses a light blue sphere and graticule, with data-driven coloring applied to geographic regions.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-8 INDIA

This visualization displays an SVG map of India with all states colored using D3’s `scaleOrdinal` and `schemeCategory10`, and labels each state name at its centroid via `d3.geoPath().centroid`. It loads TopoJSON state boundaries from a remote GitHub source, projecting them with `geoMercator`. State paths receive black strokes from CSS, while hover titles show names using appended `title` elements. The code uses `topojson.feature`, `d3.json`, and `d3.selectAll` to render the choropleth-style static map.

HHarshinireddyy19

84% match

Loading thumbnail…

ICE-8

This visualization displays a map of Indian states, each filled with a distinct color from a categorical scale and labeled with its name. The SVG rendering uses `d3.geoMercator` for projection and `d3.geoPath` to generate state boundaries from TopoJSON data. State names are positioned at each path’s centroid, and hover effects are applied to county paths via CSS. The color mapping relies on `scaleOrdinal` with `schemeCategory10`, while the geographic data comes from a remote India-states TopoJSON file.

DDineshK2602

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

82% match

Loading thumbnail…

ICE-8 INDIA

This interactive visualization displays a globe, defaulting to an orthographic projection, with geographic boundaries for countries and graticules. Users can drag to rotate the globe, which updates the paths for countries and the graticule via `d3.geoPath` and the projection’s `rotate` method. Clicking a country switches the projection, such as to a mercator view, and applies transitions. The map uses `d3.geoOrthographic`, `d3.geoMercator`, `d3.drag`, `d3.zoom`, and data from `world-atlas` and a TSV file for country names.

SSaivignesh-9176

82% match

Loading thumbnail…

ICE - 8 : India Map

This visualization displays a choropleth map of India, with each state filled by a distinct color from a categorical scale based on its name. The map renders as an SVG using D3 v5, with geographic paths generated via `d3.geoPath` and a `geoMercator` projection. State boundaries come from a TopoJSON file parsed with `topojson.feature`, and hover interactions change the fill color through CSS.

MMahitha-Moparthi

82% match

Loading thumbnail…

ICE 8 country map

This interactive SVG map visualizes the country of India using a Mercator projection, with each region colored according to a categorical color scale. Built with React and D3 v5, the map loads TopoJSON geographic data from a GitHub Gist and renders paths via `d3.geoPath` and `d3.geoMercator`. The code assigns fill colors using `d3.scaleOrdinal` with the `schemeCategory10` palette, and region names appear as tooltips through appended `title` elements. The styling applies a coral fill with black strokes via CSS.

Mmanojgne

82% match

Loading thumbnail…

ICE 8 making maps

This choropleth map shows the percentage of renewable energy use by country worldwide, using a yellow-green sequential color scale where darker shades indicate higher adoption. It loads country boundaries from the world-atlas TopoJSON dataset and joins them with renewable energy percentages from a GitHub-hosted CSV file. The visualization uses d3.geoNaturalEarth1 for projection, d3.geoPath to render each country as an SVG path, and d3.scaleSequential with an interpolateYlGn interpolator to encode values. An interactive tooltip via SVG title elements reveals exact percentages, while a gradient legend below the map provides a reference scale.

Aadithiarikatla@gmail.com

81% match

Loading thumbnail…

ICE8 Country Map

This visualization renders a choropleth map of Indian states using D3.js with a Mercator projection. It loads GeoJSON data containing administrative boundaries and assigns each state a distinct color from D3’s schemeCategory10 palette. The code employs `d3.geoPath` with the projection to generate SVG paths, appending tooltip titles that display state names. The map uses topojson’s `feature` method to extract geometry, and the styling includes a light green background with white state borders, rendered via SVG elements.

Aakhila157

81% match