Skip to main content
SimilarExport ZIP
100%

HTML Starter

✓ Published1🌍 Public
EEmma
Last edited Sep 4, 2020
Created on Sep 4, 2020
Forked from HTML Starter

This example demonstrates a world map rendered as an SVG using the natural Earth projection, with countries filled in light green and the ocean shown as a translucent blue sphere. It employs D3 v5’s `geoNaturalEarth1` and `geoPath` to project geographic data, and TopoJSON’s `feature` to extract country polygons from the world-atlas dataset. The map is drawn by appending a sphere path and then binding country features to new SVG path elements through D3’s data join. Styling is applied via CSS classes for the sphere and country boundaries.

AI-generated description

Bowl of fruit = General update pattern

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a map with D3.js

This example shows a world map rendered as an SVG using D3.js, with countries filled in light green against a sky-blue sphere background. It uses the `geoNaturalEarth1` projection and `geoPath` to draw country boundaries from TopoJSON data loaded from the world-atlas package. The code fetches the countries-110m.json file, converts it to GeoJSON with `feature`, and appends each path to an SVG element. Both D3 v5 and TopoJSON are loaded via CDN, and the visualization is built with a React starter setup.

NNkwachi Abel
89% match
Loading thumbnail…

HTML Starter

This example shows a world map rendered with D3’s Mercator projection, displaying country boundaries as SVG paths. The code loads GeoJSON country features from the world-atlas TopoJSON file via `topojson.feature`, then appends each country as a `<path>` using `d3.geoPath`. The accompanying `data.csv` includes population figures, but the current script does not encode population visually—only the geographic outlines appear. The map is drawn inside a fixed 960×600 SVG, with CSS styling for tick lines, though no axes or scales are currently applied to the map itself.

NNebotXavi
89% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as SVG, with countries filled in light green against a blue sphere, using a natural Earth projection to display the globe. The code loads GeoJSON country boundaries from the world-atlas TopoJSON dataset and converts them using the `feature` function from topojson. D3’s `geoPath` and `geoNaturalEarth1` projection generate the geographic paths, while a separate path outlines the spherical backdrop. The visualization is minimal, focusing on a clean, interactive-free display of global landmasses.

Ffaaty
89% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as SVG, with countries filled in light green against a blue sphere, using a natural Earth projection to display the globe. The code loads GeoJSON country boundaries from the world-atlas TopoJSON dataset and converts them using the `feature` function from topojson. D3’s `geoPath` and `geoNaturalEarth1` projection generate the geographic paths, while a separate path outlines the spherical backdrop. The visualization is minimal, focusing on a clean, interactive-free display of global landmasses.

Ffaaty
89% match
Loading thumbnail…

lets make a map

This example displays a natural Earth projection map of the world, rendered as an SVG with countries filled in light green and a blue sphere background. It loads GeoJSON country boundaries from the World Atlas TopoJSON dataset, converts them using topojson.feature, and draws them with d3.geoPath and d3.geoNaturalEarth1. The code appends a sphere outline and country paths to a 960x500 SVG container.

VVaggelisKlt
89% match
Loading thumbnail…

HTML Starter

This example displays a world map using the geoMercator projection, with country boundaries rendered as SVG paths. The map is generated from the world-atlas countries-110m GeoJSON dataset, loaded via d3.json. The code imports d3.geoPath and d3.geoMercator from d3.v5, and topojson’s feature function to extract country features. The resulting paths are appended to an SVG canvas of 960 by 500 pixels, demonstrating a minimal HTML setup with inline styling.

PPaul Chen
89% match
Loading thumbnail…

Lets make a Map

This example shows a world map rendered as an SVG, with countries filled in light green and oceans depicted as a blue sphere. It uses D3’s `geoNaturalEarth1` projection and `geoPath` to generate the map geometry. Geographic data comes from the World Atlas TopoJSON file, loaded via `d3.json` and converted to GeoJSON with `topojson.feature`. The complete React-based visualization is built with D3 v5 and TopoJSON v3, with styling applied through CSS classes.

Jjeelong
89% match
Loading thumbnail…

Let's make a MAP with D3.js!

This example displays a world map rendered as an SVG, with countries filled in light green and the ocean depicted as a sky-blue sphere. It uses D3 v5 and TopoJSON to load world-atlas data at 110m resolution, then applies the `d3.geoNaturalEarth1` projection and `d3.geoPath` to generate country boundaries. The map also draws a background sphere path, and country strokes are semi-transparent black. The code relies on `topojson.feature` to convert TopoJSON topology into GeoJSON features for rendering.

Ccledevoute
89% match