DV Project

100%

✓ Published0🌍 Public

Last edited Mar 9, 2023

Created on Mar 9, 2023

Forked from Cheap Tricks for Interaction

This interactive map of the world uses a natural Earth projection to display country boundaries, with countries colored light green and the ocean blue. Hovering over a country changes its fill to red, and users can zoom by scrolling. The visualization is built with D3 v5, using `geoNaturalEarth1` and `geoPath` for map generation and `zoom` for interaction. Country names are joined from a TSV file by ISO code, with geographic data from the `world-atlas` package.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

DV2_6_World Map

This interactive map displays world countries using a natural Earth projection, with hover highlighting and zoom/pan capabilities. The visualization loads geographic data from the World Atlas TopoJSON files and renders country boundaries as SVG paths via d3.geoPath. Country names are joined from the accompanying TSV dataset using ISO numeric codes, displayed as tooltips through SVG title elements. The d3.zoom behavior enables interactive exploration, while the color scheme distinguishes landmasses, oceans, and hover states. The code leverages d3.json, d3.tsv, and topojson.feature for data processing and d3.geoNaturalEarth1 for the projection.

NNagateja99

88% match

Loading thumbnail…

WORLD MAP

This interactive world map displays country boundaries with a custom equirectangular-like projection, colored in muted green with cyan oceans. Hovering over a country highlights it in bright green. The visualization uses D3.js to load GeoJSON and TSV data from the world-atlas package, combining them to create SVG paths with country names via tooltips. It implements zooming through the `d3.zoom` module and renders the sphere and countries using `d3.geoPath` with the Natural Earth projection.

Ppaularl

88% match

Loading thumbnail…

Interactive world map

This interactive world map displays country boundaries with hover highlighting and zoom/pan capabilities. Built with React and D3 v5, the visualization uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to render SVG paths from TopoJSON data in the world-atlas package. A zoom behavior enables interactive transformations, while country names from a TSV file appear as tooltips via SVG `title` elements. The map fills countries in green and the ocean sphere in blue, with hover states turning countries red.

Eevapavlinek

88% match

Loading thumbnail…

Let's make a Map!

This visualization displays world countries on a natural Earth projection, with each country filled in light green and highlighted red on hover. The map is rendered as SVG using D3’s `geoNaturalEarth1` projection and `geoPath`. Country boundaries come from a TopoJSON world-atlas file, while names are joined via a TSV file keyed by ISO numeric codes. Users can pan and zoom the map using D3’s `zoom` behavior, which applies a transform to the map group.

VVito

87% match

Loading thumbnail…

d3 Visualization Map

This example displays a zoomable world map using a natural Earth projection, with countries colored light green and the ocean rendered as a blue sphere. Built with D3 v5 and TopoJSON, it loads country boundaries from the world-atlas dataset (50m.json) and names from 50m.tsv. The map supports interactive pan and zoom via d3.zoom, while d3.geoPath and geoNaturalEarth1 handle geographic rendering. Countries highlight red on hover, with tooltips showing country names. The visualization is rendered as SVG, with the sphere and country paths generated from the projected GeoJSON features.

JJohnPaulPagelerJr

87% match

Loading thumbnail…

DV-Map

This visualization displays a world map using a natural Earth projection, rendered as SVG paths. The code loads GeoJSON country boundaries from the World Atlas dataset via unpkg and uses `d3.geoPath` with `d3.geoNaturalEarth1` to generate the map. Countries appear as distinct paths appended to an SVG element, with a sphere outline also drawn, demonstrating basic geographic mapping with D3 v7.

KKetaki789

86% match

Loading thumbnail…

World Map with D3 Final

This interactive world map displays country boundaries and names using a natural Earth projection, with a colored sphere background and hover effects that highlight individual countries in red. Built with D3 v5 and TopoJSON, the visualization loads geographic data from the world-atlas package, combining TSV country name metadata with JSON topology data. The code uses `geoNaturalEarth1`, `geoPath`, and `zoom` for projection and panning, while SVG paths render the map with CSS styling for interactivity.

TToly

86% match

Loading thumbnail…

Interactive maps

This interactive map displays world countries using a natural Earth projection, with hover states that highlight individual nations in red. The visualization loads geographic data from a world-atlas TopoJSON file and renders it as SVG paths, with country names appearing as tooltips. Built with D3 v5, it uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` for path generation, and `d3.zoom` for panning and zooming. The map also includes a dark blue sphere background, while CSS styles control the country and hover fill colors.

Ddaanasma

86% match