Sriram ICE 8

100%

✓ Published0🌍 Public

Last edited Mar 27, 2023

Created on Mar 27, 2023

This visualization displays a world map using an equirectangular projection, with countries rendered as yellow filled paths with black strokes. The map is interactive, as hovering over a country highlights it in red. Built with D3.js v5 and TopoJSON, it uses `d3.geoPath` and `d3.geoEquirectangular` to project geographic data from the world-atlas countries-110m.json file into SVG paths. The background sphere is styled with a blue fill, and the countries are drawn as separate SVG path elements.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Sriram ICE 8 Country map

This visualization displays the states of India as a colored SVG map, with each state filled using a categorical color scale and labeled with its name at the geographic centroid. The code leverages D3’s `geoMercator` projection and `geoPath` to generate the map paths from TopoJSON data, while `feature` and `mesh` from topojson extract the state boundaries. State names are positioned using `pathGenerator.centroid`, and the color scheme comes from `scaleOrdinal(schemeCategory10)`.

SSriram-Voruganti

87% match

Loading thumbnail…

ICE8-ESWAR

This visualization displays a world map using an equirectangular projection, with countries rendered as light green SVG paths on a skyblue sphere. The map is built with D3 v5 and TopoJSON, loading country boundaries from the world-atlas dataset. The `geoEquirectangular` projection feeds into `geoPath` to generate each country’s shape, while a zoom behavior allows interactive pan and zoom on the entire SVG. Hovering changes a country’s fill to maroon, highlighting individual regions.

Ppvreswar7@gmail.com

84% match

Loading thumbnail…

sreekar ice 8 1

This visualization displays a world map using an equirectangular projection, with countries rendered as black shapes with red outlines against a green sphere. The map is drawn as SVG paths generated by `d3.geoPath` and `geoEquirectangular`, using TopoJSON data from the world-atlas package. Hovering over any country changes its fill to yellow via the `.country:hover` CSS rule. The code relies on D3 v5’s `json`, `selectAll`, and `enter` methods to bind the geographic features to the DOM.

SSreekarveeravelly

84% match

Loading thumbnail…

ICE-8(World Map)

This interactive world map displays country boundaries using an equirectangular projection, rendered as SVG paths. The visualization loads geographic data from a TopoJSON world-atlas file and converts it to GeoJSON features via the `topojson.feature` API. Countries are drawn with `d3.geoPath` and respond to hover by changing fill color through CSS. The sphere background uses a blue fill, while countries appear in dark green with black strokes, creating clear visual separation between landmasses and ocean.

Jjayanthamol99

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

83% match

Loading thumbnail…

ICE 8

This visualization displays a world map using an equirectangular projection, with countries rendered in red and oceans in blue. The map is drawn as SVG paths generated by `d3.geoPath`, using geographic data from the world-atlas TopoJSON file, converted to GeoJSON via TopoJSON’s `feature` method. Country shapes respond to mouse hover by changing fill color, and the map is framed by a blue sphere outline.

MMounishSeeni

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

83% match

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

82% match