So... here is the Earth

100%

So... here is the Earth

✓ Published2🌍 Public

Last edited Nov 7, 2018

Created on Sep 26, 2018

This visualization displays a world map using a natural Earth projection, where clicking any country highlights it with a distinct gold color while others remain a muted green. It reads country names from a world-atlas TSV file, mapping ISO codes to names for display, and renders the geographic boundaries. The implementation combines D3’s `geoPath` and `geoNaturalEarth1` for map projection, with TopoJSON’s `feature` function to process the 50m resolution country borders.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

So... here is the Earth

This interactive map of Earth uses a natural Earth projection to display world countries, with the code coloring the selected nation in gold while others appear green. Clicking a country reveals its name as a label, while the sphere background is rendered in blue. The visualization loads geographic data from the world-atlas TopoJSON and TSV files, then renders paths via `d3.geoPath` and `d3.geoNaturalEarth1`. It handles selection with D3’s click events, updating fills and text on each interaction using D3 v5.

Jjons288

95% match

Loading thumbnail…

So... here is the Earth

This interactive map shows the Earth with countries rendered in green and the ocean in blue. Clicking a country fills it in gold and displays its name in the upper-left corner. The visualization uses D3 v5 with the geoNaturalEarth1 projection and geoPath for landmasses, while topojson converts the world atlas data. Country names come from a TSV file, and interactions are handled through D3’s event system.

Jjons288

92% 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…

World Map

This example displays an interactive world map using a natural Earth projection, with countries rendered as filled paths that highlight red on hover. The visualization loads geographic data from the world-atlas TopoJSON and TSV files, joining country names via ISO codes. It uses d3.geoPath with geoNaturalEarth1 for projection, d3.zoom for pan and zoom interactions, and TopoJSON’s feature method to convert topology to GeoJSON. The SVG sphere appears blue, while countries are light green with black strokes.

CChinzorigt Ganbat

86% match

Loading thumbnail…

So... here is the Earth

A map of the United States highlights a specific set of states in red, using a natural Earth projection to render the country’s shape. The visualization loads US state boundaries from a TopoJSON atlas and uses d3.geoPath with d3.geoNaturalEarth1 to draw the paths. Selected states are merged via topojson.merge and filled with a distinct color, while d3.zoom is also loaded but not applied in the final code.

Jjons288

86% match

Loading thumbnail…

World

This example displays a static world map of all countries using a natural Earth projection. The visualization fetches geographic data from the world-atlas TopoJSON dataset and renders each country as a violet SVG path with black strokes on a green background. The code employs d3.json to load the data, d3.geoNaturalEarth1 for the projection, and d3.geoPath to generate the SVG paths. The topojson.feature method extracts the country geometries from the TopoJSON structure before binding them to the SVG elements.

SSohilaBheemReddy

86% match

Loading thumbnail…

Let's create a world map (geoNaturalEarth1)2 - with d3

This example displays a world map using the Natural Earth projection, with countries rendered as light green polygons against a dark blue sphere. The visualization loads GeoJSON country boundaries from the world-atlas TopoJSON dataset via `topojson.feature`, then projects them using `d3.geoNaturalEarth1` and draws them as SVG paths with `d3.geoPath`. A data join appends each country path, while a separate path illustrates the globe’s outline. The code relies on d3.select, d3.json, and d3.v5, with styling controlled by CSS classes.

AAsperge-Atomique

86% match

Loading thumbnail…

World Map

This example renders a natural Earth projection world map as an SVG, showing country boundaries in black with red outlines against a light blue sphere. It uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to draw the sphere and landmasses, with TopoJSON’s `feature` method converting world-atlas data (110m resolution) into GeoJSON. The map is generated asynchronously, fetching the TopoJSON from a CDN and appending each country path to the SVG.

VVishnu Sudireddy

85% match