Fork of D3 Scatter Plot: geonames_cities100000.csv

100%

Fork of D3 Scatter Plot: geonames_cities100000.csv

✓ Published1🌍 Public

Last edited Sep 28, 2021

Created on Sep 15, 2021

Forked from D3 Scatter Plot: vgsales.csv

This visualization displays a scatter plot of global cities with a population exceeding 100,000, projecting geographic coordinates onto a world map. Point color is interpolated from blue to red based on population with d3.interpolate, encoding magnitude. The plot uses SVG circles with a fixed radius and 0.8 opacity, rendered via D3 v6 imported APIs. The axes employ linear scales for longitude and latitude across fixed ranges, with data loaded asynchronously from a CSV using the d3.csv function.

AI-generated description

A vanilla HTML implementation of a D3 scatter plot.

Forked and authored by Daniel Ribaudo.

This is the link to the Gist: Geonames Cities

Within this dataset, city names are provided alongside their latitude, longitude, and population.

I added comments to this file to demonstrate understanding of various pieces of code. I edited the required segments (import, circle radius, and circle opacity) as well as other segments. I interpolated between colors using d3.interpolate to communicate the population in a city. Blue is lower population and red is higher population. I manually scaled the axis between [-90, 90] for y (latitude) and [-180, 180] for x (longitude). These bounds follow the boundaries on these values, rather than be based on the dataset. It is wonderful that such a clear map of the world is within this image.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Cities on a Globe

This visualization displays a three-dimensional globe with colored circles marking cities with populations over 100,000, drawn from preprocessed Geonames data. Users can drag to rotate the Earth and scroll to zoom, with smooth transitions between low- and high-resolution country boundaries from the TopoJSON World Atlas. The code uses d3.geoOrthographic for projection, d3.geoPath to render geographic features, and d3.drag with d3.zoom for interaction. Circle sizes scale with population using d3.scaleSqrt, and hovering reveals a city’s name and population via d3-tip tooltips.

CCristina Macaraig

82% match

Loading thumbnail…

Fork of Cities on a Globe

This interactive visualization shows a globe displaying circles for cities with populations over 100,000, using data from Geonames. Users can pan and zoom the orthographic projection, with low-resolution world boundaries shown during movement and higher-resolution boundaries when settled. The globe is rendered using d3.geoPath with a d3.geoOrthographic projection, while city positions are computed and projected onto the SVG. d3.drag handles rotation, and d3.zoom manages scaling. Hovering over a city reveals a tooltip, implemented with d3-tip, showing the city name and formatted population. Data includes country outlines from the world-atlas TOPOJSON files and city coordinates from a preprocessed CSV.

PPiotr Paszek

82% match

Loading thumbnail…

Scatterplot

A scatterplot displays population figures for countries exceeding 100 million inhabitants. The visualization uses a linear scale for population on the x-axis and a point scale for country names on the y-axis, with axis labels and gridlines. It loads data from a CSV file using d3.csv, scales the population values, and renders SVG circles. The code employs d3.scaleLinear, d3.scalePoint, d3.axisLeft, d3.axisBottom, and d3.format for tick labels.

CCarloGato

80% match

Loading thumbnail…

Fork of Cities on a Globe

This interactive globe visualization displays cities with over 100,000 inhabitants as circles sized by population, rendered as SVG with D3 v4. Users can pan and zoom the orthographic projection, with drag interactions updating the rotation and a zoom handler adjusting scale. The globe alternates between 110m and 50m resolution land boundaries from the World Atlas TopoJSON during motion, while city data from a GeoNames CSV is projected using `d3.geoPath`. Hovering reveals a tooltip with city name and population via `d3-tip`.

CCoollRock

80% match

Loading thumbnail…

Fork of Cities on a Globe

This visualization presents an interactive orthographic globe displaying circles for cities with populations exceeding 100,000, sourced from preprocessed Geonames data. Users can pan and zoom the globe using drag gestures and the mouse wheel, with low-resolution country boundaries shown during movement and high-resolution shapes rendered when stopped. The code leverages d3.geoOrthographic, d3.geoPath, topojson, and d3-tip for hover tooltips, while a square-root scale maps population to circle radius. Hovering over a city reveals its name and population in a formatted tooltip.

EEngineerRajeev

79% 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

79% match

Loading thumbnail…

Fork of Cities on a Globe

An interactive SVG globe shows the world’s cities with over 100,000 inhabitants, sized by population; hovering reveals names and counts. Panning by dragging and zooming via the mouse wheel or pinch gestures rotates the orthographic projection, with lower-resolution country boundaries during active motion. The visualization uses d3.geoPath, d3.geoOrthographic, d3.drag, d3.zoom, and d3.queue to load and project GeoJSON from world-atlas and CSV population data from Geonames.

AAki78

79% match

Loading thumbnail…

Fork of Sized Points on a Map

This visualization displays global cities with populations over 50,000 as semi-transparent circles on a natural Earth projection map. Circle size encodes population using a square root scale, with the largest cities reaching 15 pixels in radius. The map renders country boundaries and graticules using d3.geoPath with TopoJSON data from the World Atlas, while city coordinates come from a Simplemaps CSV. Built with React and d3.v5, the SVG map overlays scaled circles onto the projected geographic features, filtered from the complete world cities dataset.

Bblueyjuice

79% match