SVG intro

100%

✓ Published0🌍 Public

Last edited Jun 9, 2018

Created on Jun 9, 2018

A scatterplot of global cities maps each location with a circle scaled by population, using longitude and latitude for positioning on an 800×400 SVG canvas. Built with Vue and D3.js, the visualization loads city data from a CSV file and applies a square-root scale so circle area corresponds to population size. The code uses `d3.scale.sqrt()` and `d3.extent()` to set scales, then renders semi-transparent white circles against a black background.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/quizzicol/'>quizzicol</a>'s block: <a href='http://bl.ocks.org/quizzicol/eb66e465fc1f85c90702'>visualizing cities</a>

mit Licensed

Similar vizzes

Loading thumbnail…

SVG Globe with cities

An interactive SVG globe displays roughly 48,000 cities from the MaxMind WorldCities database, with each city shown as a red point. Users can pan and zoom the globe, which uses `d3.geoOrthographic` and `d3.geoPath` to render the sphere, graticule, and country borders. The implementation leverages `d3.zoom` for navigation, and dynamically redraws the paths on each zoom or drag event. The city data is loaded from a CSV and plotted as a single `MultiPoint` feature, with population values available but not visually encoded.

SSazerland

84% match

Loading thumbnail…

D3 Example

This interactive visualization displays global cities with populations over 100,000 as circles on a world map. Using SVG rendering within a Vue application, each city is represented by a circle whose area corresponds to population, with one filled pixel per 50,000 people. Overlapping city circles create brighter regions, visually encoding population density. Users can pan and zoom to explore, and hovering reveals a tooltip with the city name and population via d3-tip. The visualization supports scroll-wheel zooming and drag-based panning, with data sourced from GeoNames.

CCurran Kelleher

82% match

Loading thumbnail…

Cities on the Globe

This interactive globe displays all cities with populations over 100,000 as proportional circles, rendered in SVG with d3.geoOrthographic projection and d3.geoPath. Users pan by dragging and zoom with the mouse wheel, swapping between low- and high-resolution TopoJSON world boundaries (110m and 50m) during movement for performance. City data comes from a CSV of 250 cities, with tooltips via d3-tip showing population counts.

CCurran Kelleher

78% match

Loading thumbnail…

Cities on a Globe

This example presents an interactive orthographic globe that plots circles for cities with populations over 100,000, with circle size proportional to population. Users can pan and zoom the globe by dragging or using the scroll wheel, which triggers dynamic re-rendering of city markers. The visualization uses D3 v4 with d3.geoOrthographic projection, d3.geoPath, d3.drag, and d3.zoom, along with TopoJSON world-atlas data for country boundaries. City data originates from a preprocessed Geonames dataset, and the code displays tooltips via d3-tip on hover.

DDavid Allyn

76% match

Loading thumbnail…

Scatter plot

This scatter plot displays city areas in square meters along the x-axis with city names on the y-axis, using a linear scale for area and a point scale for cities. The visualization renders purple circles with hover effects, and includes axis tick lines and labels for readability. The code uses D3 v5 modules including `scaleLinear`, `scalePoint`, `axisLeft`, `axisBottom`, and `csv` to load and parse the data from a CSV file, with the chart drawn as an SVG.

Vvladvaculin

76% match

Loading thumbnail…

Scatterplot

This scatterplot displays the populations of six cities, with circles positioned along a point scale for city names and a linear scale for population values. The visualization uses D3 v7’s `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft` to render an SVG chart with gridlines and labeled axes. Population data is loaded from a CSV file via `d3.csv`, and tick labels are formatted using `d3.format` to abbreviate large numbers. The circles are styled with a steelblue fill, and the chart includes a descriptive title.

Ssheafallick

76% match

Loading thumbnail…

Size on a map

This visualization displays the population of cities as circles sized on a geographic map. It uses a Mercator projection to position each city, with the circle radius determined by a square-root scale applied to population data from the Sense Your City dataset. The map is rendered as SVG paths for countries and their interiors, with the circles overlaid in a semi-transparent teal color. The code leverages D3’s `geoMercator`, `geoPath`, and `scaleSqrt` functions within a React framework, loading both world atlas topology and CSV city data from external URLs.

Vvigneswaran009

75% match

Loading thumbnail…

World Map - React & D3

This map visualization displays global cities with scaled square-root population marks overlaid on a land-based world map. Built with React and D3 v5, it renders an SVG projection using `d3.geoMercator()` and `d3.geoPath` with graticules, land features, and interior boundaries. City data comes from a CSV file, and population values drive symbol sizing via `d3.scaleSqrt`.

Ddvinubius

75% match