Madan's ICE-8

100%

✓ Published0🌍 Public

Last edited Mar 29, 2023

Created on Mar 29, 2023

This example displays a world map using an equirectangular projection, with countries rendered as yellow-filled SVG paths with black borders. Hovering over any country turns it white. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using the `feature` method, then projects it with `d3.geoPath` and `geoEquirectangular`. The visualization is built with D3 v5 and rendered as SVG elements within a fixed-width page.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-8 World Map

This example displays a world map using an equirectangular projection, rendered as an SVG with D3 v5. The visualization shows all countries from the world-atlas TopoJSON dataset, filled in yellow with red borders, and highlights each country in gray on hover. It uses `d3.geoPath` with a `geoEquirectangular` projection and processes the TopoJSON data through the `feature` method from the topojson library to generate geographic paths.

IIndhuKrishnaraj

84% match

Loading thumbnail…

Madan's ICE-8 Country Map

This interactive map displays the 50 U.S. states as red land areas with black borders, using a geographic projection. The visualization relies on `d3.geoPath` with the `geoAlbersUsaTerritories` projection to render the map from TopoJSON data loaded via `d3.json` and the `topojson` library’s `feature` and `mesh` functions. React manages the component state and SVG rendering, while CSS hover styling changes state colors from red to blue. The map refreshes its data asynchronously, initially showing a loading message before presenting the full geographic layout.

Mmadanvemulapally

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

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

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

82% match

Loading thumbnail…

ICE-08 11603435

This visualization displays a world map using an equirectangular projection, with countries rendered as black-filled paths against a blue ocean sphere. It loads geospatial data from the world-atlas TopoJSON file and converts it to GeoJSON using the `feature()` method from TopoJSON. The D3 v5 code employs `geoEquirectangular()`, `geoPath()`, and `.projection()` to generate the map geometry. Countries change to a red color on hover through a CSS `:hover` rule, and the SVG output is fixed at 960 by 500 pixels.

0057SatvikDamera

82% match

Loading thumbnail…

World Map ICE 8

This visualization displays a global world map using the equirectangular projection, with countries rendered as individual SVG paths filled in brown and outlined in black. The sphere background is shaded blue, and hovering over any country highlights it in a darker orange. It uses D3 v5’s `geoPath` and `geoEquirectangular` functions together with TopoJSON’s `feature` method to convert country boundaries from the world-atlas dataset. The map is drawn entirely with SVG elements, and interactivity is handled by CSS hover selectors.

Mmboinapally17

81% match

Loading thumbnail…

World Map ICE 8

This example displays a world map using an equirectangular projection, with individual countries colored brown against a blue sphere background. Hovering over a country highlights it in dark orange. The visualization is rendered as SVG using D3 v5, with geographic paths generated by `d3.geoPath` and country boundaries derived from the world-atlas TopoJSON dataset. The `geoEquirectangular` projection defines the map layout, while CSS hover rules handle the interactive highlighting.

EEeshwarReddy

81% match