Skip to main content
SimilarExport ZIP
100%

ICE-5: Shapes of Data - Part II

✓ Published0🌍 Public
Mmanasanimmagadda13
Last edited Feb 28, 2022
Created on Feb 27, 2022

This example summarizes the top 100 Billboard songs of 2021. It displays a message containing the data size in kilobytes, row count, and column count using a preformatted text block. The visualization fetches a CSV file from a GitHub gist using the `d3.csv` method and processes the result with `d3.csvFormat`. The page also includes a Billboard logo image and styled headers using inline CSS, all rendered within a React framework with D3 v7.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE5

This visualization displays metadata about the Top 100 streamed songs dataset. It shows the file size in kilobytes, the total number of rows, and the number of columns, presented in large centered text. The page loads a CSV from a GitHub gist, and uses the D3.js library's `d3.csv` and `d3.csvFormat` functions to fetch and measure the data. A background SVG image of the top 100 songs is set via CSS, while the computed metadata is written to the page using JavaScript's DOM manipulation.

EEeshwarReddy
82% match
Loading thumbnail…

ICE5

This page displays metadata about the Top 100 streamed songs dataset, including its size in kilobytes, row count, and column count. The information is rendered as plain text in a preformatted element. The code uses D3 v7's `d3.csv` to load a remote CSV file and `d3.csvFormat` to calculate its size. The page is styled with CSS, featuring a background image of a Top 100 chart and centered headings.

EEeshwarReddy
82% match
Loading thumbnail…

ICE5

This example displays the metadata of the most browsed songs in 2021, including file size, row count, and column count, on a page with a decorative background. It loads a CSV dataset using `d3.csv` and computes the message text with `d3.csvFormat` and `Math.round`. The page uses D3 v7, vanilla JavaScript, and CSS to present the information, with the result inserted into a `<pre>` element via `textContent`.

DDeeraj Thakkilapati
82% match
Loading thumbnail…

ICE5

This example displays metadata about the Top 100 streamed songs dataset, including its size in kilobytes, row count, and column count, on a page with a background image of the dataset. The code loads the CSV using `d3.csv` and computes the metadata with `d3.csvFormat` to measure string length. It presents this information in a `<pre>` element while the page uses CSS for styling, including a background image loaded from a URL. The project uses D3 v7 and is built as a minimal HTML page with JavaScript.

EEeshwarReddy
81% 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
80% match
Loading thumbnail…

ICE5_NiharikaReddyAmanaganti

This example displays metadata about a Top Songs dataset, including its size in kilobytes, row count, and column count, over a yellow background with an embedded SVG image. The page loads a CSV file from a GitHub gist using D3 v7’s `d3.csv` method, then formats the data with `d3.csvFormat` to calculate the file size. The computed message is inserted into a `<pre>` element via `textContent`. Styling is handled entirely through CSS, which sets the background image, colors, and text alignment.

NNiharika Reddy Amanaganti
80% match
Loading thumbnail…

ICE-5

This visualization presents a dataset of the top 100 songs on Spotify, displaying its column and row counts on a black backdrop with a custom background image. The page uses D3 v7 to fetch the CSV file from a GitHub gist via the `d3.csv` method, then passes the parsed data to a custom JavaScript function called `datalength`. This function programmatically updates the text content of a `<pre>` element, summarizing the dataset's dimensions. The presentation relies on standard HTML elements styled with CSS, including hyperlinks for data access and centered headings for context.

KKovvuri Supraj
80% match
Loading thumbnail…

ICE-5

This example displays a summary of Spotify streaming data, reporting the file size in kilobytes, row count, and column count. It loads a CSV dataset from a GitHub gist using D3 v7’s `d3.csv` method and concatenates the statistics into a message displayed in a `<pre>` element. The page is styled with CSS, includes an embedded SVG image, and uses plain JavaScript within an HTML file, without a React build step.

Jjayavamsi
79% match