Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
NNikithakatta30
Last edited May 13, 2023
Created on May 13, 2023
Forked from D3 Starter

This example displays a choropleth world map colored by the reported happiness score from a CSV dataset covering over 80 countries. The visualization loads world topography via TopoJSON, joins it with the tabular data, and maps each country’s score to a sequential blue color scale using `d3.scaleSequential` and `d3.interpolateBlues`. It renders the geographic boundaries as SVG paths through `d3.geoPath` with a Mercator projection. The underlying libraries are D3 v6 and the world-atlas TopoJSON collection.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This example presents a choropleth map of the world, coloring each country according to its economic classification. The visualization uses a natural Earth projection via `d3.geoNaturalEarth1()` and renders SVG paths with `d3.geoPath`. Country boundaries are stroked in black, and hovering turns a country black. The code merges TopoJSON geometry with TSV data, and colors are assigned using `d3.scaleOrdinal` with a reversed `d3.schemeSpectral` palette, where the legend is not shown. Data is sourced from the `world-atlas` package and a custom TopoJSON file.

Vvenkatajayanth03
86% match
Loading thumbnail…

Untitled

A choropleth map colors countries according to the number of students per country, with a sequential red color scale and a legend showing count ranges. The visualization uses D3 v5’s `d3.geoMercator` projection and `d3.geoPath` to render world topology from the World Atlas TopoJSON, while data from a TSV file is joined to country features. Country boundaries are styled with white strokes, and hovering highlights the selected country.

Bbambaleq
86% match
Loading thumbnail…

Untitled

A choropleth world map visualizes mock document counts by country, with countries colored on a scale from green to red based on their associated values. The map renders in SVG using the Mercator projection via `d3.geo.mercator` and `d3.geo.path`, with graticule lines drawn for reference. TopoJSON data from `world.json` is loaded and merged with aggregation data containing country codes and document counts, then filtered to exclude Antarctica. Country boundaries appear as white strokes, and users can hover to reveal labels, though labels remain hidden by default.

FFatemeh Safarlou
85% match
Loading thumbnail…

Untitled

This example shows a choropleth map of world countries colored by their economy category, using a spectral color scale. The visualization renders SVG paths via d3.geoPath with a natural Earth projection, while d3.zoom enables panning and zooming. A custom color legend component displays ordinal values with circles and text, and hovering over any country highlights it in red. Data comes from the world-atlas TopoJSON and TSV files, with countries styled using CSS stroke and fill properties.

00718103673
83% match
Loading thumbnail…

World Map Visualization

A world map visualization colors each country according to a numeric value from an external CSV dataset. The example uses D3 v6 with a Mercator projection via `d3.geoMercator` and `d3.geoPath` to render GeoJSON country boundaries as SVG paths. Country fill colors are determined by a sequential blue color scale, while missing data appears gray. The code demonstrates loading remote TopoJSON and CSV files with `d3.json` and `d3.csv`, and includes an ES6 module import for a simple message.

UUVarshaReddy
82% match
Loading thumbnail…

Untitled

This example displays a world map rendered as SVG paths, with each country filled in grey and stroked with white. The visualization uses a Mercator projection centered on the equator, configured via `d3.geoMercator` with a custom scale and rotation. The code loads US Atlas topology data from a remote JSON file and uses `topojson.feature` to extract country boundaries, which are then drawn with `d3.geoPath`. The SVG container is created using `d3.select` and appended to the document body.

Sspace-captain96
82% match
Loading thumbnail…

Untitled

This example presents a choropleth map of global population by country, rendered as an SVG using D3.js v4. It employs a Mercator projection via `d3.geoMercator` and draws country boundaries with `d3.geoPath`. The fill color for each nation is determined by a threshold color scale that bins population values into a blue scheme from `d3.schemeBlues`. Data is loaded asynchronously with `d3.json` for the world GeoJSON topology and `d3.csv` for population figures.

AAaronBhasker
82% match
Loading thumbnail…

Untitled

This example displays a world choropleth map colored by each country’s economy category, with an interactive legend that filters and highlights selected categories. It uses d3.geoPath and d3.geoNaturalEarth1 for geographic rendering from TopoJSON data loaded via topojson.feature, with d3.scaleOrdinal and schemeSpectral mapping categories to colors. The legend and map respond to clicks, adjusting opacity and stroke widths, while d3.zoom enables panning and zooming.

MMukund Khandelwal
81% match