So... here is the Earth

100%

So... here is the Earth

✓ Published0🌍 Public

Last edited Nov 6, 2018

Created on Oct 10, 2018

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

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

85% match

Loading thumbnail…

Let's make a map with D3.js!

This example shows an interactive world map where countries appear in light green against a blue ocean sphere, using the Natural Earth projection. The visualization loads geographic data from the world-atlas dataset and renders vector paths with SVG. The code imports D3.js functions including geoNaturalEarth1 for the projection, geoPath for generating path data, and select for DOM manipulation. Country boundaries are drawn from TopoJSON features using the topojson library, while styling comes from the attached CSS file.

Ssteveaigbe

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

83% match

Loading thumbnail…

Let's make a map with D3.js

This example visualizes world countries on a Natural Earth projection, with landmasses rendered in light green against a blue spherical backdrop. The map is drawn as SVG paths using D3.js v5, combining the `geoNaturalEarth1` projection, `geoPath` for geometry generation, and the topojson library’s `feature` function to convert TopoJSON country boundaries. Geographic data is loaded remotely from the world-atlas package, and styling is applied via CSS classes for the sphere and country outlines.

JJames Barbour, Jr.

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

83% match