Fist Iteration of final project

100%

Fist Iteration of final project

✓ Published2🌍 Public

Last edited Oct 25, 2024

Created on Oct 19, 2024

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.

AI-generated description

Made a Globe with paning and zooming. The data I used here is dummy data as I will have to add a coordinates column to my data. For visibility of the coordinate point to the map I derived the logic used in the following visualization(https://observablehq.com/@d3/testing-projection-visibility?collection=@d3/d3-geo)

MIT Licensed

Similar vizzes

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

85% match

Loading thumbnail…

Second Iteration of project

This interactive globe visualization displays geographic data points overlaid on a world map, allowing users to pan and zoom through drag and scroll interactions. Built with D3.js, it uses a geoOrthographic projection to render country boundaries from TopoJSON data and circles for coordinates, with a visibility tester streaming projection checks to display only points on the visible hemisphere. The code leverages D3’s drag and zoom behaviors to update rotation and scale state, enabling smooth navigation. The underlying dataset is dummy data with latitude and longitude columns, rendered as red circles for each unique coordinate pair.

PParth Shroff

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

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

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

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

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

77% match

Loading thumbnail…

Globe with panning & zooming

This example presents an interactive globe that users can pan and zoom, rendered using a D3 orthographic projection. Landmasses and internal country borders are drawn from the visionscarto-world-atlas TopoJSON dataset via `d3.geoOrthographic` and `geoPath`. The globe responds to drag interactions for rotation and mouse-wheel zoom events, adjusting the projection’s rotation and scale through `d3.drag` and `d3.zoom` handlers. A fitted initial view establishes the default scale, while the sphere, land, and country-mesh features are styled via CSS classes.

SShad Frigui

76% match