Skip to main content
SimilarExport ZIP
100%

Fork of ice8

✓ Published0🌍 Public
SSaivignesh-9176
Last edited Mar 29, 2023
Created on Mar 29, 2023
Forked from HTML Starter

This example displays a geographic map of the world using the D3.js library, with the visualization rendered as an SVG element. The map is created using the `d3.geoPath` and `d3.geoProjection` features, specifically leveraging the `d3-geo-projection.v3` extension for custom map projections. The code loads geographic data via TopoJSON and utilizes D3’s projection functions to transform coordinates. The page is styled with CSS and incorporates both the D3 core and TopoJSON libraries, demonstrating a static yet interactive-ready map visualization within an HTML document.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of World Map : ICE-8

This example visualizes a world map using an azimuthal equidistant projection, with countries rendered as light green SVG paths over a blue sphere. It loads geographic data from the world-atlas TopoJSON dataset via `d3.json`, converts it to GeoJSON features using `topojson.feature`, and draws them with `d3.geoPath` and `geoAzimuthalEquidistant`. The code imports these functions from the d3 v5 and topojson libraries within a React framework context.

Aarcothanmukha
87% match
Loading thumbnail…

Fork of World_Map_ICE_8

This example displays a world map rendered as an SVG using the Natural Earth projection. The visualization shows landmasses in a purple fill with red country borders and blue graticule lines over a white sphere, all generated with d3.geoPath. The code loads geographic data from a TopoJSON world atlas using d3.json and processes it with topojson.feature and topojson.mesh. React manages the component state through hooks, while the Marks component structures the SVG paths for each geographic layer.

SsreepavanKothapalli
86% match
Loading thumbnail…

Fork of World_Map_ICE_8

This example displays a world map rendered as an SVG using the Natural Earth projection. The visualization shows landmasses in a purple fill with red country borders and blue graticule lines over a white sphere, all generated with d3.geoPath. The code loads geographic data from a TopoJSON world atlas using d3.json and processes it with topojson.feature and topojson.mesh. React manages the component state through hooks, while the Marks component structures the SVG paths for each geographic layer.

SsreepavanKothapalli
86% match
Loading thumbnail…

Fork of ICE8 World Map

This example renders a world map using a Natural Earth projection via d3.geoNaturalEarth1 and d3.geoPath. Country boundaries are drawn as SVG paths from TopoJSON data loaded from a GitHub gist, with each country filled in teal and outlined with a faint red stroke. A light blue sphere path forms the globe’s background. The code uses d3.select, d3.json, and topojson.feature to process the geographic features.

KKolliTeja
86% match
Loading thumbnail…

Fork of Fork of ICE-8 world map

This example shows a world map rendered in an SVG using D3 v5, with countries filled in orange and outlined in red against a skyblue sphere. It uses the `geoNaturalEarth1` projection and `geoPath` to draw geographic features, while `topojson.feature` converts TopoJSON data from a remote gist into GeoJSON for country boundaries. The visualization loads the world map data asynchronously via `d3.json` and appends each country path to the SVG. The sphere background and country styling are defined in the accompanying CSS.

GGARIDIDEEKSHITHREDDY
86% match
Loading thumbnail…

Fork of World Map IC8

This example renders a world map using a natural Earth projection with D3’s `geoNaturalEarth1` and `geoPath`. Country outlines and filled regions are drawn as SVG paths from TopoJSON data loaded via `d3.json` and processed with `feature` from topojson. The map displays pink for the sphere, blue countries with semi-transparent yellow strokes, set against a black background. It demonstrates basic geographic visualization with D3 v5 in a React-less HTML setup, using asynchronous data fetching and SVG rendering.

NNaimisha-M
86% match
Loading thumbnail…

Fork of ice8-vignesh

This interactive map displays world countries rendered as SVG paths using a globe-like orthographic projection that users can drag to rotate. Clicking a country switches between projections: selecting the United States activates the Mercator projection, while clicking any other country returns to the orthographic view. The visualization uses D3.js with d3-geo-projection, d3.geoPath for geographic path generation, and topojson to load world atlas data. Country names come from a TSV file, while geographic boundaries are sourced from a TopoJSON file. Additional interactions include zooming via d3.zoom and smooth transitions between projections.

SSaivignesh-9176
85% match
Loading thumbnail…

Fork of ICE8 - World Map

This example displays a world map rendered in an SVG using the Natural Earth projection. It loads country boundaries from a TopoJSON file via `d3.json` and converts them with `topojson.feature`. The code applies `d3.geoPath` and `d3.geoNaturalEarth1` to draw both a sphere outline and country shapes, which fill with pink and brighten to maroon on hover through CSS. The visualization demonstrates basic geographic data mapping with straightforward styling.

Ffouzanuddin
85% match