Skip to main content
SimilarExport ZIP
100%

ICE-5-csv-summary-vinil

✓ Published1🌍 Public
VVinil Karmilla
Last edited Mar 2, 2026
Created on Mar 2, 2026
Forked from HTML Starter

This example summarizes a CSV dataset of UNT coffee data using D3 v7. It fetches the raw CSV file and parses it with `d3.csvParse`, then displays the file size, row count, column count, and column names in a styled HTML card. A static embedded SVG icon of a coffee cup and book accompanies the summary, with inline paths and shapes as decorative elements. The code uses standard Fetch API, `text.length` for size calculation, and DOM manipulation to update the status and metric text fields.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-5

This example presents a summary of a CSV dataset, displaying file size, row and column counts, and a preview of the first five records in an HTML table. It also includes a static SVG graphic with basic shapes and text. The code uses D3.js version 7 to fetch and parse the CSV data via `d3.csv` and the browser’s `fetch` API for file size, populating the summary and table dynamically. The rendering relies on SVG elements defined in the markup and styled with CSS.

MMd Fahimul Kabir Chowdhury
84% match
Loading thumbnail…

ICE

This gallery example shows a dynamic summary of a CSV file, displaying key dataset statistics such as file size, row count, and column count in a visually styled box. The code uses D3.js v7 to load the CSV data via `d3.csv`, and the Fetch API to retrieve the file blob for size estimation. Computed values are injected into the HTML using the `innerHTML` property, with a hover effect and gradient styling applied via CSS. The design is a straightforward data-readout, presenting the three metrics as bold figures.

Vvk9395593@gmail.com
83% match
Loading thumbnail…

ice5

This example displays a summary of the contents of a CSV file, showing the file size, row count, and column count on a styled webpage with a blue gradient background. The page uses a D3.js v7 `d3.csv` promise to load and parse the data, while the Fetch API's `response.blob()` method is used to estimate file size. The retrieved statistics are then inserted into the DOM via `innerHTML` within a styled summary box that scales on hover.

Vvk9395593@gmail.com
82% match
Loading thumbnail…

ICE-5 Data Visualization-11540639

This example demonstrates loading and parsing a CSV dataset with D3.js, displaying a summary of the UNT International Student Information file, including size, row count, and column count, alongside a static SVG image. The code uses `d3.csv` to fetch the data from a GitHub gist and `d3.csvFormat` to calculate the dataset size in kilobytes. Styling is applied via embedded CSS, with the results rendered in a styled `pre` element and an image sourced from a GitHub repository. The page is built with plain HTML and JavaScript, using D3 v7.

SSravanthi Silla
82% match
Loading thumbnail…

ICE-5: The Shapes of Data

This example loads a CSV dataset on study focus logs via `fetch` and `d3.csvParse`, then displays summary statistics including file size, row count, and column count. It renders a small SVG visualization using D3 v7, where the first ten rows are represented as horizontal bars whose widths increase with row index, alongside row labels. The page is styled with basic HTML and CSS, and the data URL is displayed for reference.

Ppvvaishnavi93@gmail.com
81% match
Loading thumbnail…

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

This example demonstrates loading a remote CSV file of movie data using D3.js v7 and displaying summary statistics about the dataset. The webpage shows a static SVG image of a castle alongside a text container that reports the file size, row count, and column count. The code uses the `d3.csv` function to fetch and parse the CSV, then computes metrics using `d3.csvFormat` and accesses the parsed data's length and `columns` property. The SVG image is referenced from a GitHub raw URL and rendered with standard SVG elements.

Ssumitradevipolina
81% match
Loading thumbnail…

Fork of ICE-5: The Shapes of Data

This example, titled "ICE-5: The Shapes of Data," summarizes a CSV dataset by displaying its file size, row count, and column count. It fetches a remote CSV file using `fetch` and parses it with `d3.csvParse`, which returns a table object. The visualization renders a simple SVG bar chart where each bar’s width corresponds to its row index, using D3’s `select` and `join` APIs. The bars are drawn as rectangles, with row labels added as text elements, offering a basic overview of the dataset's structure.

Ppvvaishnavi93@gmail.com
81% match
Loading thumbnail…

ICE5 Cars dataset

This example presents a dataset summary for the ICE-5 cars CSV, displaying key statistics—file size, row count, and column count—as encoded horizontal bars within an SVG. D3 v7 fetches and parses the remote CSV with `d3.csvParse`, computes the metadata, and appends SVG `<rect>` and `<text>` elements to visualize the values, complemented by a simple decorative circle.

Aashishkommanaveni05@gmail.com
81% match