Earthquakes

100%

✓ Published0🌍 Public

Last edited Sep 27, 2021

Created on Sep 5, 2021

Forked from Loading and Parsing CSV Data

This example loads and parses a CSV file of notable earthquakes from 1900 to 1999, then displays basic file statistics—size in kilobytes, row count, and column count—in a large text element. The visualization emphasizes data loading and parsing over graphical rendering, using `d3.csv` to fetch and parse the remote dataset from a GitHub gist, and `d3.csvFormat` to calculate the raw data size. The code also demonstrates an alternative `fetch`-based approach with `d3.csvParse`, though the active path uses the simpler `d3.csv` promise interface.

AI-generated description

A program that loads and parses some CSV data: Earthquakes.

Select set of notable earthquakes from 1900 to 1999.

References:

Original data sorce: World Almanac and Book of Facts: 2011.

Link: https://rdrr.io/github/OpenIntroStat/openintro/man/earthquakes.html

Variables:

year: Year the earthquake took place.
month: Month the earthquake took place.
day: Day the earthquake took place
richter: Magnitude of earthquake using the Richter Scale.
area: City or geographic location of earthquakes.
region: Country or countries if the earthquake occurred on a border.
deaths: Approximate number of deaths caused by earthquake

MIT Licensed

Similar vizzes

Loading thumbnail…

Loading data - earthquakes.csv

This example demonstrates how to load and parse a CSV file containing significant earthquake data from 1965 onward, sourced from Kaggle. It displays the dataset’s file size in kilobytes, row count, and column count in large text. The code uses `d3.csv` to fetch and parse the remote CSV URL, then computes the formatted output length with `d3.csvFormat`. It also includes commented alternatives using the Fetch API with `async`/`await` and `d3.csvParse`.

VVarun Eranki

85% match

Loading thumbnail…

Parsing CSV Data with D3

This visualization demonstrates how to parse CSV data using D3.js by fetching a remote file and displaying summary statistics. The page shows the dataset’s row count, column count, and file size in kilobytes within a large text element. It uses D3’s `d3.csv()` function to load and parse the CSV from a GitHub gist, then formats the data with `d3.csvFormat()` to calculate its size. The example also includes commented-out code using `fetch()`, `async`/`await`, and `d3.csvParse()` as an alternative parsing approach.

TTetiana Humeniuk

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

77% match

Loading thumbnail…

Loading and parsing CSV data

This example demonstrates loading a remote CSV file and parsing it with D3.js, displaying basic dataset statistics as large text. It uses `d3.csv` to fetch and parse the data from a GitHub Gist, then reports the approximate size of the formatted output in kilobytes, the number of rows, and the number of columns. The page also includes commented-out code showing an alternative approach using the `fetch` API with `async`/`await` and `d3.csvParse` for manual text parsing, but the active path relies on D3's built-in CSV handling.

Aadante111

75% match

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v5, displaying file size, row count, and column count in a large pre-formatted text element. The code uses `d3.csv()` to fetch and parse the dataset from a GitHub-hosted CSV file containing NYC social media usage data, then formats the statistics with `d3.csvFormat()` to calculate kilobyte size. An alternative commented-out approach uses the Fetch API with `async`/`await` and `d3.csvParse()` for manual parsing. The example concisely shows the core workflow of retrieving and inspecting tabular data in a browser environment.

KKarenNg

75% match

Loading thumbnail…

Loading and Parsing CSV Data

KKarenNg

75% match

Loading thumbnail…

Fork of ICE-5: Loading and Parsing CSV Data with D3.js

This example demonstrates loading and parsing CSV data with D3.js, displaying a message about the dataset's size and structure. The page uses D3.v7's `d3.csv` function to fetch an external CSV file of earthquake data, then computes and reports the file size in kilobytes, the number of rows, and the number of columns. The results appear in a large `<pre>` element, styled with CSS. The page also includes an inline SVG and a reference to an external image, though the core interactive component is the asynchronous data loading and formatting via `d3.csvFormat`.

YYbg99g

75% match

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse remote CSV data, displaying basic dataset statistics as plain text. It fetches a raw CSV file from a GitHub gist using the Fetch API, then parses the text with `d3.csvParse` to produce an array of objects and column metadata. The visualization shows the file size in kilobytes, row count, and column count in a simple `<pre>` element. The code uses D3 v7’s parsing utilities alongside native JavaScript async functions, without any graphical rendering.

GGimmi45

75% match