Final version - Globe

100%

Final version - Globe

✓ Published2🌍 Public

Last edited Dec 12, 2024

Created on Dec 4, 2024

This interactive globe visualization displays cricket match data for cities worldwide, with each city marked by a circle. Users can pan and zoom the SVG-based globe, which uses the D3.js `geoOrthographic` projection. The visualization plots match details, including teams and winning information, into an interactive tooltip when a city is hovered. It leverages `d3.geoPath` for geographic shapes and displays data from a CSV file containing specific match statistics.

AI-generated description

A globe with pan & zoom showing circles for each city of over 100,000 inhabitants. Data from Geonames, preprocessed. The same data is used in World City Explorer.

Uses world-110m and world-50m geographic shapes from TOPOJSON World Atlas.

Inspired by

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/0bb64d8f56042e2480c908b0985f063b'>Orthographic Zoom III</a>

Imported to VizHub from bl.ocks.org: Cities on the Globe

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Final version - Globe

This interactive globe displays cities with populations over 100,000 as circles, using pan and zoom to explore geographic distribution. Hovering over a point reveals a tooltip table listing cricket match details from the linked dataset, including teams and winning outcomes. Built with D3.js, it uses `d3.geoOrthographic` projection and `d3.geoPath` for landmasses, with city coordinates plotted from GeoNames data. The visualization incorporates SVG rendering and custom tooltip positioning to handle viewport constraints.

PParth Shroff

92% match

Loading thumbnail…

Fork of v1

This interactive visualization presents a rotatable and zoomable globe displaying cricket World Cup match data across cities. Each location is marked with a steelblue circle, and hovering over a point reveals a tooltip with the winning team and match details. Built with D3.js, the visualization uses `d3.geoOrthographic` for the projection and `geoPath` to render world map outlines from TopoJSON data. City coordinates come from a local CSV file containing match statistics, with drag and zoom interactions controlled through D3's drag and zoom behaviors.

PParth Shroff

86% match

Loading thumbnail…

Fork of Fork of v1

This interactive globe visualizes cricket World Cup match data, with circles positioned at city locations and colored to represent teams. The orthographic projection supports pan and zoom navigation. The visualization uses `d3.geoOrthographic` and `d3.geoPath` to render world geography from TopoJSON data, while city coordinates from the merged CSV file are projected onto the globe. Tooltips display match details and winning information.

PParth Shroff

85% match

Loading thumbnail…

Second iteration of final project

This interactive globe visualization displays cities with populations over 100,000 as circles sized by population, projected onto an orthographic globe that supports panning, zooming, and rotation. Using d3.geoPath with d3.geoOrthographic, it renders country boundaries from the world-110m and world-50m TopoJSON datasets, switching to lower-resolution shapes during drag interactions for performance. City data originates from preprocessed Geonames data, with tooltips provided via d3-tip and interaction handled through d3.drag and d3.zoom.

PParth Shroff

80% match

Loading thumbnail…

Fist Iteration of final project

This interactive globe visualization displays geopolitical boundaries and stadium locations using an orthographic projection. Users can pan by dragging and zoom by scrolling, with d3-geo and d3-zoom handling the interaction and projection math. The map renders TopoJSON country outlines via d3.geoPath, while a custom visibility tester from d3-geo ensures point markers only appear on the visible hemisphere. Red circles mark stadium coordinates filtered through the projection’s stream interface, demonstrating how to handle off-screen geographic points in a rotating globe context.

PParth Shroff

77% match

Loading thumbnail…

Globe project

This globe visualization, rendered with D3 v4 and Three.js, presents an interactive Earth with countries, graticules, and labeled points of interest. Built from a fork of earthjs’s block, it combines SVG, canvas, and WebGL for smooth rotation and zoom, with hover tooltips for countries and dots. A subtle gradient ocean and interactive land paths highlight geographic features, while CSS transitions provide visual feedback on hover.

EEPBAH

75% match

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

75% match

Loading thumbnail…

Globe with Cities - React & D3

An orthographic globe projection displays world landmasses and city markers scaled by population, with graticules and a sphere contour providing geographic context. Built with React for state management and D3’s `geoOrthographic`, `geoPath`, and `geoGraticule` for projection and rendering, the visualization includes interactive rotation via mouse position tracking. City coordinates come from a CSV dataset, and land features are derived from TopoJSON using `topojson.feature` and `topojson.mesh`.

Ddvinubius

74% match