Fork of Loading and Parsing CSV Data

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing CSS Named Colors CSV data, displaying basic statistics about the dataset: its size in kilobytes, row count, and column count. The visualization uses d3.csv to fetch and parse the remote CSV file asynchronously via promises. The code also includes commented alternatives using fetch with async/await and d3.csvParse, highlighting different approaches to handling asynchronous data loading in D3 v5.

SSan

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV dataset containing CSS named colors using D3 v5. The visualization displays basic statistics about the loaded data—its file size, row count, and column count—in large text. The code primarily uses the `d3.csv` method with a promise to fetch and parse the remote CSV file. An alternative approach using the Fetch API with `async` and `await` is also shown in commented code, alongside a demonstration of the older "pyramid of doom" callback pattern.

TTung Pham

Fork of Loading and Parsing CSV Data

TTung Pham

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing CSS Named Colors data from a CSV file using D3 v5’s `d3.csv` method, which returns a promise. The visualization displays three summary statistics as large text: the file size in kilobytes, the number of data rows, and the number of columns. The code also includes commented alternatives using `fetch`, `async`/`await`, and `d3.csvParse`, plus a “pyramid of doom” nested fetch example, illustrating different approaches to asynchronous data loading. The computed values are shown in a `<pre>` element without any graphical chart.

FFonda Irena Santoso

Fork of Fork of Loading and Parsing CSV Data

This example demonstrates the process of loading and parsing CSV data by displaying the file size, row count, and column count of a CSS Named Colors dataset. Using d3.csv to fetch and parse the remote CSV file, the code then formats the summary statistics with d3.csvFormat and updates the page. The visualization also includes commented-out alternatives using the Fetch API with async/await and d3.csvParse, as well as a "pyramid of doom" pattern, to illustrate different approaches to asynchronous data loading.

Aadamacass

Fork of Loading and Parsing CSV Data

This example demonstrates the process of loading and parsing CSV data by displaying file size, row count, and column count for a dataset of CSS named colors. The visualization uses D3 v5’s `d3.csv` method to fetch the remote CSV file asynchronously, returning a promise that resolves with parsed data. The code then computes and renders these statistics as plain text using `d3.csvFormat` to measure data length. The example also includes commented-out alternatives using the Fetch API with `async`/`await` and `d3.csvParse`, alongside a "pyramid of doom" pattern for comparison.

RRolf Niggemann

Fork of Loading and Parsing CSV Data

This example displays summary statistics about a CSV dataset of CSS named colors, including file size in kilobytes, row count, and column count. The visualization is minimal—just text in a large font—but demonstrates three approaches to loading and parsing CSV data using D3 v5 and modern JavaScript. The active code uses `d3.csv` with a promise, while commented-out alternatives show `fetch` with `async`/`await` and `d3.csvParse`, as well as a nested promise structure often called the “pyramid of doom.” The data comes from a GitHub gist of named colors.

Ssimontoblad

Fork of Loading and Parsing CSV Data

This example displays basic statistics about a CSV dataset containing CSS named colors, showing the file size in kilobytes, the number of rows, and the number of columns in large text. It loads the data from a GitHub gist using d3.csv, which returns a promise, then formats the computed metrics with d3.csvFormat and string concatenation. The code also includes commented-out alternatives using the Fetch API with async/await and d3.csvParse, as well as a nested promise “pyramid of doom” pattern for comparison. The visualization itself is minimal, relying solely on a styled pre element to render the text output.

EEverton Rocha