Skip to main content
SimilarExport ZIP
100%

Making a map

✓ Published0🌍 Public
Aakshayms0
Last edited Nov 1, 2022
Created on Nov 1, 2022
Forked from HTML Starter

This example shows a world map rendered as an SVG, with countries filled in light green against a dark blue spherical background. It uses the D3.js library along with the topojson package to fetch and process geographical data from the `world-atlas` dataset, converting TopoJSON features into map paths. The `geoPath` and `geoNaturalEarth1` projection APIs generate the map, while the `sphere` class draws the ocean.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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
92% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as an SVG, with countries filled in light green and the ocean (sphere) in powder blue. It uses D3.js's `geoNaturalEarth1` projection and `geoPath` to convert geographic data into SVG path strings. The map data comes from the `world-atlas` package, loaded as TopoJSON and converted to GeoJSON using the `topojson.feature()` function. The `svg.append` and `selectAll` methods are used to draw the sphere and country paths onto the canvas.

Vvic126
91% match
Loading thumbnail…

Making a Map

This example displays a world map as a set of light green countries against a blue sphere, rendered as SVG. The visualization uses the D3 library’s `geoNaturalEarth1` projection and `geoPath` generator, while the `topojson` package’s `feature` function converts the world-atlas TopoJSON data into geographic features for drawing. The sphere path is generated by passing a `Sphere` object to the same path generator. The map is fully drawn from the included `world-atlas` data source.

EEllednera
91% 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
91% match
Loading thumbnail…

Making a World 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 a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to draw both the sphere outline and country boundaries. Country data comes from the world-atlas TopoJSON file, which is parsed with the `feature` function from topojson. The map is static, with no interactions or transitions.

MMinwoo Pak
90% match
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
90% match
Loading thumbnail…

Let's make a map with D3.js

This example displays a world map rendered as SVG paths, with countries filled in light green against a blue spherical backdrop. It loads geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON using the topojson `feature` method. The visualization projects the coordinates with `geoNaturalEarth1` and traces country boundaries via `geoPath`, while drawing the globe outline with a sphere path generator. The layout uses a fixed 960×500 SVG canvas with simple CSS styling.

Ssakhabutdinov
90% match
Loading thumbnail…

Let's make a map with D3.js!

This example renders a world map using D3.js and topojson, displaying country boundaries as light green shapes on a blue sphere. The visualization loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON features using the topojson `feature` function. D3’s `geoNaturalEarth1` projection and `geoPath` generator draw each country as an SVG path, with a separate path for the global sphere. The code uses the v5 API with imported functions from the d3 module, and styling applies stroke opacity to delineate borders.

Kkaviya-ds
90% match