ICE5

100%

✓ Published0🌍 Public

Last edited Oct 5, 2025

Created on Oct 5, 2025

This example visualizes university computer science programs, plotting CS ranking against tuition costs. Each circle represents a university, colored by state, with hover tooltips revealing details like city, ranking, tuition, and available programs. The page also displays a technical summary of the source CSV file, including its size, row count, and column count. The visualization uses D3.js v7, specifically `d3.csv`, `d3.scaleLinear`, `d3.scaleOrdinal` with `d3.schemeSet2`, and `d3.axisBottom` and `d3.axisLeft` to render the SVG scatterplot.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE5

This visualization displays the average cost of undergraduate education by state in the USA, presenting dataset metadata such as file size, row count, and column count. Built with D3 v7, it loads a CSV file via `d3.csv` and uses `d3.csvFormat` to calculate metadata, then updates the page’s text content through the DOM. The design incorporates a custom light pink background with a university-themed SVG image, while the code is written as a plain HTML and CSS page with no React components despite the framework tag.

HHARSHA BUDDANA

83% match

Loading thumbnail…

ICE5

This example displays the metadata of a university dataset loaded from a CSV file. Using D3 v7, the code fetches the data with `d3.csv` and computes the file size in kilobytes via `d3.csvFormat`, along with the number of rows and columns. The resulting information is rendered as plain text in a `<pre>` element, while a CSS background image of a credit card and a green accent color style the page. The visualization shows a minimal, text-based summary rather than a graphical chart.

Rradhadevarapu

81% match

Loading thumbnail…

ICE 5

This example displays a dataset summary alongside a static SVG composition of colored circles. It loads a hosted CSV file of global economy data and computes basic statistics for numeric columns, including row count, min, max, and mean. The visualization renders a 3-by-10 grid of circles using D3 v7’s selection and data-joining methods, applying a Tableau color scheme and decorative opacity. The code uses `d3.csv` for parsing and `d3.min`, `d3.max`, and `d3.mean` for summary calculations, with all output drawn as SVG elements.

CCharith Kapuluru

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

78% match

Loading thumbnail…

ICE5

This D3.js visualization provides an overview of a teams dataset loaded from a GitHub Gist, displaying dataset metrics (characters, columns, rows), a tabular preview of the first ten rows, and SVG circle swatches colored by each team’s hex code. The visualization uses `d3.csv` to parse the CSV and `d3.select` and `.append` to build both an HTML table and the circular color cards. The interface is styled with custom CSS, and the banner uses an SVG linear gradient fill.

SSainathreddypotu@gmail.com

77% match

Loading thumbnail…

ICE-5 Data Visualization-11540639

This example demonstrates loading and parsing a CSV dataset with D3.js, displaying a summary of the UNT International Student Information file, including size, row count, and column count, alongside a static SVG image. The code uses `d3.csv` to fetch the data from a GitHub gist and `d3.csvFormat` to calculate the dataset size in kilobytes. Styling is applied via embedded CSS, with the results rendered in a styled `pre` element and an image sourced from a GitHub repository. The page is built with plain HTML and JavaScript, using D3 v7.

SSravanthi Silla

76% match

Loading thumbnail…

ICE 5:Loading and Parsing csv data with D3.js

This example visualizes university student retention data by displaying a large, green decorative SVG emblem of a university logo at the center of the page. The code loads and parses external CSV data using D3.js version 5's `d3.csv` function, though the parsed data is not directly rendered in the visualization. The page uses standard HTML and CSS for layout, with the SVG graphic embedded directly in the markup and styled with margin properties to position it. The static SVG paths are pre-rendered from Adobe Illustrator, and the example focuses on demonstrating the data-loading workflow within a React-compatible setup.

SShreeti Upreti

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

76% match