Skip to main content
SimilarExport ZIP
100%

TopoJSON

✓ Published0🌍 Public
AAnurup Reddy
Last edited Nov 6, 2025
Created on Nov 6, 2025
Forked from TopoJSON - Rajan

This world map choropleth visualizes population density per km² by country, using a threshold color scale with breakpoints at 1, 10, 30, 50, and 100 people per square kilometer. Countries without matching data appear gray. The visualization renders with d3.geoPath and a Mercator projection fitted to a 960×520 SVG,

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

world map

This choropleth map visualizes global population density, with each country colored on a blue sequential scale, from light shades for lower values to darker blues for higher densities. Countries without data appear in gray. The visualization uses D3.js v7 to load TopoJSON world map data and a CSV file, converting them to GeoJSON features. The map is rendered as SVG paths using a Natural Earth projection, with an interactive tooltip on hover and a linear gradient legend showing the density range.

AAparna Desi Reddy
86% match
Loading thumbnail…

Map

This visualization is a world population density map where each country is colored according to its inhabitants per square kilometer, using a sequential color scale from light blue (sparse) to red (dense). It displays a legend and tooltips on hover, allowing users to inspect individual countries. Built with D3 v7, the map uses `d3.geoNaturalEarth1` and `d3.geoPath` to render geographic boundaries from TopoJSON data, while population statistics are parsed from a TSV file and aggregated with `d3.rollup` and `d3.sum`.

AAnurup Reddy
85% match
Loading thumbnail…

Map

A world choropleth map visualizes population by country using a blue threshold color scale. The SVG rendering combines world-atlas TopoJSON geographic features with population data from a local JSON file, linked by country ID. D3's `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` draw the map and grid lines, while hover tooltips reveal country names and formatted population values.

AArun Kumar M
84% match
Loading thumbnail…

world map

This world map visualizes population density across countries, with each nation colored on a sequential blue scale from light to dark based on its density value. The map renders in SVG using a Natural Earth projection via d3.geoNaturalEarth1 and d3.geoPath. It loads TopoJSON country boundaries from world-atlas and joins CSV population data by country ID, while a gradient legend shows the density range. Interactive hover tooltips display the country ID and its population density or “No data” when unavailable.

AAparna Desi Reddy
83% match
Loading thumbnail…

TopoJSON - Rajan

A world map choropleth visualizes population estimates by country, with countries colored on a blue sequential scale, while nations lacking data appear in gray. The example loads country boundaries from TopoJSON via the `topojson-client` library and renders them with `d3.geoPath` in an SVG, applying a Mercator projection. Interactive tooltips display each country’s population value on mouse hover. The color mapping is derived from a `d3.scaleQuantize` scheme, and the map includes a graticule overlay for reference.

Kkhushburajan2015@gmail.com
83% match
Loading thumbnail…

choropleth map for the "Density (P/Km2)"

This choropleth map visualizes global population density by coloring each country according to its estimated population (pop_est) using a viridis sequential color scale. The map renders world geography as SVG paths via d3.geoPath, with country boundaries stroked in white and a hover effect darkening each region. The code loads world-atlas TopoJSON data through d3.json, converts it to GeoJSON with topojson.feature, and maps population values to fill colors. D3 v7 handles the SVG generation and data binding, while the color scale uses d3.scaleSequential with d3.interpolateViridis for continuous color encoding.

JJames Cruz
82% match
Loading thumbnail…

map

This visualization displays a world map where each country is colored according to its population using a sequential yellow-orange-red color scale. Population data is loaded from a CSV file and merged with country geometries from the world-atlas TopoJSON dataset. The map uses a Mercator projection via d3.geoMercator and renders paths with d3.geoPath, while hovering over a country reveals its name and population in a tooltip. Missing data appears gray, and the SVG canvas includes a light blue background.

PP Manisha
82% match
Loading thumbnail…

Choropleth Map

A choropleth map visualizes population estimates per country for 2018, with each country shaded and overlaid with proportional circles sized by population magnitude. The visualization uses a natural Earth projection via `d3.geoPath` and `geoNaturalEarth1`, while `topojson.feature` loads world geometry. Population data comes from a CSV file, and a square-root scale sizes the circles. The map supports zooming through `d3.zoom`, and legends for color and size are built with custom SVG components. Hovering highlights countries and shows population in a tooltip.

Kkasalwelengwe@gmail.com
81% match