Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published2🌍 Public

Last edited Mar 6, 2024

Created on Mar 6, 2024

This example demonstrates loading and parsing a CSV dataset using D3 v7, displaying summary statistics about the data in a styled HTML page. It shows how to fetch external data with `d3.csv` and present metadata such as file size, row count, and column count in a `<pre>` element. The visualization also embeds an SVG illustration of a simple house, rendered with basic shapes like rectangles and a polygon. The code uses D3's promise-based loading API and dynamically updates the DOM via `textContent`, while the accompanying CSS styles the header and metadata block.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This example demonstrates loading a remote CSV dataset and displaying basic information about it in the browser. It uses D3 v7’s `d3.csv` to fetch and parse the data, then computes the file size in kilobytes, row count, and column count. The result is written to a `<pre>` element via the DOM API, while a separate SVG chart is embedded as an image. The page also includes static HTML and CSS for layout, with the SVG rendered from the `shape.svg` file.

Rranjithkmr598@gmail.com

93% match

Loading thumbnail…

Fork of HTML Starter_ Akshitha Rapala

This example demonstrates loading and parsing a remote CSV dataset using D3 v7, displaying metadata about the data in a styled HTML page. It shows the data’s size in kilobytes, row count, and column count within a `<pre>` element. The page also embeds a static SVG illustration of a house, rendered via an `<img>` tag. The code uses `d3.csv()` to fetch and parse the data, then updates the DOM with template literals. CSS styles the heading and metadata display, while the SVG provides a simple visual anchor. The dataset is sourced from a GitHub gist URL.

Aakshitha.rapala@gmail.com

91% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates how to use D3.js v7 to fetch and parse a CSV file from a GitHub Gist, then display summary statistics about the data. The page shows the file size in kilobytes, the number of rows, and the number of columns using D3’s `d3.csvParse` and the Fetch API. A large `<pre>` element with CSS styling presents the output text. The code uses `fetchText` to retrieve the remote CSV, illustrating a minimal client-side data-loading workflow.

EErico103

90% match

Loading thumbnail…

Fork of HTML Starter

This example showcases a minimal HTML page that fetches and summarizes a CSV dataset of CSS named colors. It reports the data's size in kilobytes, the number of rows, and the number of columns directly on the page. The visualization relies on the D3.js library, using its `d3.csv` function to load remote data and `d3.csvFormat` to calculate the file size. The output is rendered as plain text within a `<pre>` element, with styling applied through CSS.

BbeauMarko

89% match

Loading thumbnail…

Fork of HTML Starter

This example displays a summary of a CSV file containing CSS named colors. It fetches the data from a remote gist URL, then computes and presents the file size in kilobytes, the row count, and the column count within an HTML `<pre>` element. The code uses the D3.js version 6 library, specifically the `d3.csv` and `d3.csvFormat` functions, to handle data loading and formatting. The visualization is a simple text-based report of the dataset's structure, rendered on a plain HTML page.

Vvram80

88% match

Loading thumbnail…

Fork of HTML Starter

This example displays summary statistics from a CSV file of CSS named colors. It fetches the remote dataset with D3’s `d3.csv` method, then reports the file size in kilobytes, the total row count, and the number of columns. The output appears as plain text inside a `<pre>` element. A commented-out alternative demonstrates using `fetch` with `d3.csvParse`. The page is built with vanilla HTML, CSS, and JavaScript, loading D3 v6 from a CDN.

KKenneth Silvere

88% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page that loads a CSV dataset of CSS named colors using D3.js. The page displays “Hello HTML” in large text while the CSV data is fetched asynchronously from a GitHub gist. It logs the total number of data rows to the browser console. The code uses `d3.csv()` to parse the remote CSV file, showing a basic data-loading pattern with a Promise-based callback.

Vvvs1680

88% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates how to load and parse CSV data in a minimal HTML page using D3. It sets up an asynchronous `fetchText` function to retrieve a CSV file from a URL, then applies `d3.csvParse` to convert the raw text into an array of objects. The parsed data is logged to the browser console, where it can be inspected by the viewer. The code relies on the Fetch API and D3 v6, integrated via a script tag from unpkg, with no additional visualization or rendering logic included.

Hhukbk

88% match