Skip to main content
SimilarExport ZIP
100%

Saipriya ICE-8

✓ Published0🌍 Public
SSaiipriiya
Last edited Mar 27, 2023
Created on Mar 27, 2023
Forked from HTML Starter

This example displays an interactive world map using an equirectangular projection, with countries rendered as yellow SVG paths against a blue sphere background. Hovering over a country highlights it in red. The visualization loads GeoJSON country boundaries from the world-atlas TopoJSON dataset via `json()`, converts them using `feature` from topojson, and draws them with `geoPath` and `geoEquirectangular` from d3. Styling and hover effects are handled through CSS classes on the SVG path elements.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-08 11550685

This example presents an interactive world map using a pink-filled sphere and blue countries with red borders. Hovering over a country highlights it in yellow. The visualization uses D3 v5’s `geoEquirectangular` projection and `geoPath` to render geographic features, while TopoJSON’s `feature` API converts the world-atlas countries-110m.json data into GeoJSON paths. The SVG elements are managed with D3 selections, including `select`, `selectAll`, and `enter`. The map loads the TopoJSON dataset from a CDN and includes basic CSS styling for interactivity.

AAISWARYAMARAPATLA1999
88% match
Loading thumbnail…

Saipriya ICE-8 Country map

This example presents a choropleth map of Indian states, rendered as SVG paths using D3’s geoMercator projection and geoPath generator. Each state is filled with a categorical color from scaleOrdinal, with its name overlaid at the centroid. The code loads TopoJSON from a remote URL, extracts features via topojson.feature, and appends hover tooltips via title elements. Styling in CSS adds black state borders.

SSaiipriiya
87% match
Loading thumbnail…

ICE-8(11630234)

This example displays an interactive world map using an equirectangular projection, with countries rendered in green and a blue ocean sphere. The map loads geographic data from a world-atlas TopoJSON file and visualizes it as SVG paths. Built with D3 v5, it uses `d3.geoEquirectangular` and `d3.geoPath` for projection and path generation, and TopoJSON's `feature` method to convert the data into GeoJSON features. Hovering over a country highlights it in red via CSS.

KKovvuri Supraj
85% match
Loading thumbnail…

ICE - 8 - World Map

This example displays an interactive world map using an equirectangular projection, with countries rendered as SVG paths and a light blue sphere representing the globe. The map loads GeoJSON data from a hosted JSON file, processed through TopoJSON’s `feature` method, and draws each country with a green fill and black stroke. Hovering over a country highlights it in a warm peach color. The visualization uses D3 v5 APIs including `d3.geoEquirectangular`, `d3.geoPath`, and `d3.select`, with React as the underlying framework.

IIndiraSiripurapu
85% match
Loading thumbnail…

World Map ICE 8 Sai Nikitha

This example displays a world map using an equirectangular projection, with all countries rendered as grey SVG paths with black borders. It uses the TopoJSON `feature` API to extract country geometries from the world-atlas dataset, and D3 v5’s `geoPath` and `geoEquirectangular` to generate the paths. A white sphere outline represents the Earth’s boundary. Hovering over any country turns it blue via a CSS `:hover` rule, providing an interactive visual response without additional JavaScript.

NNikitha123171
84% match
Loading thumbnail…

ICE 8

This example renders a world map using the equirectangular projection, filling each country solid red against a blue sphere. It highlights countries in black on hover. The visualization loads TopoJSON world-atlas data, converts it to GeoJSON with TopoJSON’s `feature` method, and draws paths using `d3.geoPath` and `d3.geoEquirectangular`. The SVG output is styled via CSS, and interactions rely on the `:hover` selector.

Vvineeth0000
84% match
Loading thumbnail…

ICE 08 worldmap

This example displays an interactive world map using an equirectangular projection, rendered as SVG paths with countries filled in a light cream color and a blue ocean background. Hovering over any country changes its fill to red, providing immediate visual feedback. The visualization uses D3 v5’s `d3.geoPath` and `d3.geoEquirectangular` for map generation, while TopoJSON’s `feature` method converts the world-atlas countries-110m.json dataset into GeoJSON features for rendering. Styling is controlled through CSS classes for earth and country elements.

Aayodhyanandh
84% match
Loading thumbnail…

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
84% match