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

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

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

This example shows a world map rendered as SVG paths, with countries filled in light green against a blue spherical background. It uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to generate the map, while TopoJSON’s `feature` extracts country boundaries from the world-atlas dataset (110m resolution). The code appends a sphere path first, then loads the TopoJSON data asynchronously and appends individual country paths, styling them via CSS classes. The result is a static, interactive-free choropleth-style map.

DDario Thornhill

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

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

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

This map visualization displays countries on a natural Earth projection, with oceans filled in blue and landmasses in light green with subtle black strokes. It draws a basemap from the World Atlas TopoJSON dataset using the `feature` method from Topojson, then renders the sphere and country boundaries with `d3.geoPath` and the `geoNaturalEarth1` projection. The code loads data asynchronously via `d3.json`, appends SVG paths, and styles the elements through CSS classes.

MMina Rezaei

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

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

This example uses D3 v5 and TopoJSON to render a natural Earth projection world map. It draws a blue sphere outline via a `geoNaturalEarth1` projection and `geoPath`, then loads country boundaries from the world-atlas 110m TopoJSON dataset. Each country is appended as an SVG path with a light green fill and black stroke, while the sphere is colored dark blue. The map is static and demonstrates basic geographic data loading, projection, and SVG rendering.

Mmaferayala

Let's make a map with D3.js!

This example displays a choropleth map of geographic features rendered as SVG paths. It uses D3.js v5 to load the GeoJSON data, apply a Mercator projection with `d3.geoMercator`, and generate the path data via `d3.geoPath`. The TopoJSON library converts the datasource into GeoJSON features using `feature()`, while `d3.json` fetches the remote file before appending each path to the SVG canvas.

Cchaimmaeee