So... here is the Earth

100%

So... here is the Earth

✓ Published1🌍 Public

Last edited Oct 10, 2018

Created on Sep 27, 2018

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.

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 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.

Jjons288

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

85% match

Loading thumbnail…

Interaction

A world map renders countries in light green with black outlines on a blue sphere, using D3 v5 with a geoNaturalEarth1 projection. Users hover over any country to highlight it pink, while clicking a specific country isolates that selection and removes highlights from others. The visualization loads geographic data from a TopoJSON world atlas and merges it with a TSV file for country names. Code employs d3.geoPath, d3.zoom for panning, and CSS classes to toggle the selected country’s fill color.

NNTCHANG1289

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

84% match

Loading thumbnail…

Let's make an interactive map

This interactive map displays country boundaries on a natural Earth projection, with a light blue sphere and gray landmasses that darken on hover. The visualization uses D3 v5 and the topojson library to load and process world atlas data from a JSON file and a TSV file containing country names. The geoNaturalEarth1 projection and geoPath functions render the map as SVG paths, while the zoom component enables pan and zoom interactions.

NNikki-gea

84% match

Loading thumbnail…

interactions!

This interactive world map displays country boundaries using a natural Earth projection, with countries rendered in light green and hovering states highlighted in red. The visualization loads geographic data from the world-atlas TopoJSON dataset, merging it with a TSV file to map ISO numeric codes to country names for tooltips. Built with D3 v5, it uses `d3.geoPath` and `d3.geoNaturalEarth1` for projection and path generation, while `topojson.feature` converts the TopoJSON topology into GeoJSON features. The sphere background appears blue, with semi-transparent black strokes outlining each country.

Kkaviya-ds

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

83% match