Skip to main content
SimilarExport ZIP
100%

Make a map

✓ Published0🌍 Public
Ppbruss@bu.edu
Last edited Oct 25, 2024
Created on Oct 20, 2024
Forked from Simple World Map

This visualization displays a world map using an orthographic projection, depicting the globe with blue oceans, green landmasses, and a graticule grid. Built with d3.geoOrthographic and d3.geoPath, it renders country boundaries from the Visionscarto World Atlas TopoJSON data, styled with green fills and white strokes. The map loads data asynchronously via fetch and topojson-client, then draws graticule lines, an outline, and country paths onto an SVG canvas.

AI-generated description

The world map in a spherical/globe format with blue coloring for the oceans and green for countries/landmasses.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's Make a Map

This example shows a world map rendered as a three-dimensional globe using an orthographic projection. The sphere is filled dark blue, while country boundaries appear in light green with subtle black strokes, all drawn as SVG paths. The code uses d3.geoOrthographic and d3.geoPath to project and trace the map, with data loaded from the world-atlas TopoJSON file. TopoJSON’s feature method extracts country geometries, and each is appended as an SVG path inside a fixed 960×500 canvas.

PPabloReyesBetanzo
87% match
Loading thumbnail…

Let's make a Map

This map renders world countries from the world-atlas TopoJSON dataset, using D3’s `geoNaturalEarth1` projection and `geoPath` to draw landmasses and country boundaries. The SVG output fills countries in light gray with blue strokes over a blue ocean sphere. It demonstrates a basic choropleth setup by asynchronously loading the 110m-resolution data and applying styling from an external stylesheet. The example shows how to project geographic features with D3’s geo API and topojson’s `feature` conversion.

Aarieltonglet
86% match
Loading thumbnail…

Lets make a map

This example shows a simple world map rendered as light green ocean and blue landmasses. It loads country boundary data from the world-atlas TopoJSON dataset and projects it with d3.geoNaturalEarth1, drawing the sphere background and country paths using d3.geoPath. The code uses d3.json to fetch the data, topojson.feature to convert it to GeoJSON, and d3.select with SVG path elements. Country styling is applied via the stylesheet, with a blue fill and half-transparent stroke.

Uuttam-vish
85% match
Loading thumbnail…

Make a map with D3.js

This map visualization displays the countries of the world using a natural Earth projection. The code renders the globe’s sphere and country outlines as SVG paths via d3.geoPath, with data pulled from the World Atlas TopoJSON dataset. Countries are styled in gray with black borders, and the visualization uses D3.js v6 and TopoJSON’s feature method to convert the TopoJSON topology into GeoJSON features for drawing.

Ggoodej
85% match
Loading thumbnail…

Make a Map

This example displays a world map using a natural Earth projection, rendering countries and the surrounding sphere. The visualization loads geographic data from the world-atlas TopoJSON dataset, then uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to generate SVG paths. The map fills landmasses in light green with a subtle black stroke, while the sphere is colored blue. Both the topojson `feature` method and D3’s data join are used to bind and append country paths to the SVG.

Fforeverworld1879
85% match
Loading thumbnail…

Let's make a Map!

This example displays a world map of countries as light green shapes against a dark blue spherical background, using a Mercator projection. It loads geographic data from the world-atlas TopoJSON dataset and renders it as SVG paths with d3.geoPath. The code employs d3-geo projections, topojson.feature for extraction, and a select-all data join to bind country features to path elements.

ZZY Huang
85% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map using an orthographic projection, rendering countries as light-green SVG paths with dark strokes. It loads geographic data from a TopoJSON world-atlas file via `d3.json`, then converts it to GeoJSON using `topojson.feature`. The map is drawn with `d3.geoPath` and `d3.geoOrthographic`, projecting the spherical landmasses onto a flat plane. The dark blue background and minimal styling emphasize the Earth’s curved shape, creating a simple globe-like visualization.

NNita
85% match
Loading thumbnail…

Lets Make a Map

This example displays a world map rendered as an SVG using D3’s `geoNaturalEarth1` projection and `geoPath` generator. Country boundaries come from the World Atlas TopoJSON dataset, converted to GeoJSON via `topojson.feature`. The visualization shows a dark blue ocean sphere with light green landmasses, each country plotted as a separate path.

Ggabrielribeirob
85% match