Skip to main content
SimilarExport ZIP
100%

ICE 5

✓ Published2🌍 Public
Nnavyasrimeka9@gmail.com
Last edited Mar 9, 2023
Created on Mar 9, 2023
Forked from D3 Starter

This example displays a company sales dataset loaded from a CSV file via D3’s `d3.csv` method, reporting the file’s size, row count, and column count in a styled HTML element. Beneath this, a confetti animation runs on a canvas using the JSConfetti library, triggered by calling `jsConfetti.addConfetti()`. The page also embeds a Fiat 500 image and a YouTube tutorial link, with overall styling set through CSS. The code uses D3 v7 for data handling and formats the output using `d3.csvFormat` to calculate byte length.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE 5

This visualization presents a utility for examining a company sales dataset pulled from a Kaggle gist. The page loads the CSV data via `d3.csv` and displays basic file statistics, including its size in kilobytes, row count, and column count, within a designated `<pre>` element. The interface is styled with black and brown text on a gray background and features an embedded image of a Fiat 500. Upon loading, the JavaScript triggers a confetti animation on a Canvas element using the `js-confetti` library, creating a celebratory effect. The example demonstrates a straightforward D3 data-loading and metadata-reporting workflow.

Cchandanagandla
86% match
Loading thumbnail…

ICE 5_shanmukha

This example displays a celebratory confetti animation on a canvas element, triggered after a CSV dataset is loaded and summarized. The visualization first fetches the external CSV file using D3 v7, calculates the data size in kilobytes, and reports the row and column counts as text in the page. It then uses the JSConfetti library to fire a burst of confetti on the canvas. The page also includes a static image and a link to the raw dataset, while the code explicitly relies on `d3.csv` for data parsing and the `js-confetti` browser API for the animation effect.

Sshanmukhadatta4040@gmail.com
85% match
Loading thumbnail…

ICE 5

This example displays a text-based summary of a CSV dataset, showing the file size in kilobytes, row count, and column count. It loads data from a GitHub-hosted CSV file using `d3.csv`, then computes the formatted output size with `d3.csvFormat` and reads `data.length` and `data.columns.length` to report the statistics. The page uses a custom background image from a GitHub gist, styled with CSS, and outputs the results into a `<pre>` element via `document.getElementById`. The code also links to the original Kaggle company sales dataset.

Nnavyasrimeka9@gmail.com
83% match
Loading thumbnail…

ICE5

This example displays metadata about a sales department dataset, showing the file size in kilobytes, row count, and column count as plain text on a page. The data is fetched from a CSV file using the `d3.csv` method, and the output is formatted with `d3.csvFormat` to calculate the file size. The page presents the information within a pre-styled container, alongside headers and a link to the source dataset. The visualization relies on the D3.js library, version 7.3.0, loaded via a CDN.

TTejaswicmandava
82% match
Loading thumbnail…

Data Visualization ICE5

This example displays a web page titled “This is ICE 5” that visually summarizes a CSV dataset by presenting its size, row count, and column count inside a large text block. The page also shows two static SVG images of a house and a human. It loads data from a remote GitHub gist using D3 v7’s `d3.csv` method, then computes the file size in kilobytes from `d3.csvFormat(data).length` and displays the metrics via `document.getElementById` with a template literal.

VVenkata Sai Preetham
81% match
Loading thumbnail…

ICE5

This example displays metadata from a store dataset, including row count, column count, and file size, presented as text on a styled HTML page with a background image. It fetches a CSV file from a GitHub Gist using D3’s `d3.csv` function, then formats the data with `d3.csvFormat` and calculates its size in kilobytes. The visualization is rendered with plain HTML elements, including headings and a `<pre>` block, styled by a linked CSS file, and uses React only as a framework reference. The page relies on D3 v7 and JavaScript for data retrieval and message assembly.

SSravaniPosina
81% match
Loading thumbnail…

ICE-5

This example displays a large dataset, logging the file size, row count, and column count of ICE-5 data loaded from a CSV file via `d3.csvParse`. The page uses D3 version 7.3.0 and jQuery-CSV to fetch and parse the data, with the body set to a large 6em font size. The code currently only outputs console messages, showing the data’s scale in kilobytes, rows, and columns, while the `index.js` sets the text to “hello.” The visualization itself is not yet implemented, focusing instead on data loading and verification.

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