Skip to main content
SimilarExport ZIP
100%

Samuel Karkache - Make a Map

✓ Published0🌍 Public
SSamuel Karkache
Last edited Oct 23, 2024
Created on Oct 23, 2024

This visualization displays a world map using a Natural Earth projection, highlighting the top 10 countries by GDP in green while rendering all other countries in gray. The map is built with `d3.geoNaturalEarth1` for projection, `d3.geoPath` for rendering country outlines, and `d3.geoGraticule` for the graticule. Country names and GDP values appear as labels on hover, with data sourced from the visionscarto-world-atlas. The code uses `topojson-client` to convert the TopoJSON data into GeoJSON features.

AI-generated description

Fork of the Basic World Map visuzlation with some extra features including ...

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a map

This example visualizes the nominal GDP of ten countries from a CSV dataset on a natural Earth projection map. The map first draws a blue sphere backdrop using `d3.geoNaturalEarth1` and `d3.geoPath`, then overlays country outlines in light green from the world-atlas TopoJSON file. Countries are rendered as SVG paths using the `feature` method from topojson, with GDP values not yet linked to any visual encoding.

KKazushige Okuma
79% match
Loading thumbnail…

Making a map

This map displays the world’s countries as light green polygons on a dark blue sphere, with hover highlighting in red. It uses d3.geoPath with a d3.geoNaturalEarth1 projection to render geographic features from TopoJSON data, which is merged with country names from a world-atlas TSV file. The visualization supports pan and zoom interaction via d3.zoom, and all drawing is done as SVG paths.

Aakshayms0
77% match
Loading thumbnail…

Make a Map

This visualization displays a world map using the Natural Earth projection, with continents rendered in light green against a blue spherical backdrop. It demonstrates how to construct geographic visualizations with D3.js by combining topojson data from the world-atlas dataset with d3.geoPath and d3.geoNaturalEarth1. The code first projects a sphere outline, then loads country features and appends them as SVG paths. The minimal styling highlights the contrast between landmasses and oceans while showing basic map-making techniques.

Fforeverworld1879
77% match
Loading thumbnail…

Make a Map

This example shows a natural Earth projection of the world, with countries rendered as semi-transparent green shapes against a blue ocean sphere. Using d3.geoPath and d3.geoNaturalEarth1, it projects geographic coordinates onto an SVG canvas. Country boundaries come from the world-atlas TopoJSON dataset, which is parsed with topojson.feature. The visualization demonstrates a straightforward choropleth-free map, highlighting the projection and path generation pipeline from raw TopoJSON data to interactive SVG paths.

Aankita1mit
77% match
Loading thumbnail…

Let's make a map!

This map visualization displays countries as light green polygons with black outlines, set against a blue spherical background representing the globe. The example uses D3.js v5, specifically d3.geoPath and d3.geoNaturalEarth1 for the map projection, along with the TopoJSON library to convert geographic data into SVG paths. Country boundaries are rendered from the world-atlas countries-110m.json dataset, which is fetched and processed asynchronously. The visualization demonstrates a basic choropleth-free world map, focusing on geographical shape rendering rather than data encoding.

AAbhijeet Panda
77% match
Loading thumbnail…

Lets make a MAP

This example renders a world map using a Natural Earth projection, highlighting countries as solid yellow shapes against a blue ocean sphere. The visualization builds the map with D3’s `geoPath` and `geoNaturalEarth1` projection, while the TopoJSON `feature` function converts country boundaries from a JSON dataset. Path elements are generated for each country, with styling controlled by CSS classes for the sphere and landmasses. The map is drawn using SVG, and the data source is the world-atlas countries-110m JSON file.

Eedmond gihozo
77% match
Loading thumbnail…

Let'smakeamap

This example displays a world map using the Natural Earth projection, with countries filled in light green against a dark blue sphere. It loads GeoJSON country boundaries from the world-atlas TopoJSON dataset via `d3.json` and converts them with `topojson.feature`. The SVG paths are generated using `d3.geoPath` and `d3.geoNaturalEarth1`, with styling applied through CSS classes for the sphere and individual countries.

OOhayouKaminari
77% 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
76% match