Skip to main content
SimilarExport ZIP
100%

Sized Points on a Map using videoData!

✓ Published0🌍 Public
Ssophburke
Last edited Oct 19, 2019
Created on Oct 19, 2019

This example displays a world map with semi-transparent circles sized to represent video views, using data from a CSV of course participants. The visualization uses a Natural Earth projection via `geoNaturalEarth1` and renders geographic features with `geoPath` and `geoGraticule`, while the circles use `scaleSqrt` mapped to the `nplay_video` field. Country boundaries come from World Atlas TopoJSON, and the React-based component structure leverages the `useWorldAtlas` and `useDataViews` hooks to load and parse the data.

AI-generated description

A world map showing cities with population greater than 50,000. City data from Simplemaps: World Cities Database.

Country boundaries from World Atlas TopoJSON, polished for visual style, including graticules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sized Points on a Map

This example displays a world map with circles sized by city population, using a square-root scale to encode the values. The visualization uses a Natural Earth projection via `geoNaturalEarth1` and renders landmasses, graticules, and interiors using `geoPath` and `geoGraticule`. City coordinates are projected from latitude and longitude, and the data comes from the Simplemaps World Cities Database. The React application leverages D3’s `csv` and `json` fetch methods, with SVG circles styled with a teal fill and partial opacity for a clean, polished look.

Qqhfzwyx
84% match
Loading thumbnail…

Sized Points on a Map

This example displays a world map with circles sized by city population, using a square-root scale to encode the values. The visualization uses a Natural Earth projection via `geoNaturalEarth1` and renders landmasses, graticules, and interiors using `geoPath` and `geoGraticule`. City coordinates are projected from latitude and longitude, and the data comes from the Simplemaps World Cities Database. The React application leverages D3’s `csv` and `json` fetch methods, with SVG circles styled with a teal fill and partial opacity for a clean, polished look.

Qqhfzwyx
84% match
Loading thumbnail…

Sized Points on a Map

This example displays a world map with circles sized by city population, using a square-root scale to encode the values. The visualization uses a Natural Earth projection via `geoNaturalEarth1` and renders landmasses, graticules, and interiors using `geoPath` and `geoGraticule`. City coordinates are projected from latitude and longitude, and the data comes from the Simplemaps World Cities Database. The React application leverages D3’s `csv` and `json` fetch methods, with SVG circles styled with a teal fill and partial opacity for a clean, polished look.

Qqhfzwyx
84% match
Loading thumbnail…

Sized Points on a Map

This example displays a world map with circles sized by population for cities exceeding 50,000 residents. It uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to render landmasses, graticules, and interiors. City data is loaded from a CSV using `d3.csv`, with circle radii scaled by a square root scale (`d3.scaleSqrt`). The visualization is built with React and rendered as SVG, styled with soft teal, semi-transparent points.

SSam
83% match
Loading thumbnail…

Sized Points on a Map

This visualization presents a world map with semi-transparent circles representing cities, where point size encodes each city’s area value. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to render landmasses, interior borders, and graticules. City positions are projected from latitude/longitude coordinates, with circle radii scaled using `d3.scaleSqrt`. The React component fetches world atlas TopoJSON and city data from a CSV URL, rendering SVG elements within a `Marks` component.

JJane Wang
83% match
Loading thumbnail…

Sized Points on a Map - Episode 37

This example displays world cities as circles on a natural Earth projection, with each circle's radius proportional to the city's population using a square-root scale. The visualization renders a land and graticule backdrop using D3's geoPath and geoNaturalEarth1, and overlays the sized points as SVG circles. City data is loaded from a CSV URL, while world map geometry comes from the world-atlas TopoJSON. The React application uses D3's `csv`, `json`, `feature`, and `mesh` functions to prepare and project the data.

Rroc286
83% match
Loading thumbnail…

Sized Points on a Map

This example presents a world map with cities sized proportionally to their population, using a square-root scale to encode the data. The visualization renders geographic features like landmasses, graticules, and country boundaries using `geoNaturalEarth1` and `geoPath`, while city points are drawn as SVG circles positioned via the projection. The map is built with React and D3 v5, pulling city data from a CSV of the Simplemaps World Cities Database and country topology from World Atlas TopoJSON.

CCurran Kelleher
82% match
Loading thumbnail…

Sized Points on a Map

This example displays a world map with city points sized by population. It uses a Natural Earth projection via D3's `geoNaturalEarth1` and `geoPath` to render landmasses, graticules, and country interiors. The map’s cities, sourced from a Simplemaps database, are drawn as SVG circles with radii scaled by the square root of population using D3’s `scaleSqrt`. The visualization is built with React and D3, with styles for the land, sphere, and graticules defined in CSS, and data loaded asynchronously from external files.

Fftjyangf
82% match