Prasanth ICE - 8 - World Map

100%

Prasanth ICE - 8 - World Map

✓ Published0🌍 Public

Last edited Apr 13, 2023

Created on Apr 13, 2023

This interactive world map displays countries in green over a blue sphere, with countries highlighting red on hover. Built with React and D3 v5, the visualization uses `d3.geoEquirectangular` projection and `d3.geoPath` to render geographic boundaries. GeoJSON data is fetched from a GitHub gist and processed through TopoJSON's `feature` function. Styling via CSS classes controls sphere fill, country colors, and hover effects.

AI-generated description

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

Similar vizzes

Loading thumbnail…

ICE - 8 - World Map

This interactive world map displays countries as green regions on a blue sphere, highlighting each country in red on hover. The visualization uses a TopoJSON file containing geographic data, loaded from a GitHub gist, and renders the map using SVG paths. Built with React and D3 v5, the code employs D3’s `geoEquirectangular` projection and `geoPath` to generate the map, while the `topojson.feature` function converts the TopoJSON data into GeoJSON features for country boundaries.

Ggunasindhuja

87% match

Loading thumbnail…

Prasanth ICE - 8 - Map

This map visualization displays the administrative regions of India, with each state filled using a categorical color scale and labeled with its name. The geographic data is loaded as a TopoJSON file from a GitHub gist, and the map is rendered using D3 v5’s `geoPath` with a `geoMercator` projection. The code builds SVG paths from the TopoJSON features using `topojson.feature`, applies colors via `scaleOrdinal` and `schemeCategory10`, and places text labels at each state’s centroid. The visualization highlights how D3’s geo and selection APIs combine to create a choropleth-style administrative map.

PPrasanth

85% match

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

84% match

Loading thumbnail…

ICE-8 World Map

This visualization presents a world map rendered in an SVG, where countries appear in light green with purple outlines and the ocean is filled with a blue sphere. The map is generated using D3.js (v5) with a geoEquirectangular projection and the geoPath function to draw geographic shapes. TopoJSON's feature method converts country boundaries from the world-atlas countries-110m JSON data source, while the CSS defines the visual styling for the sphere and country elements.

Kkartik900

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

83% match

Loading thumbnail…

ICE8-CREATION OF WORLD MAP

This visualization renders a world map using D3.js and TopoJSON within a React project. It displays countries as orange SVG paths with red strokes on a blue sphere. The code uses `geoEquirectangular` and `geoPath` projections, sourcing geographic data from the world-atlas JSON. Countries highlight blue on hover, and the map is generated using D3's selection and data join methods.

Aaiswaryapalla

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…

Saipriya ICE-8

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.

SSaiipriiya

83% match