Skip to main content
SimilarExport ZIP
100%

Scientific Data Visualization ICE5

✓ Published0🌍 Public
SSravyaAnnadi
Last edited Jun 21, 2022
Created on Jun 21, 2022

This example displays a simple house illustration, with a pink roof, a gray door and window, over a summary of a loaded dataset. The page combines an inline SVG graphic with a text output that reports the dataset’s size in kilobytes, row count, and column count. The code uses D3.js version 7 to fetch a CSV file from a GitHub gist, parse it with `d3.csv`, and compute the formatted length via `d3.csvFormat`. The visualization is built with React, rendering the SVG and the JavaScript-generated message.

AI-generated description

A basic html code [HTML] Resources: https://en.wikipedia.org/wiki/HTML) page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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

Scientific Data Visualization ICE5

This example displays metadata about a dataset loaded from a CSV file, showing its size, row count, and column count. The page uses d3.csv to fetch and parse the data, then d3.csvFormat to calculate the file size in kilobytes. A static SVG illustration depicts a geometric mountain scene with a flag and building. The visualization combines a simple React-free HTML document with inline CSS styling and D3.js v7 for data loading and summary generation.

SSravyaAnnadi
87% match
Loading thumbnail…

ICE5

This example displays a static SVG scene of a house, tree, sun, and surrounding landscape, paired with a summary of a medical insurance dataset loaded from a GitHub-hosted CSV file. The page uses D3 v7’s `d3.csv` to fetch and parse the data, then reports the dataset’s size in kilobytes, row count, and column count in both the console and a styled `<pre>` container. The visualization itself is a hand-coded SVG illustration embedded via an `<img>` tag, while the page layout and typography are styled with CSS gradients and custom fonts.

Jjgaur96@gmail.com
85% match
Loading thumbnail…

ICE-5

This example displays a large red and yellow message about cricket data alongside a static SVG house image. Using d3.csv, it fetches a remote CSV file, calculates its size in kilobytes with d3.csvFormat, and counts its rows and columns. The resulting summary appears as plain text in a pre element, styled by CSS. The visualization emphasizes the data-loading process over any graphical mapping, serving as a minimal demonstration of D3 version 7 in a React-hosted HTML page.

SSweetierams
85% match
Loading thumbnail…

Fork of Data Visualization ICE5

This example displays a web page titled “ICE 5” with a large heading, a summary message about a CSV dataset, and two static SVG images (a house and a human) positioned side-by-side. It loads a CSV file from a GitHub gist using D3 v7’s `d3.csv` method, then calculates and displays the dataset’s size in kilobytes, row count, and column count in a styled `<pre>` element. The page layout is built with custom CSS, including flexbox for the image row and colored backgrounds for text elements. React is listed as the framework, though the visible code uses plain HTML and JavaScript with D3.

RRevanthGrreddy
85% match
Loading thumbnail…

ICE-5 Scientific Data Visualization

This example displays a simple web page titled "ICE-5 Scientific Data Visualization." It loads a CSV file from a GitHub gist using the D3.js library's `d3.csv` function, then shows the file's size, row count, and column count in a `<pre>` element. Below that, it displays an SVG star image using an `<img>` tag. The page’s styling is set via CSS in `index.css`, and the code runs in a React framework with D3 v7.

Ddivyageethanjali
84% match
Loading thumbnail…

ICE5

This example displays a static SVG illustration of a whimsical landscape, including a house, sun, and decorative stars, with a header that confirms the loading of phrase data. It uses D3 v7 to fetch and parse a CSV file from a GitHub gist, then calculates and displays the data’s size, row count, and column count in a styled `<pre>` element. The visualization combines hardcoded SVG shapes with dynamic data summary text, showing how D3’s `d3.csv` and `d3.csvFormat` can be used to introspect dataset properties while the rendering relies on React’s DOM and SVG elements.

RRakesh Kumar Chekuri
84% 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
84% match