Skip to main content
SimilarExport ZIP
100%

Simple World

✓ Published2🌍 Public
LLauren
Last edited Mar 16, 2023
Created on Mar 16, 2023

A black world map renders graticule and country outlines in red against a dark background. The visualization fetches tree cover loss data from a GitHub-hosted CSV and the 110m World Atlas TopoJSON, though the choropleth fill logic is currently commented out, leaving countries uniformly gray. Built with D3.js, it uses `geoNaturalEarth1` and `geoPath` for projection, `csvParse` and `flatRollup` for data processing, and `interpolateRdYlGn` for color scaling.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Simple World Map

A simple world map renders country outlines as vector paths. The visualization fetches TopoJSON data from the visionscarto world atlas, converts it to GeoJSON features with `topojson-client`, and draws the map using `d3.geoPath` with the Natural Earth projection. A graticule and map outline are also rendered, with countries stroked in white for visual separation.

CCurran Kelleher
83% match
Loading thumbnail…

Simple World Map

This example displays a simple world map using D3.js v5 and TopoJSON, rendering countries as green polygons against a blue sphere background. It uses `d3.geoPath` with the `geoNaturalEarth1` projection to convert geographic coordinates into SVG paths, and `topojson.feature` to extract country boundaries from the world-atlas dataset. The visualization is static, with no interaction or zoom enabled, focusing solely on the geographic outline of continents and national borders.

JJunying Li
81% match
Loading thumbnail…

Fork of World Map Simple

This example renders a simple world map with country boundaries and a graticule overlay using a Natural Earth projection. The visualization fetches TopoJSON data from the visionscarto-world-atlas package, converts it to GeoJSON via topojson.feature, and draws paths with d3.geoPath. It also uses d3.geoNaturalEarth1 and d3.geoGraticule to display projection lines, with countries stroked in white and graticules in gray. The map fills the entire browser window, with a loading state managed through a simple state-driven render loop.

Yyoya@web.de
80% match
Loading thumbnail…

World Map-Grayscale

This example displays a grayscale world map with country boundaries, graticules, and a subtle sphere outline. It uses the `geoNaturalEarth1` projection and `geoPath` from D3 v5 to render geographic features as SVG paths. The map is built from World Atlas TopoJSON data, processed with the `feature` and `mesh` functions from topojson to extract landmasses and interior borders. The visualization is constructed as a React component, with a grayscale color scheme for the land and graticules.

KKusum Naithani
79% match
Loading thumbnail…

World Map

This visualization presents a world map using the Natural Earth projection, displaying country boundaries as paths with graticule lines and an outline. It fetches geospatial data from the visionscarto-world-atlas TopoJSON file and converts it to GeoJSON features using `topojson.feature`. The map is rendered with `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule`, with countries drawn as filled paths with white strokes. The visualization adapts to the full browser window size, using D3’s data join pattern to update the SVG elements.

IIshaChid76
78% match
Loading thumbnail…

World Map

This example displays a world map rendered as SVG paths, with countries filled in light gray and outlined in black. It overlays a graticule grid and a foreground border, and also draws country borders in blue. The visualization uses the `d3.geoNaturalEarth1` projection and `d3.geoPath` to render geographic features from TopoJSON data loaded from the world-atlas package. Additionally, `d3.geoGraticule` generates the latitude and longitude grid lines, while the code includes a commented alternative to switch to a higher-resolution 50m dataset.

Hhlkyt
78% match
Loading thumbnail…

World Map

A world map rendered with D3’s geoNaturalEarth1 projection, drawn in SVG using d3.geoPath. The map displays landmasses filled with teal, country interiors as thin light-blue lines, and graticules in gray. Data comes from the TopoJSON World Atlas (countries-50m.json), processed via TopoJSON’s feature and mesh APIs. The React-based visualization shows a static globe with a subtle color scheme, prioritizing clean spatial form over interactivity.

WWolfgang
78% match
Loading thumbnail…

World Map

This world map visualization displays the Earth’s landmasses and country interiors using a Natural Earth projection, rendered as SVG paths. It shows a sphere, graticule lines, land areas in blue, and interior boundaries in a lighter stroke. The code utilizes `d3.geoNaturalEarth1` for projection, `d3.geoPath` for path generation, and `d3.geoGraticule` for the grid. Geographic data comes from the World Atlas TopoJSON (countries-50m.json), processed with `topojson.feature` and `topojson.mesh`. The visualization is built with React, managing data loading via the `useData` hook.

JJonas Carvalho
78% match