Skip to main content
100%

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

✓ Published0🌍 Public
AAlif
Last edited Mar 3, 2021
Created on Mar 2, 2021

This visualization combines a D3.js v4 Mercator projection map of world countries with layered pie charts representing water quality data from a CSV. The map renders landmasses in green with white mesh borders, while each data point uses a red circle and an overlaid pie chart built with `d3.pie` and `d3.arc`. Country boundaries are generated using the `topojson` library on a world-atlas GeoJSON source, and the pie charts’ angles reflect the comma-separated values in the `data` field. The color scheme for the slices comes from `d3.schemeCategory10`.

AI-generated description
MIT Licensed

Similar vizzes

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

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

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

This map visualization displays world countries colored in light green on a blue sphere, with hover effects turning countries red. It uses D3 v5 and TopoJSON to load and render world geography from the world-atlas dataset. The code combines `d3.geoNaturalEarth1` for projection, `d3.geoPath` for drawing country boundaries, and `d3.zoom` for interactive panning and zooming. Country names are joined from a TSV file and shown as SVG `<title>` tooltips.

Ggharakhani1986
86% match
Loading thumbnail…

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

This visualization displays a world map using a natural Earth projection, with countries filled in light green and oceans in blue. The map is rendered as SVG paths on a 960×500 canvas using D3.js version 5 and the TopoJSON library. The code loads country boundaries from a world-atlas JSON file and projects them with d3.geoNaturalEarth1 and d3.geoPath. Each country’s outline is drawn as a separate path with a subtle black stroke, while a sphere path fills the background before the country data arrives.

Mmaferayala
86% match
Loading thumbnail…

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

This map shows the countries of the world rendered with a natural Earth projection, where landmasses appear in light green against a blue sphere. The visualization uses d3.geoNaturalEarth1 for the projection and d3.geoPath to generate SVG paths from TopoJSON data loaded via d3.json from the world-atlas dataset. Country boundaries are drawn with a subtle black stroke, while the underlying sphere provides an ocean-colored backdrop.

Bbugfree55
86% match
Loading thumbnail…

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

This map visualization displays world countries as filled regions on a globe-like sphere using a natural Earth projection. The example demonstrates map creation with D3.js version 5, using `d3.geoPath` and `d3.geoNaturalEarth1` for the projection. Country boundaries are rendered as SVG paths from the world-atlas TopoJSON dataset, which is processed through the `topojson` library's `feature()` function. The sphere is styled blue, while country shapes appear in light green with subtle black stroke outlines.

Hhewitt99
86% match
Loading thumbnail…

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

This map visualizes the countries of the world on a blue sphere using a natural Earth projection. It renders geographic boundaries with a light green fill, black strokes, and a semi-transparent stroke opacity. The code uses D3 v5’s `geoNaturalEarth1` and `geoPath` to project and draw features, while TopoJSON’s `feature` extracts country polygons from the world-atlas dataset. A static SVG path for the sphere is appended first, followed by dynamically appended country paths.

PPatrickhCahill
85% match