Skip to main content
SimilarExport ZIP
100%

Fork of Let's make a map with D3.js!

✓ Published0🌍 Public
HHassan Abdullah
Last edited Dec 6, 2021
Created on Dec 6, 2021

This example demonstrates how to load and render world country boundaries as SVG paths. It fetches GeoJSON data from the world-atlas TopoJSON dataset via `d3.json` and converts it using `topojson.feature`. The visualization applies `d3.geoMercator` and `d3.geoPath` to project the geographic coordinates into a 960 by 500 pixel SVG canvas, though the rendering function is only partially implemented, leaving the map unpublished until the path data is appended. The code imports `select`, `json`, `geoPath`, and `geoMercator` from D3 v5.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of 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 on a blue sphere with subtle black borders. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using topojson’s feature method. The visualization uses d3.json to fetch data, d3.geoOrthographic for projection, and d3.geoPath to generate the SVG path data. The sphere is drawn first as a separate path, with all country features appended dynamically once the data loads.

CCaminaur
91% match
Loading thumbnail…

Fork of Let's make a map with D3.js!

This map visualization displays world countries as filled green regions on a blue sphere, rendered entirely with SVG. It loads geographic data from the World Atlas TopoJSON file using `topojson.feature` to extract country boundaries, then projects them with a Mercator projection via `d3.geoMercator` and `d3.geoPath`. The code appends a sphere outline path and draws each country as a separate `path` element, with styling applied through CSS classes for fill and stroke.

Xxyang3672
91% match
Loading thumbnail…

Fork of Let's make a map with D3.js!

This example presents a static world map rendered as SVG, showing countries as pink regions on a sky-blue spherical backdrop. The map is built using D3.js version 5 and the topojson library, which decodes GeoJSON-like data from the `world-atlas` package. The `d3.geoPath` and `d3.geoNaturalEarth1` APIs handle the projection and path generation. The code first draws a full sphere, then loads country boundaries from a remote JSON file and appends them as separate paths. The styling uses a faint blue stroke for country borders.

Bbhanuprasadk19
91% match
Loading thumbnail…

Fork of Let's make a map with D3.js!

This map renders world countries as light blue SVG paths on a white background, with thin black strokes, using the Mercator projection. The code builds the visualization with D3 v5’s `geoPath` and `geoMercator`, converting TopoJSON features from the world-atlas dataset via the `topojson` library’s `feature` function. Country shapes are drawn by appending SVG path elements bound to the projected geometry.

LLes Lim
90% match
Loading thumbnail…

Fork of Fork of Let's make a map with D3.js!

This example demonstrates how to load and prepare world map data using D3.js v5. It fetches TopoJSON data from the world-atlas package with `d3.json`, then logs the parsed dataset to the console, preparing it for future geographic visualization with `d3.geoPath`. The code sets up an SVG canvas with fixed dimensions and applies basic styling to hide page overflow. The visualization currently focuses on data acquisition and debugging, showing the structure of the world map geometry before any rendering occurs.

JJiachen Xu
90% match
Loading thumbnail…

Fork of Let's make a map with D3.js!

This example builds a choropleth-style world map using D3.js v5, displaying country boundaries from the world-atlas TopoJSON dataset. The visualization renders the map as SVG paths, with countries filled in light green and a blue sphere for the background. It uses `d3.geoPath` with a `geoNaturalEarth1` projection to project the geographical data, while `topojson.feature` extracts the country geometries. Population data from a CSV file is loaded, though the code only logs country data to the console rather than encoding values visually, and includes a hover effect that turns countries red.

Mmavercikalvin
90% match
Loading thumbnail…

Fork of Let's make a map with D3.js!

This example shows a world map with countries rendered as light green shapes against a blue sphere, using geographic data from the World Atlas TopoJSON file. The code loads the topojson data via `d3.json`, converts it to GeoJSON with `topojson.feature`, and projects it onto an SVG using `d3.geoMercator` and `d3.geoPath`. Though country borders are styled in CSS, the map is still static; the JavaScript only logs the parsed features to the console.

Ddanish-nix
90% match
Loading thumbnail…

Fork of Let's make a map with D3.js!

This example visualizes a world map using a natural Earth projection, rendering countries as light green paths with dark strokes on a blue spherical backdrop. It loads geographic data from a world-atlas TopoJSON file via `d3.json`, then applies the `topojson` library’s `feature` function to extract country features. The SVG paths are generated using `d3.geoPath` and the `d3.geoNaturalEarth1` projection, which also draws the sphere outline. The input data source is the unpkg-hosted world-atlas dataset, and the rendering is entirely vector-based, using SVG elements styled by the included CSS.

TToooooooT
90% match