Skip to main content
SimilarExport ZIP
100%

World map

✓ Published0🌍 Public
Nnikhilagopi
Last edited Apr 11, 2023
Created on Apr 11, 2023
Forked from World map Saranya

This example displays a world map rendered as yellow countries on a gray sphere using an equirectangular projection. The code loads geographic data from a TopoJSON file, converts it to GeoJSON with `topojson.feature`, and draws the paths with `d3.geoPath`. Country shapes change color to blue on hover, and the visualization loads D3 and TopoJSON from UNPKG, demonstrating ES6 module imports within VizHub.

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 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
88% match
Loading thumbnail…

World Map

This example displays an interactive world map using an equirectangular projection. It renders countries as yellow SVG paths with black outlines, and hovering over a country highlights it in green. The visualization uses D3 v5’s `geoEquirectangular` and `geoPath` for map projection and path generation, and TopoJSON’s `feature` method to convert the world-atlas TopoJSON data into GeoJSON features. A blue sphere path represents the globe’s background.

Aaashrithd4
87% match
Loading thumbnail…

World map

This example shows an interactive world map rendered as an SVG, with countries filled in green that turn red on hover against a sky-blue sphere background. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON features using the `feature` method from TopoJSON. The visualization uses D3’s `geoEquirectangular` projection and `geoPath` to generate country outlines, while `select` and `selectAll` manage the SVG path elements. The map is drawn entirely with D3 v5 and CSS styling for hover effects.

Nnikhilagopi
87% match
Loading thumbnail…

World Map

This example shows a world map with countries rendered as light blue polygons outlined in yellow, which highlight pink on hover. It uses D3 v5 and TopoJSON to load geographic data from the world-atlas dataset, applying the `geoEquirectangular` projection and `geoPath` generator to draw the sphere and country boundaries as SVG paths. Country hover effects are styled via CSS.

PPavaniMangugari
87% 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
85% match
Loading thumbnail…

World Map with D3.js!

This example renders a world map using an equirectangular projection, with countries filled in pink against a light blue sphere. It loads country boundaries from a TopoJSON file (world-atlas countries-110m.json) and converts them to GeoJSON features using the `feature` method. The visualization employs D3 v5’s `geoPath` and `geoEquirectangular` functions to generate SVG paths, and CSS hover styles highlight each country in green. The sphere and country shapes are appended as SVG path elements with distinct classes.

Yyaswanthsen
85% 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
85% match
Loading thumbnail…

World Map

This example displays a world map using a natural Earth projection, rendered as yellow landmasses with black borders on a light blue sphere. It loads world country boundaries from the World Atlas TopoJSON data and converts it to GeoJSON using the `feature` function from TopoJSON. The map is drawn with D3’s `geoNaturalEarth1` projection and `geoPath` generator, appending SVG paths for both the background sphere and individual countries, styled via CSS classes.

Kkottenikhil
85% match