100%

Fork of HTML Starter

✓ Published0🌍 Public

Last edited Mar 2, 2026

Created on Mar 2, 2026

This example presents a summary of a CSV dataset loaded from a remote GitHub Gist. It displays the file size in kilobytes, the total row count, and the number of columns in a styled box on the page. The visualization uses D3 version 7's `d3.csvParse` method to parse the fetched text, then logs the same metrics to the browser console. A simple static SVG circle is included as a placeholder, while the primary output is text-based rather than a chart.

AI-generated description

ICE-5 Data Summary

A D3.js application that loads and parses CSV data from a remote Gist, displaying summary statistics about the dataset.

Features

Loads CSV data using D3's csvParse
Calculates file size, row count, and column count
Displays summary information on the webpage
Logs data metrics to the browser console

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This example summarizes a CSV file fetched from a GitHub gist, displaying its file size, row and column counts, and a full table of its contents. It also renders two static SVG illustrations: a fish and a house, which are drawn using inline SVG path, circle, polygon, and rect elements. The code uses D3 v7’s `csvParse` and `fetch` API to load and parse the data, then injects the summary and table directly into the HTML via `innerHTML`. Styling is handled by external CSS.

Mmadalahyndavi123@gmail.com

91% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates the data-loading process for a garden dataset, displaying summary statistics including file size in kilobytes, row count, and column count within a styled summary box. The visualization uses D3 v7’s `d3.csv` method to parse a CSV file fetched from a GitHub Gist, routed through a proxy URL to bypass CORS restrictions. A static SVG circle provides decorative context, while the script dynamically updates the DOM via `d3.select` and `textEl.html`. Error handling displays failure messages if the fetch or parsing encounters issues, and the console logs the first five rows for verification.

Ssaiabhishekmunnangi@gmail.com

90% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates loading a remote CSV dataset and displaying basic information about it in the browser. It uses D3 v7’s `d3.csv` to fetch and parse the data, then computes the file size in kilobytes, row count, and column count. The result is written to a `<pre>` element via the DOM API, while a separate SVG chart is embedded as an image. The page also includes static HTML and CSS for layout, with the SVG rendered from the `shape.svg` file.

Rranjithkmr598@gmail.com

90% match

Loading thumbnail…

Fork of HTML Starter

This example displays basic metadata about a CSV file, showing the file size, row count, and column count as plain text on a web page. It fetches the data from a remote GitHub Gist containing CSS named colors using `d3.csv`, then computes the formatted size with `d3.csvFormat` and reads row and column counts from the resulting array. The code uses D3 v6, with `d3.csv().then()` for asynchronous loading, and writes the summary into a preformatted element via `document.getElementById().textContent`.

AAmir

90% match

Loading thumbnail…

Fork of Fork of Fork of HTML Starter

This example demonstrates how to load and parse CSV data with D3.js, fetching a remote file using the Fetch API and `d3.csvParse`. It displays a live summary of the dataset, showing file size in kilobytes, row count, and column count on the page. The visualization includes a static SVG badge with an orange circle and text, while the page structure uses styled HTML panels. The code relies on D3 v7’s CSV parsing utilities and the browser’s native `fetch` method to retrieve the raw text from a GitHub Gist URL.

Ssravya7136@gmail.com

89% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates how to use D3.js v7 to fetch and parse a CSV file from a GitHub Gist, then display summary statistics about the data. The page shows the file size in kilobytes, the number of rows, and the number of columns using D3’s `d3.csvParse` and the Fetch API. A large `<pre>` element with CSS styling presents the output text. The code uses `fetchText` to retrieve the remote CSV, illustrating a minimal client-side data-loading workflow.

EErico103

89% match

Loading thumbnail…

Fork of HTML Starter

This visualization displays a summary of a CSV file, showing the file size in kilobytes, the number of rows, and the number of columns in a clean card layout. It fetches the `shapes_data.csv` file from a GitHub Gist using the `fetch` API, then uses `d3.csvParse` to parse the text into a tabular data structure. The code accesses the parsed data’s `length` property for row count and the `columns` array for column count, displaying these values as plain text. The example demonstrates a straightforward use of D3.js v7 for CSV parsing and basic DOM manipulation without any chart rendering.

Bbalaaswitha@gmail.com

89% match

Loading thumbnail…

Fork of HTML Starter

This example displays a summary of a CSV file containing CSS named colors. It fetches the data from a remote gist URL, then computes and presents the file size in kilobytes, the row count, and the column count within an HTML `<pre>` element. The code uses the D3.js version 6 library, specifically the `d3.csv` and `d3.csvFormat` functions, to handle data loading and formatting. The visualization is a simple text-based report of the dataset's structure, rendered on a plain HTML page.

Vvram80

89% match