Fork of Fork of D3 Starter

100%

Fork of Fork of D3 Starter

✓ Published0🌍 Public

Last edited Aug 25, 2023

Created on Aug 23, 2023

This interactive map displays country boundaries with colors representing continents, using an orthographic projection that rotates as the user drags the globe. The visualization loads world-atlas data from TSV and TopoJSON files, then fixes specific country discrepancies before rendering. It uses `d3.geoPath`, `d3.geoOrthographic`, `d3.zoom`, and `d3.drag` for interaction, with continent colors assigned via `d3.scaleOrdinal` from the Tableau10 scheme. Hovering highlights a country in red, while the title element shows the country name and index.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of d3map

This interactive globe visualizes country-level data from a TopoJSON world atlas. Users can drag the globe horizontally to rotate it, and hovering over a country updates an information panel showing its name. Built with d3-geo projections and d3-drag, the visualization uses an orthographic projection rendered as SVG paths, with d3.geoPath generating the country outlines. The rotation logic is computed directly from mouse coordinates rather than using versor-based dragging.

Nnstafford

89% match

Loading thumbnail…

Fork of Fork of world map

This interactive D3.js world map uses an orthographic projection to render Earth’s landmasses as white countries with black outlines against a blue oceanic sphere. It loads country boundaries from the world-atlas TopoJSON dataset, processing them via the `topojson.feature` function and drawing paths with `d3.geoPath`. Hovering over a country highlights it in orange through a CSS `:hover` rule, providing visual feedback for exploration.

Sshabbab01

88% match

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

87% match

Loading thumbnail…

Fork of D3 map drag demo

An interactive orthographic globe displays world countries as colored paths, draggable via mouse to rotate the projection. Clicking a country logs its name to the console, while hovering reveals tooltips with country names from the world-atlas TSV file. The visualization uses D3 v5’s `d3.geoOrthographic`, `d3.geoPath`, `d3.drag`, and `d3.zoom`, with TopoJSON data rendered as SVG paths. A graticule and sphere outline provide geographic context, and country fill colors change on hover.

Vvigneswaran009

87% 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

87% match

Loading thumbnail…

Fork of Fork of Fork of Fork of ice8-vignesh

This interactive map visualizes world countries using an orthographic projection that can be rotated by dragging, with clickable countries that switch between orthographic, Mercator, and Albers USA projections. The visualization loads geographic data from world-atlas TopoJSON and TSV files, rendering country boundaries and a graticule as SVG paths via `d3.geoPath` and `d3.geoGraticule`. Drag interactions adjust the projection’s rotation, zoom is handled through `d3.zoom`, and projection changes animate with D3 transitions.

PPedram

86% match

Loading thumbnail…

Fork of Fork of Fork of Fork of World Map

This interactive map displays world country boundaries using a draggable orthographic projection within an SVG. Users can click individual countries to toggle the view between the orthographic and Mercator projections. The visualization leverages d3.geoPath, d3.geoOrthographic, and d3.geoMercator from d3-geo-projection, with topojson for country features and world-atlas data. Drag interactions rotate the globe via projection.rotate, while zoom transformations adjust the SVG group. Country names are loaded from a TSV file and applied on click.

Ssaiteja0725

86% match

Loading thumbnail…

Fork of D3 map drag demo

An interactive orthographic globe displays country boundaries from the World Atlas TopoJSON dataset, rendered as SVG paths via `d3.geoPath` with a `d3.geoOrthographic` projection. Users drag to rotate the globe, which updates the projection’s rotation based on the drag event’s delta and the current scale. A graticule overlay and zoom via `d3.zoom` complement the interaction, while hovering reveals country names from a TSV lookup table. Clicking a country logs its name to the console.

KKikkolatsch

86% match