Skip to main content
SimilarExport ZIP
100%

World Map

✓ Published0🌍 Public
UUVarshaReddy
Last edited Jul 22, 2023
Created on Jul 22, 2023
Forked from Hello VizHub

This example displays an interactive world map using Leaflet, with countries rendered as yellow polygons with black borders. The map initializes with a global view centered on [0,0] at zoom level 2. It fetches GeoJSON country boundaries from a GitHub-hosted world dataset and adds them to the map using Leaflet’s `L.geoJSON` method. The page also imports D3.js and local ES6 modules, though their primary role is demonstrated separately in the accompanying code structure.

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

World Map

This visualization shows a world map with all countries rendered as yellow landmasses with white borders on a blank canvas. The map is generated using React and D3’s `geoPath` and `geoEqualEarth` projection, which convert geographic coordinates into SVG paths. Data comes from the world-atlas TopoJSON dataset, which is fetched and converted using D3’s `json` loader and the `feature` function from the topojson library. Each country is drawn as an SVG `<path>` element with a uniform fill and stroke styling.

NNuman Anees
80% match
Loading thumbnail…

World Map with d3.js

This example renders a world map as an SVG using D3.js version 7. It applies a Mercator projection via `d3.geoMercator` and draws country boundaries with `d3.geoPath`, styling each path with a gray fill and dark stroke. The map loads GeoJSON country data from a remote GitHub repository using `d3.json`, and the visualization is contained within an HTML page that imports D3 from a CDN. The code demonstrates basic map projection and data binding in a simple, static geographic visualization.

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

World map

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.

Nnikhilagopi
80% match
Loading thumbnail…

World Map Visualization

This example renders a world map using D3.js and SVG, showing country boundaries as light blue shapes with white strokes. It loads GeoJSON world map data from a remote repository and applies a Mercator projection to convert geographic coordinates into screen positions, with the map centered on the canvas. The visualization demonstrates key D3 features such as `d3.geoMercator`, `d3.geoPath`, and loading external data via `d3.json`, alongside ES6 module imports from a local file. The map is drawn by binding the GeoJSON features to SVG `path` elements, with styling applied via inline attributes.

UUVarshaReddy
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

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