Skip to main content
SimilarExport ZIP
100%

World Map with D3 2 Final

✓ Published0🌍 Public
CChawin Sungwalngern
Last edited Dec 27, 2022
Created on Dec 27, 2022

This interactive visualization presents a world map using an orthographic projection, displaying country boundaries with hover effects that highlight each nation in red. The map also supports zoom and pan through D3’s zoom behavior. Built with D3 v5 and TopoJSON, it renders as SVG and loads geographic data from the world-atlas package, combining TSV country names with GeoJSON features. The projection and path generation rely on d3.geoOrthographic and d3.geoPath.

AI-generated description

Interactive Worldmap with geoOrthographic view.

Bostock: worldmap

Bostock: Dataset for title function to return country names

Reference:

MIT Licensed

Similar vizzes

Loading thumbnail…

World Map with D3 Final

This interactive world map displays country boundaries as selectable SVG paths over a blue sphere, with hover highlighting in red. The visualization uses D3’s `geoPath` and `geoNaturalEarth1` projection to render geographic features, while the `topojson` library’s `feature` function processes TopoJSON data from the world-atlas package. Country names are loaded from a TSV file and mapped to each path’s `id`. A zoom control, implemented via D3’s `zoom` event, adjusts the SVG transform. Data sources include the 50m world-atlas TSV and JSON files.

CChawin Sungwalngern
92% 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
92% match
Loading thumbnail…

World Map

This example displays an interactive world map showing country boundaries with zooming and hover effects. It uses D3 v5 and TopoJSON to load geographic data from the world-atlas dataset, projecting it with d3.geoEquirectangular and rendering via d3.geoPath. The map initially shows a blue sphere with light green countries and indigo borders, which turn maroon on hover. A d3.zoom handler enables pan and zoom interactions on the SVG.

BBhavyaMammai
88% match
Loading thumbnail…

world map interaction

This example presents an interactive world map built with D3.js v5, displaying country boundaries and names sourced from the world-atlas TopoJSON dataset. Users can zoom and pan the map using d3.zoom, with the transform applied to a group element. Countries are rendered as SVG paths via d3.geoPath and a natural Earth projection, with tooltips showing country names from the TSV file. Hovering highlights countries in red, while the ocean sphere uses a blue fill.

Ppei9223
88% match
Loading thumbnail…

d3 World Map

This visualization displays a world map using an orthographic projection, with countries rendered as light green polygons that highlight orange on hover. The code loads geographic data from the world-atlas package via TopoJSON and joins it with country names from a TSV file. Using d3.geoPath and d3.geoOrthographic, it draws the globe’s sphere and country boundaries as SVG paths, with tooltips showing each nation’s name via appended title elements. The implementation relies on d3.v5, topojson-client, and a React-friendly structure with Promise.all for asynchronous data loading.

NNoah Weinberg
88% match
Loading thumbnail…

World Map with D3.js!

This example displays a world map rendered as an SVG using D3 version 5 and TopoJSON, with the geographic projection and path generation handled by d3.geoPath. The page loads world topology data and draws country boundaries onto a 960-by-500-pixel canvas. It serves as a basic demonstration of integrating D3’s mapping utilities with external TopoJSON data to produce an interactive-ready visualization.

DDINESH SAI BOPPANA
88% match
Loading thumbnail…

Let's interact with world map on D3.js!

This interactive world map displays country boundaries hoverable in red, with a dark ocean backdrop and natural Earth projection. Built with D3 v5 and TopoJSON, it loads world-atlas 110m GeoJSON and TSV country-name data, rendering SVG paths via d3.geoPath. Zoom and pan transforms are applied through d3.zoom, while d3.select and Promise.all handle asynchronous data loading.

AAnthony-coding
88% match
Loading thumbnail…

World Map visualization with D3.js!

This example displays a world map using D3.js v5 and TopoJSON, rendering countries as red SVG paths with blue strokes on a green spherical backdrop. It uses `d3.geoEquirectangular` for the projection and `d3.geoPath` to generate the country shapes from the `world-atlas` dataset’s countries-110m.json file. Hovering over a country changes its fill color to brown, highlighting individual nations.

BBajiSharifPatan@my.unt.edu
87% match