Skip to main content
SimilarExport ZIP
100%

US Immigrants

✓ Published1🌍 Public
RReggieW
Last edited Aug 9, 2022
Created on Aug 9, 2022

This example displays a world map with countries rendered in green, which highlight to orange on hover over an equirectangular projection with a blue sphere background. It uses D3 v5’s `geoEquirectangular` and `geoPath` to project and draw country boundaries from TopoJSON data loaded from the world-atlas package. The SVG is populated via D3’s data join, while CSS handles the hover effect.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

US Immigrants

This example displays a natural Earth projection of world countries, colored light green and filling a blue sphere, with country names shown as tooltips on hover. The map supports zooming and panning via d3.zoom, which applies an SVG transform to the grouped map elements. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to render the TopoJSON world-atlas data, while country names are resolved from a TSV lookup table. Hovering highlights countries in red through CSS, and the code imports d3 v5 and topojson v3 from CDNs.

RReggieW
90% match
Loading thumbnail…

Fork of US Immigrants

This visualization shows a world map rendered with an equirectangular projection, where each country is displayed as a green filled area with black outlines. The map includes a blue sphere backdrop and features a hover effect that changes country fills to orange. Built with D3 v5 and TopoJSON, the code uses `d3.geoPath` and `d3.geoEquirectangular` to project geographic data from the world-atlas 110m dataset. Country boundaries are generated via the `feature` method from TopoJSON, and the SVG output is styled through external CSS.

RReggieW
89% match
Loading thumbnail…

Immigrants to the US 2019

This visualization shows a world map highlighting countries as the source of immigrants to the US in 2019, using a natural Earth projection. The map renders countries in green with hover effects that turn them orange, while a light blue sphere represents the globe. Built with D3 v5, it loads GeoJSON and TSV data from the world-atlas package, using `d3.geoPath` and `geoNaturalEarth1` for projection, and `topojson.feature` to convert TopoJSON into GeoJSON features.

RReggieW
84% match
Loading thumbnail…

Country selector

This example shows a world map with countries colored light green, turning orange on hover, and includes a spherical blue background with pan-and-zoom support. It uses D3 v5’s `geoNaturalEarth1` projection, `geoPath`, and `zoom` behavior applied to an SVG group. Country boundaries come from TopoJSON world-atlas data (50m resolution), with names loaded from an accompanying TSV file and added as SVG `<title>` tooltips.

RReggieW
83% match
Loading thumbnail…

World Map

This example shows a world map with countries rendered as light blue polygons outlined in yellow, which highlight pink on hover. It uses D3 v5 and TopoJSON to load geographic data from the world-atlas dataset, applying the `geoEquirectangular` projection and `geoPath` generator to draw the sphere and country boundaries as SVG paths. Country hover effects are styled via CSS.

PPavaniMangugari
83% match
Loading thumbnail…

WORLD MAP

This example displays a world map with countries rendered in tan against a blue sphere, highlighting each country in dark orange on hover. It uses D3 v5’s `d3.geoEquirectangular` projection and `d3.geoPath` to draw the map, with TopoJSON loading the country boundaries from a world-atlas dataset. The SVG paths are generated from GeoJSON features, and the styles are applied via CSS classes.

Mmboinapally17
82% match
Loading thumbnail…

ICE-8(11630234)

This example displays an interactive world map using an equirectangular projection, with countries rendered in green and a blue ocean sphere. The map loads geographic data from a world-atlas TopoJSON file and visualizes it as SVG paths. Built with D3 v5, it uses `d3.geoEquirectangular` and `d3.geoPath` for projection and path generation, and TopoJSON's `feature` method to convert the data into GeoJSON features. Hovering over a country highlights it in red via CSS.

KKovvuri Supraj
82% match
Loading thumbnail…

Fork of ICE 08 11540905

This example shows a world map with countries rendered in green and an ocean-blue background, highlighting how geographic boundaries appear on an equirectangular projection. When hovered, individual countries change color to red. The visualization uses d3.geoPath and d3.geoEquirectangular to project GeoJSON data from a TopoJSON source file, with the topojson.feature method converting the TopoJSON objects into drawable features. The SVG is styled using CSS classes for the earth background and country fills.

Ssnehareddygurram
82% match