100%

ICE8-Fork of World map

✓ Published1🌍 Public

Last edited Apr 4, 2023

Created on Apr 3, 2023

This example visualizes a world map using D3 v5 and TopoJSON, plotting circles for geographic locations. It loads world country boundaries from the World Atlas TopoJSON dataset and renders them with a natural Earth projection via `d3.geoPath`. The code queries a SPARQL endpoint for photo locations with latitude and longitude, appends circles to the SVG, and includes an incomplete attempt at using SVG patterns for image fills. A blue sphere background and purple countries define the map’s styling.

AI-generated description

Creating a map with data in d3

This example will show how to load data into d3 to create a worldmap

I've based this off of Curran's map example

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE8 - World Map

This example displays a static world map rendered as an SVG, using a light blue sphere background and pale green country polygons outlined with semi-transparent black strokes. It loads a TopoJSON dataset of 110-meter resolution country boundaries from the `world-atlas` package, converts it to GeoJSON features with the `topojson` library, and projects them using D3’s `geoNaturalEarth1` projection and `geoPath` generator. The map is drawn entirely client-side via D3 v5, with no interaction or animation.

MManohar Kowthavarapu

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

89% match

Loading thumbnail…

Fork of ICE8 - World Map

This example shows a world map rendered as an SVG, with countries filled in light green and oceans in blue using a Natural Earth projection. It loads GeoJSON country boundaries from the world-atlas TopoJSON dataset and converts them with the `feature` method from TopoJSON. The visualization uses `d3.geoPath` with `d3.geoNaturalEarth1` to draw the sphere outline and country paths, with styling applied through CSS classes.

KKarnisrikanth

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

89% match

Loading thumbnail…

ICE 8 World Map using D3

This example shows a world map with animated circles that plot 1,500 museum object locations retrieved from a SPARQL endpoint, using a Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`. Each location appears sequentially with a bounce easing effect, transitioning from radius 0 to 8 pixels using `transition.attr`. The map is rendered as SVG, with country boundaries from TopoJSON (world-atlas) and a light blue sphere. The code uses D3 v5 and TopoJSON to fetch and draw geographic features.

Vvidhyanamini

89% match

Loading thumbnail…

Fork of ICE-8 World Map

This example displays a world map rendered with D3’s natural Earth projection, using orange country shapes against a light green sphere background. It loads geographic data from a TopoJSON file hosted on GitHub, then converts it to GeoJSON with `topojson.feature` before drawing paths with `d3.geoPath` and `d3.geoNaturalEarth1`. The map is static, with dark strokes separating countries and no interactive behavior.

Bbhargavarathod

89% match

Loading thumbnail…

Fork of ICE8 - World Map

This example shows a simple world map with countries rendered in light green on a blue spherical background. It uses the Natural Earth projection and loads country boundaries from the world-atlas TopoJSON dataset. The visualization is built with D3 v5, employing `d3.geoNaturalEarth1` for projection, `d3.geoPath` for generating SVG paths, and `topojson.feature` to extract GeoJSON features from the TopoJSON data. Each country is drawn as an SVG path with a black stroke and low opacity.

Bbhargavarathod

88% match

Loading thumbnail…

Fork of ICE-8(World Map)

This example renders a world map using D3 v5 and TopoJSON, displaying countries as dark green filled polygons against a blue sphere. It uses the `geoEquirectangular` projection with `d3.geoPath` to generate SVG paths for each country, while the sphere and country hover states are styled via CSS classes. The map data comes from the world-atlas countries-110m.json file, and the `feature` method from TopoJSON converts the TopoJSON data into GeoJSON features for rendering.

Aajaysonu

88% match