ICE5

100%

✓ Published0🌍 Public

Last edited Mar 2, 2023

Created on Mar 1, 2023

This interactive globe visualization displays global earthquake data loaded from a CSV file, with pan and zoom capabilities. The page shows metadata about the dataset, including file size, row count, and column count, computed using `d3.csv` and `d3.csvFormat`. Built with d3.v7, the visualization incorporates geographic shapes from TOPOJSON World Atlas and uses `d3.geoPath` for rendering, drawing inspiration from orthographic projection examples like Versor Dragging. The background features a decorative SVG image, with the globe centered on a dark, space-themed interface.

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…

ICE5

This visualization displays earthquake regions using a React and D3.js framework. It loads earthquake data from a remote CSV file and uses D3’s `d3.csv` method to parse the dataset. The page provides a link to the source data and renders the geographic information through an embedded SVG reference. The visualization abstracts the SVG and group containers using a `VizContainer` component that follows the margin convention, making the layout modular and customizable.

Ppethavenu

85% match

Loading thumbnail…

ICE-5

This example displays basic metadata about an earthquake dataset. The page presents a header, an image, and textual information about the data's size, row count, and column count. The visualization uses D3 version 7.8.2 to load a CSV file from a GitHub gist using the `d3.csv` and `d3.autoType` functions. It then calculates the file size in kilobytes and determines the number of rows and columns before displaying this information in a `<pre>` element. The page also includes links to the VizHub project and the raw CSV data source.

DDineshKantumutchu

82% match

Loading thumbnail…

ICE_5_ASSIGNMENT

This example presents an interactive world map rendered with SVG, allowing users to zoom and pan across a natural Earth projection. It shows country boundaries with hover highlighting, using a dark blue ocean and light green landmasses. The map is built with D3 v7 and TopoJSON, using `d3.geoPath` and `geoNaturalEarth1` for geographic projection. A CSV file from Walmart is loaded via `d3.csv` to display file size, row, and column counts in a text overlay. The zoom behavior is implemented with D3's `zoom` function.

Ppemmasaniprudhvinadh

82% match

Loading thumbnail…

ICE5

This example displays a webpage that presents the metadata of a GDP dataset, including its file size, row count, and column count, within a large text overlay on a stylized background. The page uses the D3.js library (version 7) to load a CSV file from a remote URL via `d3.csv` and compute the dataset’s properties with `d3.csvFormat`. The background is set using a custom SVG image via CSS, while HTML headings and a link provide context and access to the underlying data, all rendered in a React-independent, vanilla JavaScript setup.

PPoojaThandra

80% match

Loading thumbnail…

ICE 5

This visualization presents a blank SVG canvas with a light gray background, overlaid with an image pattern defined in the SVG defs. The main interactive element is a text display showing metadata about a dataset loaded from a CSV file, including its size, row count, and column count. The code uses D3 v5 to fetch and parse the CSV data from a GitHub gist URL, then formats and displays this information in a styled `<pre>` element. The rendering approach combines static SVG markup with dynamic data-driven text output.

TTekmal-Bhavana

79% match

Loading thumbnail…

ICE-5

This example loads a CSV file containing earthquake data for 2021 and displays basic summary statistics about the dataset, including its size in kilobytes, row count, and column count. The page also shows a decorative dandelion SVG image and provides links to the original VizHub project and the raw CSV data. Built with D3 v7, it uses `d3.csv` with `d3.autoType` to parse the remote data and then formats the result with `d3.csvFormat` to calculate the file size, writing the output into an HTML `<pre>` element.

CChathurya

79% match

Loading thumbnail…

Fork of Globe Zoom - ICE_5

This interactive visualization, built with React and D3.js (v3), presents a zoomable globe and map interface for exploring geospatial datasets. It displays geographic features such as country landmasses, graticules, and sphere outlines, alongside scatterplot data points representing race-related metrics. Users can switch between orthographic globe, Winkel triple, and Mercator projections, with smooth animated transitions between them. The visualization uses `d3.geo.path` for map rendering and `d3.behavior.zoom` for interactive pan and zoom controls. Data is loaded from CSV files, with a striped pattern mask indicating missing data regions.

RRahulChaitu999

79% match

Loading thumbnail…

ICE 5

This example loads the Disney movies dataset from a remote CSV file using D3 v5’s `d3.csv` and `d3.csvFormat` APIs, then displays basic metadata about the file on the page. The visualization shows a static SVG line drawing of a geometric shape with colored ellipses and grid-like lines, while the text area below reports the dataset’s size in kilobytes, row count, and column count. The SVG is hand-coded in HTML, and the data summary is rendered into a `<pre>` element. No interactive or data-driven visual encoding is present; the graphic is independent of the loaded dataset.

Bbrindapotluri

78% match