f ICE-5: The Shapes of Data

100%

f ICE-5: The Shapes of Data

✓ Published0🌍 Public

Last edited Feb 28, 2026

Created on Feb 28, 2026

Forked from Fork of 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.

AI-generated description

MIT Licensed

Similar vizzes

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

84% 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…

ICE5

This example shows an interactive bar chart of letter frequencies, where clicking a bar highlights it and dims the others, with a title reading "Data Visualization" above the plot. Built with React and D3 v7, it uses `d3.scaleBand` and `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for gridlines and labels, and a `ResizeObserver` to adapt the SVG to its container. Data loads from a local CSV file via `d3.csv`, and bar styling transitions smoothly on hover and selection.

Ssrinathkarumuru@my.unt.edu

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

This example displays metadata about a student dataset, presenting file size, row count, and column count in a large, bold text overlay. The visualization uses D3.js v7 to fetch and parse a CSV file from a GitHub Gist via `d3.csv`, then formats the data with `d3.csvFormat` to calculate its size in kilobytes. The page’s background features a student-themed SVG image, styled with CSS. Static HTML text and links provide context, while the JavaScript dynamically updates a `<pre>` element with the computed statistics.

KKiran Jyothi Bodduluri-11604571

80% match

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This bar chart displays student statistics by area for the top 15 entries, using horizontal bars where area names appear on the y-axis and numeric stats on the x-axis. The visualization is built with React and D3 v5, using `d3.csv` to load remote data and `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis. SVG rectangles represent the marks, with grid lines and tick labels generated via `d3.ticks()`. Data is pulled from a GitHub gist CSV, and the chart renders within a fixed 960x500 viewport with defined margins.

SSaiipriiya

79% match

Loading thumbnail…

ICE 6: Scientific Data Visualization

This example visualizes the total marks of 17 students in a semester as a horizontal bar chart. The SVG rendering uses React and D3 v5, with data loaded from a CSV file via `d3.csv`. Scales include `scaleBand` for student names on the y-axis and `scaleLinear` for marks on the x-axis, while `xScale.ticks()` generates gridlines, and colored rectangles represent each student’s score.

Nnagarajuobbineni

79% match

Loading thumbnail…

Fork of ICE-5: The Shapes of Data

Built with D3 v7 and React, this example presents an interactive bar chart that displays labeled and measured fields from a dataset. Users select which data columns to visualize through dropdown menus and can toggle descending sort order. The chart renders as SVG with hover tooltips showing values, while summary cards update to reflect aggregate statistics. The fork is based on an original work by ICE-5.

Eeeshani.boyapati@gmail.com

79% match