World map Saranya

100%

World map Saranya

✓ Published1🌍 Public

Last edited Jul 9, 2022

Created on Jul 9, 2022

A world map is rendered on an SVG canvas with children, using an equirectangular projection to display country boundaries. The visualization loads country geometries from the world-atlas JSON dataset and renders them as yellow paths with gray strokes, which turn blue on hover. The code uses D3's projection and path generation functions, D3's selection and data loading APIs, and TopoJSON's feature method to convert the data into GeoJSON features for rendering.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

World maps by using D3.js

This SVG world map uses D3.js to render country boundaries as projected paths. The visualization fetches geographic data from the world-atlas JSON endpoint, extracts country features via TopoJSON, and draws them with d3.geoPath using an equirectangular projection. The ocean sphere and landmasses are filled with distinct colors, referenced from the included stylesheet.

DDanthalakirankumar

81% match

Loading thumbnail…

World Map

This example displays a static world map rendered as an SVG, with each country filled in light green and outlined in black. It uses the Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to convert geographic coordinates into screen paths. Country boundaries come from the `world-atlas` TopoJSON dataset, parsed with `topojson.feature`. A single globe outline is drawn separately, while the map itself is built through a data join that appends a path per country feature.

SSaiSree0122

80% match

Loading thumbnail…

World Map

This example displays a world map rendered as an SVG, with countries filled in orange against a sky-blue sphere. The visualization uses D3 v5’s `geoEquirectangular` projection and `geoPath` to draw country outlines, while TopoJSON’s `feature` method converts the world-atlas countries dataset into geographic features. Hovering over a country changes its fill to red via CSS, and the map includes a black stroke with partial opacity for borders.

HHarshavardhan

80% match

Loading thumbnail…

World Map

This example renders a world map as a static SVG graphic. It displays countries in orange against a blue sphere, with a red hover highlight effect. The visualization uses D3.js functions `select`, `json`, `geoPath`, and `geoEquirectangular` for the equirectangular projection. It loads GeoJSON country boundaries from the `world-atlas` package via `json()`, converting them with the TopoJSON `feature` API before drawing with `geoPath`. The stylesheet defines the sphere and country fills.

CCH SAMPATH

80% match

Loading thumbnail…

World map

This example displays a grayscale world map with yellow countries that highlight blue on hover, overlaid with blue data points and graticule lines. It uses D3 v5 and TopoJSON to project geographic features through `d3.geoPath`, while a helper module exports a message string. The visualization renders as SVG with styled spheres, country shapes, and tick marks, demonstrating module imports and UNPKG-hosted dependencies.

MMalempatiSaranya

79% match

Loading thumbnail…

World Map

This example renders an interactive world map using SVG, with countries shown in brown and the globe’s sphere in light blue. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON via the `feature` method. The map uses `d3.geoEquirectangular` for projection and `d3.geoPath` to generate the paths. Hovering highlights countries by changing their fill color through CSS, while D3 v5 and TopoJSON handle the data binding and rendering.

HHemanthh81

79% match

Loading thumbnail…

World Map with D3.js!

This example shows a simple world map rendered as an SVG, with countries filled in green and a blue sphere background. Hovering over a country highlights it in orange. It uses d3.geoPath with the d3.geoEquirectangular projection to draw the map, and TopoJSON’s feature method to convert country boundaries from the world-atlas dataset. The code selects the SVG element, appends a sphere path, then joins country features to path elements.

SSonuSriN

79% match

Loading thumbnail…

World map

This visualization displays a natural Earth projection world map, with countries rendered as colored SVG paths on a blue sphere. The map uses d3.geoNaturalEarth1 and d3.geoPath to project and draw geographic features, while d3.zoom enables pan and zoom interactions that transform the entire map group. Country boundaries come from the world-atlas TopoJSON dataset, and the rendering uses SVG paths with hover highlighting that changes the fill color.

Ssrivalliwuyyuru

78% match