ICE-8 world map

ICE-8_World_Map

This visualization displays a world map with countries rendered in purple with yellow outlines, set against a blue sphere background. Using d3-geo's geoEquirectangular projection, the code loads GeoJSON data from the world-atlas TopoJSON file via topojson.feature to draw each country path. The map responds to hover events, highlighting countries in green. It also includes a canvas-based alternative implementation using d3.geoPath with a graticule layer.

MMeghanaArepalli

ICE 8 - WORLD MAP

This example displays a world map using a natural Earth projection, rendering each country as a purple SVG path with white borders against a pink background. It loads geographic data from the `world-atlas` TopoJSON dataset and converts it to GeoJSON using the `feature` function from `topojson`. The visualization is built with D3 v5, using `geoNaturalEarth1` for the projection, `geoPath` to generate SVG paths, and `select`/`json` for DOM manipulation and asynchronous data loading. A gray sphere outlines the earth's boundary.

AAshrith Kudidhi

ICE 8 world map

This example displays a world map rendered from TopoJSON country boundaries, with each country filled in light blue and outlined in blue. The visualization uses d3.geoPath with a d3.geoNaturalEarth1 projection to convert geographic data into SVG paths. It loads the worlddata.csv file from a GitHub gist, extracts the country features using the topojson.feature API, and maps them onto a 960x500 SVG canvas.

Ggayathri

ICE-8 Simple World Map

This example displays a simple world map using a Natural Earth projection, with countries rendered as green-filled SVG paths with white borders over a light blue ocean background. It also shows latitude and longitude lines as a graticule overlay. The visualization loads TopoJSON country boundaries from the `world-atlas` package via `d3.json`, converts them to GeoJSON with `topojson.feature`, and draws them using `d3.geoPath` with the projection scaled by `fitSize`. The code uses the D3 v7 and d3-geo-projection libraries, with hover tooltips showing country names from the data properties.

AAbhiramPudi@my.unt.edu

ICE-8 World Map

This is a world map visualization rendered with SVG, showing countries as purple regions with pink borders against a light yellow sphere. The map uses a natural Earth projection and loads geographic data from the World Atlas JSON file. The code imports `geoPath` and `geoNaturalEarth1` from d3, along with the `feature` function from topojson, to generate and project the country boundaries onto the SVG canvas.

Aachalasam

ICE-8

This example displays a natural Earth projection of the world map, with countries rendered in a golden color and outlined with black borders. Hovering over any country turns it white. The visualization uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to draw the map, while TopoJSON’s `feature` method extracts country boundaries from the world-atlas dataset. The SVG sphere background appears sky blue, and the CSS `:hover` rule handles the color change, with body overflow hidden for a clean layout.

JJasvitha Allamsetty

ICE8 - World Map

This example renders a world map using D3.js. It displays countries as pink shapes with black outlines, set against a light green sphere, using a natural Earth projection. The map is built with `d3.geoNaturalEarth1` for projection and `d3.geoPath` to generate SVG path data, while the `topojson` library’s `feature` function converts GeoJSON country boundaries from the world-atlas dataset for rendering.

AAnanyaSamala

ICE-8

This example shows a world map highlighting individual countries in blue that turn red on hover, built with D3 v7 and TopoJSON. It uses `d3.geoNaturalEarth1` for the projection and `d3.geoPath` to render country boundaries from the world-atlas dataset, with data loaded from a CDN via `d3.json`. The SVG rendering applies simple CSS classes for the hover interaction.

CCharith Kapuluru