globetest

100%

✓ Published0🌍 Public

Last edited Apr 8, 2023

Created on Apr 8, 2023

This interactive orthographic globe visualizes the world’s population distribution, plotting red circles at the locations of three cities whose radius encodes each population value. The visualization uses D3.js v4 with `d3.geoOrthographic` projection and `d3.geoPath` for country boundaries, rendering to SVG. Users can drag to rotate the globe, which adjusts the projection and swaps between 110m and 50m resolution world-atlas data for smooth interaction. Hovering over a circle shows a `d3-tip` tooltip displaying the city’s name and population.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

globe-test-02

This globe visualization displays city population data on an interactive, rotatable Earth. It shows both low-resolution landmasses during drag interactions and high-resolution country boundaries when idle, with red circles sized according to population. Built with d3.geoPath and d3.geoOrthographic, it uses topojson for country features and d3-tip for hover tooltips. City data comes from a local monoliths.csv file, while world geometries are loaded from world-atlas packages.

KKikkolatsch

87% match

Loading thumbnail…

D3 trials (fork of Cities on a Globe)

This interactive globe displays cities with populations over 100,000 as red circles, using an orthographic projection with drag-to-rotate and zoom capabilities. The visualization renders country boundaries from TopoJSON world-atlas data (110m resolution while dragging, 50m when stationary) and city locations from a CSV file, with circle sizes scaled by population. Tooltips show city names and populations via d3-tip. The implementation uses d3.geoOrthographic, d3.geoPath, d3.drag, and d3.zoom, filtering out cities on the hidden hemisphere based on their projected coordinates.

KKikkolatsch

84% match

Loading thumbnail…

Cities on a Globe

An interactive globe displays pink circles for cities with populations over 100,000, sized by population and hoverable for tooltips. Users can drag to rotate the globe via `d3.drag` and zoom with `d3.zoom`, which adjusts an orthographic projection’s scale. The visualization draws country boundaries from TopoJSON `world-110m` and `world-50m` files, using `d3.geoPath` to project shapes and city coordinates, while switching resolution during rotation. City data comes from preprocessed GeoNames CSV, and tooltips are generated with `d3-tip`.

KKusum Naithani

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

82% match

Loading thumbnail…

Globe 1. Try

This interactive globe displays cities with populations over 100,000 as steel-blue circles, with size scaled by population. Users can drag to rotate the orthographic projection and scroll to zoom, with tooltips showing city names and populations on hover. Using d3.geoOrthographic, d3.geoPath, and d3.drag, it renders low-resolution world boundaries while moving and higher-resolution 50m shapes when still. City data comes from a CSV of Geonames cities, loaded via d3.csv, with geographic shapes from TopoJSON World Atlas.

Mmachetenwueter

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

81% match

Loading thumbnail…

Fork of Cities on a Globe

This interactive globe displays cities with populations over 100,000 as pink circles, with size scaled by population and hover tooltips showing city names and populations. Users can drag to rotate the globe and zoom to adjust the scale, switching between 110m and 50m resolution world boundaries during interaction. Built with D3 v4, it uses `d3.geoOrthographic` for projection, `d3.geoPath` for rendering country shapes, `d3.drag` and `d3.zoom` for interaction, and `d3-tip` for tooltips. City data comes from a preprocessed GeoNames CSV, while country geometries use TopoJSON from the world-atlas package.

Ccriancinhazinha

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

81% match