Skip to main content
SimilarExport ZIP
100%

ICE 5

✓ Published0🌍 Public
CCharith Kapuluru
Last edited Oct 6, 2025
Created on Oct 6, 2025
Forked from D3 Starter

This example displays a dataset summary alongside a static SVG composition of colored circles. It loads a hosted CSV file of global economy data and computes basic statistics for numeric columns, including row count, min, max, and mean. The visualization renders a 3-by-10 grid of circles using D3 v7’s selection and data-joining methods, applying a Tableau color scheme and decorative opacity. The code uses `d3.csv` for parsing and `d3.min`, `d3.max`, and `d3.mean` for summary calculations, with all output drawn as SVG elements.

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
86% match
Loading thumbnail…

ICE-5

The visualization displays summary statistics about a CSS colors dataset, presenting the data size, row count, and column count in a text block alongside a static SVG image. It loads a CSV file from a GitHub gist using `d3.csv`, then uses `d3.csvFormat` to calculate the file size, and accesses the parsed data’s `length` and `columns` properties to populate a `<pre>` element. The page is styled with basic HTML and CSS, relying on D3 v7 for data fetching and formatting.

SSaiSree0122
85% 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
85% match
Loading thumbnail…

ICE5

This dashboard summarizes a CSV dataset loaded from a public GitHub Gist, displaying high-level metrics such as total character count, column count, and row count. It then renders a preview table of the first ten rows using D3 v7’s `d3.csv` and `d3.select` APIs, building an SVG banner and styled HTML table. The interface dynamically fetches data with the Fetch API and presents it with custom CSS for metrics, panels, and a green-themed header. All rendering occurs in SVG and HTML, with no interactive filtering or charts beyond the static overview.

SSainathreddypotu@gmail.com
85% match
Loading thumbnail…

ICE-5: Data visualization

This example demonstrates a web page that displays the file size, row count, and column count of a CSV dataset, alongside a static SVG graphic titled "star.svg." The page uses D3.js version 7.3 to fetch the remote CSV file via `d3.csv`, then formats and injects the summary statistics into a styled `<pre>` element. The rendering is plain HTML and CSS, with a React framework noted in metadata but not used in the visible markup. The SVG contains simple geometric shapes with gray and blue fills.

Ssowmyanagula@my.unt.edu
85% match
Loading thumbnail…

ICE-5: The Shapes of Data

This example displays summary statistics about a United HealthCare stock dataset, including file size, row count, and column count, in a large text overlay on a blue background. It uses D3.js (v7) to fetch the CSV data from a GitHub gist via `d3.csv`, then processes the formatted output with `d3.csvFormat` to calculate the data size in kilobytes. The visualization also includes a simple SVG graphic featuring a stylized mountain and circle shape, rendered with static SVG elements and colored fills.

SShivaKarpe
85% match
Loading thumbnail…

ICE-5

This example combines a manually drawn SVG scene with a data-loading demonstration using D3 v7. The static illustration features a gradient sky, dark red panels, and black circles, while a heading and a preformatted text block display metadata about the loaded file. The code calls `d3.csv()` to fetch a remote CSV file, then uses `d3.csvFormat()` to compute its size, row count, and column count for display.

AAishwarya Manjunath
84% 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
84% match