Fork of Monoliths on a Globe

100%

Fork of Monoliths on a Globe

✓ Published0🌍 Public

Last edited Feb 12, 2022

Created on Feb 12, 2022

An orthographic globe maps city populations with red circles that scale by square-root radius, using a high-resolution world boundary when idle and low-resolution during drag. Users rotate the globe via D3 drag and zoom with D3 zoom, while d3-tip tooltips display formatted population values on hover. The visualization loads TopoJSON country polygons from the world-atlas package and CSV data, projecting points with d3.geoPath and caching projected coordinates to filter out back-side cities.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Monoliths on a Globe

The visualization displays city names and population counts as red circles positioned on an orthographic globe, rendered in SVG. Users can drag to rotate the Earth, which triggers low-resolution country boundaries during motion and high-resolution boundaries when stopped. The code uses d3.geoOrthographic, d3.geoPath, and d3.zoom for interaction, with d3-tip for hover tooltips. Data comes from an external CSV file, while country geometries load from the world-atlas TopoJSON dataset.

KKikkolatsch

94% match

Loading thumbnail…

Fork of Monoliths on a Globe

This visualization displays population sizes of three monoliths—Utah, Romenia, and California—as proportional red circles on an interactive orthographic globe. Users can drag to rotate the globe and zoom to adjust scale, with tooltips showing exact population values. The code uses `d3.geoOrthographic`, `d3.geoPath`, and TopoJSON world-atlas boundaries for rendering, switching between 110m and 50m resolution during rotation for performance. Circle radii come from a square-root scale of population data loaded from a CSV via `d3.csv`. Interactive features rely on `d3.drag` and `d3.zoom`, with `d3.tip` providing hover labels.

CCarlos Henrique Cardoso

89% match

Loading thumbnail…

Fork of Cities on a Globe

This interactive visualization presents a rotatable orthographic globe populated with circles representing cities of over 100,000 inhabitants, sized by population. Users can drag to rotate the globe and zoom, with low-resolution country boundaries shown during movement and higher-resolution shapes when stopped. The code uses d3.geoOrthographic, d3.geoPath, and d3.drag, with TopoJSON world atlas data for countries and a preprocessed Geonames dataset for cities. Hovering over a circle reveals a tooltip via d3-tip, displaying the city name and population.

PPioustu

88% match

Loading thumbnail…

Fork of Monoliths on a Globe

A fork of the "Monoliths on a Globe" prototype plots three monolith locations—Utah, Romania, and California—as steelblue circles on an orthographic globe. The visualization uses d3.geoOrthographic with d3.geoPath and topojson to render world boundaries at 50m and 110m resolutions, switching to the lower detail during drag and zoom interactions. Circles are positioned via a projection, with d3-tip tooltips showing names on hover. Population values are read from a CSV but are not used in the visible rendering, as circles have a fixed radius.

SSteve_Nashon

88% match

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

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

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

87% match

Loading thumbnail…

Fork of Monoliths on a Globe

This example plots the locations of reported monolith sightings on a 3D orthographic globe, with each steel-blue circle marking a site. The globe is draggable to rotate and zoomable via the mouse wheel. The visualization uses `d3.geoOrthographic` for projection, `d3.geoPath` with shared world-atlas TopoJSON data for rendering country boundaries, and `d3.drag` and `d3.zoom` for interaction. It also includes `d3.tip` tooltips that display the monolith name on hover.

CCarlos Henrique Cardoso

87% match