Untitled

100%

✓ Published0🌍 Public

Last edited Feb 27, 2022

Created on Feb 27, 2022

Forked from Untitled

This example demonstrates how to load a CSV file into a web page using D3.js and display basic metadata about the dataset. It fetches the Oscar-winning female actors CSV from a GitHub Gist via `d3.csv` and formats the data with `d3.csvFormat` to calculate its size in kilobytes. The page then shows the number of rows and columns, along with the file size, in a styled HTML `<pre>` element. The visualization uses D3 v5 within a plain HTML/JavaScript setup, with CSS for layout and emphasis.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Untitled

This example demonstrates loading and parsing a CSV file using D3.js, displaying the file size in kilobytes, row count, and column count in a styled HTML page. The visualization includes a decorative cityscape SVG illustration. The code uses `d3.csv` to fetch data from a GitHub gist and `d3.csvFormat` to calculate the data size. The page is built with HTML and CSS, featuring a highlighted heading and a large message container for the parsed data summary.

DDivyaVellanki

88% match

Loading thumbnail…

Untitled

This example displays a concise summary of a CSV dataset loaded from a remote URL, showing the file size in kilobytes, the number of rows, and the number of columns. Using D3.js v5, it calls `d3.csv` to fetch and parse the data, then uses `d3.csvFormat` and `data.columns` to compute the statistics, displaying them in a large HTML `<pre>` element. The visualization demonstrates asynchronous data loading with promises, highlighting the simplicity of the `d3.csv` API over raw `fetch` and `await` alternatives.

Cchar0496

87% match

Loading thumbnail…

Document

This example displays metadata about a CSV dataset of Oscar-nominated and winning directors, showing the file size, row count, and column count. It retrieves the data from a GitHub-hosted CSV file using the `d3.csv` function, formats the metadata with `d3.csvFormat`, and computes the file size in kilobytes. The information is rendered as text within a `<pre>` element. The page’s styling, including an aqua background and an Oscar statuette image, is defined in a separate CSS file, while the visualization relies on D3 v7 and JavaScript within a basic HTML structure.

DDeepa-Murugesan

87% match

Loading thumbnail…

Untitled

This example displays basic dataset summaries for a CSV file loaded from a GitHub gist, showing file size in kilobytes, row count, and column count in a pre-formatted text container. The page also includes a static SVG diagram and a heading. The code uses D3 v7’s `d3.csv` to fetch and parse the remote data, then applies `d3.csvFormat` to calculate the formatted file size. Results are written to the DOM via `document.getElementById`, and the HTML page links to an external stylesheet named `newstyle.css`.

SSnigdha6698

85% match

Loading thumbnail…

Untitled

This example demonstrates loading and parsing a CSV file from a GitHub Gist URL using D3 v5’s `d3.csv`, then displaying the file size, row count, and column count in an HTML page. The visualization itself is a static SVG containing three simple geometric shapes—two triangles and an ellipse—each filled with a distinct color, which serves as the visual output accompanying the data summary. The page uses a React-ready framework structure, with minimal embedded CSS for text styling and a centered layout.

SSrilekha24

85% match

Loading thumbnail…

Untitled

This example loads a CSV file from a GitHub Gist, reports its size in kilobytes, and displays the number of rows and columns in the parsed data. The page presents this information in a centered, light-blue text block above an inline SVG image. It uses the D3 v5 library’s `d3.csv` and `d3.csvFormat` functions to fetch and measure the dataset, and it manipulates the DOM via `document.getElementById` to update the display. Static HTML and a separate SVG file provide the visual layout.

SSrilekha24

85% match

Loading thumbnail…

Untitled

This example displays metadata about a CSV dataset, including file size, row and column counts, and the best and worst rated titles. It loads the data with d3.csv, processes it in JavaScript, and outputs the findings as text into a page element. The page uses a custom style.css for visual styling and is built with plain HTML, CSS, and D3.js v7.

Hharoldle

84% match

Loading thumbnail…

Untitled

This example loads a CSV file from a GitHub gist and displays summary statistics about its contents in a centered, styled text block. Using the D3.js library, it fetches the data via `d3.csv`, formats it with `d3.csvFormat`, and calculates the approximate size in kilobytes, row count, and column count. The page renders a static SVG background with a blue rectangle, a red polygon, and a clipped gray area, while the text report appears in an HTML `<pre>` element styled with large light-blue text.

KKiran3295

84% match