Skip to main content
SimilarExport ZIP
100%

Fork of Let's make a map with D3.js

✓ Published2🌍 Public
MMauradion
Last edited May 15, 2021
Created on May 12, 2021

This map visualizes the countries of the world using a natural Earth projection, with hover interactions highlighting individual nations in red. The code loads geographic data from the world-atlas package via D3’s `tsv` and `json` loaders, then joins country names to geometries. It uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` to render SVG paths, and `d3.zoom` for pan/zoom interactions, while the topojson library converts TopoJSON features for display.

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…

Fork of Let's make a map with D3.js!

This map visualization displays world countries colored in light green on a blue sphere, with hover effects turning countries red. It uses D3 v5 and TopoJSON to load and render world geography from the world-atlas dataset. The code combines `d3.geoNaturalEarth1` for projection, `d3.geoPath` for drawing country boundaries, and `d3.zoom` for interactive panning and zooming. Country names are joined from a TSV file and shown as SVG `<title>` tooltips.

Ggharakhani1986
94% match
Loading thumbnail…

Fork of Let's make a map with D3.js!

This map visualization displays countries on a natural Earth projection, with oceans filled in blue and landmasses in light green with subtle black strokes. It draws a basemap from the World Atlas TopoJSON dataset using the `feature` method from Topojson, then renders the sphere and country boundaries with `d3.geoPath` and the `geoNaturalEarth1` projection. The code loads data asynchronously via `d3.json`, appends SVG paths, and styles the elements through CSS classes.

MMina Rezaei
94% match
Loading thumbnail…

Fork of Let's make a map with D3.js!

This visualization displays a world map using a natural Earth projection, with countries filled in light green and oceans in blue. The map is rendered as SVG paths on a 960×500 canvas using D3.js version 5 and the TopoJSON library. The code loads country boundaries from a world-atlas JSON file and projects them with d3.geoNaturalEarth1 and d3.geoPath. Each country’s outline is drawn as a separate path with a subtle black stroke, while a sphere path fills the background before the country data arrives.

Mmaferayala
94% match
Loading thumbnail…

Fork of Let's make a map with D3 (Tricks).js!

This interactive map displays world countries using a natural Earth projection, rendered as SVG paths with green fill that turns red on hover. The visualization loads geographic data from the World Atlas TopoJSON file and converts it to GeoJSON features using `topojson.feature`. Users can pan and zoom the map through `d3.zoom`, with transformations applied to a group element containing the country paths. The map also includes a blue sphere outline drawn via `d3.geoPath` with the `geoNaturalEarth1` projection, and each country displays its name as a tooltip using SVG `title` elements.

BBKirst3
94% match
Loading thumbnail…

Fork of Let's make a map with D3.js!

This map shows the countries of the world rendered with a natural Earth projection, where landmasses appear in light green against a blue sphere. The visualization uses d3.geoNaturalEarth1 for the projection and d3.geoPath to generate SVG paths from TopoJSON data loaded via d3.json from the world-atlas dataset. Country boundaries are drawn with a subtle black stroke, while the underlying sphere provides an ocean-colored backdrop.

Bbugfree55
94% match
Loading thumbnail…

Fork of Let's make a map with D3.js!

This example shows an interactive world map built with D3.js v5 and TopoJSON, displaying country boundaries with hover effects that highlight each nation in red. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and renders geographic features as SVG paths with `d3.geoPath`. Pan and zoom interactions are enabled through D3’s `zoom` behavior, transforming the map group on user input. Country names are loaded from a TSV file and matched to geographic IDs, with tooltips shown via SVG `<title>` elements. The code also leverages `d3-geo-projection` and world-atlas data.

Ggharakhani1986
94% match
Loading thumbnail…

Fork of Let's make a map with D3.js!

This visualization renders a world map using a Natural Earth projection, displaying countries as light green polygons against a blue ocean sphere. It loads geographic data from the world-atlas TopoJSON dataset, which is converted to GeoJSON using the `feature` function from topojson. The map is drawn as SVG paths via `d3.geoPath`, with the projection defined by `d3.geoNaturalEarth1`. The code first draws the sphere outline, then appends country paths with a stroke for boundaries, all within a static 960x500 viewport.

Bbhanuteja1807@gmail.com
93% match
Loading thumbnail…

Fork of Let's make a map with D3.js!

This interactive map uses D3.js v5 with the `geoNaturalEarth1` projection and `geoPath` to render world countries from the Natural Earth 110m dataset, fetched via the world-atlas package. Countries appear as light green regions with black strokes on a blue sphere, and hovering turns them red. A `title` element is appended to each country path, though the code assigns a generic "hello" label rather than country names. The SVG output is styled with CSS, and the topojson library handles feature extraction from the downloaded GeoJSON data.

HHojjat Karami
93% match