Elena Dreosti

@elenadreo·7 public vizzes

Sized Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent red circles, with circle size scaled by population using a square-root scale. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, rendering landmasses, country interiors, and graticules from World Atlas TopoJSON data. City coordinates and populations come from a Simplemaps CSV, processed with React hooks and D3’s `csv` loader, and the visualization is built with React and SVG.

Nov 15, 2020

Loading thumbnail…

D3 and SVG smile

This example shows a simple smiling face constructed entirely with SVG shapes, drawn on a red background. The face consists of a yellow circle for the head, two small rectangles for eyes, two circles for pupils, and a black arc for the mouth. The code uses D3 version 6 to select the SVG element, set its dimensions and background, and append the geometric primitives with chained `.attr()` calls. It also uses `d3.arc()` to generate the path data for the smile, demonstrating how D3’s arc generator can be used with SVG paths.

Sep 30, 2020

Loading thumbnail…

Sized Points on a Map

This example displays a Natural Earth projection world map with semi-transparent red circles sized by population for cities exceeding 50,000 residents. The visualization uses React for component structure and D3 v5 APIs including `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule` for map rendering, plus a square root scale for circle sizing. City data comes from the Simplemaps World Cities Database, while country boundaries use the World Atlas TopoJSON dataset. The map shows graticules and styled land masses with interactive hover states on country boundaries.

Sep 30, 2020

Loading thumbnail…

Sized Points on a Map

A world map displays city populations greater than 50,000 as semi-transparent red circles, with circle area scaled by population using a square-root scale. Natural Earth projection and geoPath render landmasses, country boundaries, and graticules from World Atlas TopoJSON. City coordinates from the Simplemaps World Cities Database project onto the map via d3.geoNaturalEarth1, while React manages the SVG rendering and loading states.

Sep 30, 2020

Loading thumbnail…

Circles on a Map

This visualization displays global population data for 2018 using scaled circles positioned at country centroids on a natural Earth projection map. Circle area encodes population magnitude, while hovering reveals exact population figures and regional names. The map supports pan and zoom interactions through d3.zoom. Built with d3.geoNaturalEarth1 and d3.geoPath for map rendering, it uses d3.scaleSqrt for circle sizing and d3.scaleOrdinal with a spectral scheme for the categorical color legend. Population data comes from a CSV file processed alongside TopoJSON world boundaries.

Sep 30, 2020

Loading thumbnail…

Circles on a Map

This visualization displays global population by country using circles overlaid on a natural Earth projection map, with circle area proportional to 2018 population data. Users can pan and zoom the map and hover over countries to see region names and population figures. The implementation uses D3 v5 with `geoNaturalEarth1`, `geoPath`, `geoCentroid`, and `scaleSqrt` for sizing, while loading data from a CSV file and TopoJSON world atlas. Circle positions derive from projected centroids, and a custom size legend communicates the population scale.

Sep 28, 2020

Loading thumbnail…

Circles on a map

This visualization displays confirmed COVID-19 cases per country on a world map, using a natural Earth projection from the topojson library. The map shows circles sized by the square root of case numbers, with a legend explaining the scaling. It uses d3.select, d3.geoPath, and d3.scaleSqrt for rendering, and supports interactive zooming. Data is loaded from a CSV file, and the map is rendered as SVG with hover tooltips showing country names and case counts.

Sep 28, 2020