Skip to main content
SimilarExport ZIP
100%

ICE-5

✓ Published0🌍 Public
BBala Sai Krishna
Last edited Mar 2, 2023
Created on Mar 2, 2023
Forked from HTML Starter

This example presents a summary of a dataset containing blood pressure and heart-related measurements, highlighting its file size and row count. The visualization uses a background image and displays the dataset information in a web page. Built with React and D3 v7, the code employs `d3.csv` to fetch and parse the dataset from a GitHub URL, and `d3.csvFormat` to calculate the file size. The SVG background and the page layout are styled using CSS, and the final output is rendered using both SVG and WebGL.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 5

This example displays a simple text-based summary of a nutrition dataset, presenting the file size, row count, and column count in a styled HTML page. It uses D3 v5’s `d3.csv` to fetch data from a GitHub-hosted CSV file, then computes the size with `d3.csvFormat(data).length`, and writes the output into a `<pre>` element. The page also includes a static SVG image and relies on basic CSS for layout and typography, with React as the underlying framework.

Ssainitish1999
86% 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

This example displays summary statistics about a film dataset loaded from a GitHub-hosted CSV file, showing the data’s size in kilobytes, row count, and column count. The page uses D3.js v7 to fetch and parse the CSV with `d3.csv`, formats the results via `d3.csvFormat`, and updates the text content of an HTML `<pre>` element. A static SVG background image is embedded as a data URI, while CSS styles apply layout and heading colors. The visualization focuses purely on textual data metrics rather than graphical charts.

BBhanuMotupalli
84% match
Loading thumbnail…

ICE-5

This visualization displays the contents of a CSV dataset using D3’s `d3.csv` and `d3.csvFormat` methods to summarize its size, row count, and column count. The example renders the result in a styled HTML `<pre>` element with React-compatible ES6 syntax. It also embeds an SVG image, using D3 v7 within a React framework to provide a gallery-based data overview.

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

ICE-5

This visualization displays a summary of a dataset, reporting the number of rows, columns, and approximate file size in kilobytes. The page loads an external CSV file and uses the D3.js library’s `d3.csv` function with the `d3.autoType` parser to automatically infer data types. After parsing, the code calculates the formatted data length and row count to construct a text message, which is rendered in a `<pre>` element using JavaScript's `getElementById` and `textContent`. The visualization also includes a static SVG image and links to the source data.

Nnikhilagopi
83% match
Loading thumbnail…

ICE-5 DV

This example demonstrates the basic workflow of loading and inspecting a CSV dataset with D3.js. It fetches student performance data from a GitHub-hosted CSV file using `d3.csv`, then displays the file size in kilobytes, the number of rows, and the number of columns in a prominent HTML `<pre>` element. The visualization also includes a static SVG illustration composed of paths, ellipses, and lines, rendered with a darken blend mode and Gaussian blur filters. The page is built with plain HTML, CSS, and D3 v7, without React or additional frameworks.

RRupeshGandham
83% match
Loading thumbnail…

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

This example demonstrates how to load and parse a CSV dataset using D3.js v7, displaying the file size, row count, and column count in a large text element. The visualization includes two inline SVGs: a decorative illustration and a chart-like graphic with rectangles, lines, and drop shadows. The code uses `d3.csv()` to fetch data from a GitHub Gist URL and `d3.csvFormat()` to compute the raw data size in kilobytes. The page relies on React for structure and standard CSS for styling.

CChaitanya Galla
83% match