ICE-5 The Shapes of Data

100%

ICE-5 The Shapes of Data

• Draft2🔗 Unlisted

Last edited Mar 7, 2026

Created on Feb 25, 2026

This example visualizes the shape and size of e-scooter usage data from Denver, Colorado. Ascending and descending bar charts on either side frame a text summary that reports the dataset’s file size, row count, and column count. The bars are drawn using D3 v7’s `d3.select` and `append("path")` methods with manually constructed SVG path strings, while `d3.csv` fetches the remote CSV and `d3.csvFormat` calculates its byte length. The summary is displayed inside an HTML `<pre>` element, and the layout uses flexbox for centering.

AI-generated description

MIT Licensed

Similar vizzes

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

83% 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

82% 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

82% match

Loading thumbnail…

ICE-5 The shapes of data

This example, "ICE-5 The shapes of data," visualizes a dataset of 50 U.S. tourist places through an interactive D3.js dashboard. It combines a sortable HTML table with a summary and analysis section, alongside a custom SVG beach scene that uses D3 v7 to draw geometric shapes—a blue water rectangle, a red sun, and stylized people—to evoke the dataset’s themes. The visualization transforms tabular CSV data into a playful, narrative-driven SVG illustration, demonstrating how D3 can extend beyond charts to create thematic, data-inspired graphics.

Ssridhardubala106@gmail.com

80% 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

80% 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

80% match

Loading thumbnail…

ICE-5 The Shapes of Data

This example displays metadata about a Texas house rentals dataset, including its size in kilobytes, row count, and column count. It reads the data from a CSV file hosted on GitHub using D3 v7's `d3.csv` method, then calculates and presents the file size with `d3.csvFormat`. The page presents this information in a styled HTML document alongside a static SVG illustration of a house and a link to the raw dataset.

Aanushaanumula

80% match

Loading thumbnail…

f ICE-5: The Shapes of Data

A dynamic bar chart visualizes screen hours per student from a remote CSV file, alongside summary statistics for rows, columns, numeric columns, and file size. The visualization loads data via `fetch`, parses it with `d3.csvParse` and `d3.autoType`, and renders an SVG chart using `d3.scaleBand` and `d3.scaleLinear` for axes. Tooltips display student names and hours via SVG `title` elements. The example runs within a React framework, though chart construction relies on D3 v7 APIs.

Eeeshani.boyapati@gmail.com

79% match