Skip to main content
SimilarExport ZIP
100%

Creating a dataset and using the dataset on webpage

✓ Published0🌍 Public
Mmomopng
Last edited Feb 25, 2022
Created on Feb 25, 2022

This example demonstrates how to load an external CSV dataset and display basic metadata about it on a webpage. The page fetches a CSV file from a GitHub gist using D3’s `d3.csv` method, then calculates and presents the dataset’s size in kilobytes, row count, and column count in a `<pre>` element. Alongside this textual summary, a static SVG triangle is rendered as an image. The visualization relies on D3 v7’s CSV parsing and formatting APIs, with styling handled through external CSS and inline HTML.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data with D3, displaying basic metadata about the dataset. After fetching the CSV file from a GitHub gist, it computes and presents the file size in kilobytes, the total number of rows, and the column count. The visualization uses D3's `d3.csv` method to asynchronously fetch and parse the data, followed by `d3.csvFormat` to measure the raw text length. The resulting statistics are rendered as large text in an HTML `<pre>` element, with alternative commented-out approaches using `fetch`, `async`/`await`, and `d3.csvParse`.

LLei Lei
83% match
Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file from a remote URL using D3.js, displaying key dataset statistics in a large text format. It uses `d3.csv` to fetch and parse the data, then computes the formatted file size with `d3.csvFormat`, as well as the row and column counts. The dataset comes from a GitHub gist containing CSS named color values, and the results are shown as three lines of text in a `<pre>` element.

LLaura Johnson
82% match
Loading thumbnail…

load Csv data with D3.js and showing svg

This example loads a CSV file from a GitHub gist using D3.js v7’s `d3.csv` method and displays metadata about the dataset, including its size in kilobytes, row count, and column count, in a styled HTML `<pre>` element. The page also embeds an SVG image directly in the markup. The code demonstrates basic asynchronous data loading and DOM text manipulation with `document.getElementById`, along with CSS styling for headers and text presentation.

Vvaddepallinaveen
82% match
Loading thumbnail…

Loading & parsing CSV data

This example demonstrates how D3 loads and parses external CSV data by fetching a remote file and displaying a summary of its contents. The code uses `d3.csv()` to retrieve the dataset from a GitHub gist URL, then calculates and presents the file size in kilobytes, the number of rows, and the number of columns directly on the page. The resulting message is rendered inside an HTML `<pre>` element via the `textContent` property, with `d3.csvFormat()` used to measure the data’s string length for the size calculation. The example also defines an unused `fetchText` helper with the Fetch API.

Ccharles-duron
82% match
Loading thumbnail…

My Webpage

This example demonstrates loading and displaying a CSV dataset of student performance within a styled HTML page. Using D3 v5, it fetches data from a GitHub gist via `d3.csv`, then reports the file size in kilobytes, row count, and column count. A static SVG star graphic is included, alongside a second `d3.csv` call that prints the first ten rows as JSON. The page combines CSS styling, an HTML container, and D3's selection and formatting utilities.

VVarshareddy2912
82% match
Loading thumbnail…

My Webpage

This example demonstrates loading a CSV dataset from a GitHub gist and displaying its size in kilobytes, row count, and first ten rows as JSON in a webpage. It uses D3 v5’s `d3.csv` and `d3.csvFormat` APIs to fetch and measure the data, alongside local ES6 module imports from `index.js`. The page also features static HTML/CSS content and an embedded SVG graphic of a cricket-themed illustration.

VVenkat-Sumith-Thota
82% match
Loading thumbnail…

Load and Parse CSV

This example demonstrates how to load and parse a CSV file using D3.js version 6. It displays statistics about the dataset, including its size in kilobytes, row count, and column count. The visualization uses the `d3.csv` method to fetch and parse the data from a remote GitHub Gist URL, then formats the results with `d3.csvFormat` to calculate the data size. The output is rendered as text inside an HTML `<pre>` element via the Document Object Model, with the file containing named CSS colors as its source data.

WWilliam Couturiaux
81% match
Loading thumbnail…

Loading and parsing CSV data

This example demonstrates how to load and parse a remote CSV file using D3.js, then displays a summary of the dataset in a large text format. It fetches the data from a GitHub gist URL via the `d3.csv` method, which returns a promise. Once resolved, the code calculates the number of rows, columns, and the approximate file size in kilobytes using `d3.csvFormat`. The results are rendered into an HTML `<pre>` element, showcasing basic data inspection and asynchronous loading patterns in D3 v6.

Ggatperdut
81% match