Fork of v1

100%

✓ Published1🌍 Public

Last edited Dec 7, 2024

Created on Dec 4, 2024

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.

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

96% match

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

87% match

Loading thumbnail…

Final version - Globe

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.

PParth Shroff

86% match

Loading thumbnail…

Fork of FP: Map

This example visualizes a world map highlighting cricket-playing countries, coloring each nation differently while rendering the rest of the landmass and graticule grid. It uses D3 v7 with a `d3.geoEquirectangular` projection and `d3.geoPath` to draw geographic features, loading country boundaries from a TopoJSON world atlas file. The code filters countries based on a `cricketColors` mapping and appends SVG paths, while also demonstrating the addition of arbitrary GeoJSON geometries like points and polygons.

Vvinodreddysagam929@gmail.com

79% match

Loading thumbnail…

Fork of Fist Iteration of final project

This interactive globe visualizes the locations of submarine cables and stadiums using an orthographic projection. Users can drag to rotate the globe and scroll to zoom, with the projection updating in real time based on the current rotation and scale. The visualization is built with d3-geoOrthographic, d3-geoPath, and d3-geoGraticule, and fetches world country data from the visionscarto-world-atlas package. The underlying cable data originates from TeleGeography's Submarine Cable Map, though the dataset is noted as not up to date.

PParth Shroff

78% match

Loading thumbnail…

Fork of d3map

This interactive globe visualizes country-level data from a TopoJSON world atlas. Users can drag the globe horizontally to rotate it, and hovering over a country updates an information panel showing its name. Built with d3-geo projections and d3-drag, the visualization uses an orthographic projection rendered as SVG paths, with d3.geoPath generating the country outlines. The rotation logic is computed directly from mouse coordinates rather than using versor-based dragging.

Nnstafford

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

77% match

Loading thumbnail…

Fork of Cities on a Globe

This interactive globe displays all cities with populations over 100,000 as pink circles, with size proportional to population and hover tooltips showing names and counts. Users can drag to rotate the Earth and zoom to magnify regions, with low-resolution country boundaries shown during rotation and high-resolution shapes when idle. Built with D3 v4, it uses `d3.geoOrthographic()` for projection, `d3.geoPath` for rendering TopoJSON world atlas boundaries, and `d3.drag` and `d3.zoom` for interaction. Data comes from preprocessed Geonames city coordinates and populations.

Kkaalshouq

77% match