Skip to main content
SimilarExport ZIP
100%

Fork of Blank Slate

✓ Published0🌍 Public
Sshailajat1998@gmail.com
Last edited Mar 5, 2024
Created on Mar 5, 2024

This example shows a simple CSV file summary interface that fetches a remote dataset and displays its basic properties—file size, row count, and column count—in a styled card. It uses the Fetch API to retrieve the CSV from a GitHub raw link, then parses it with `d3.csvParse` to determine the number of rows and columns. The summary text is injected into the DOM via `innerHTML`, and a helper function formats the file size using logarithmic scaling. The page relies on D3.js v6 for parsing and basic DOM manipulation, with no charting or visualization beyond textual metadata.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Blank Slate

This example demonstrates how to load a CSV dataset from a remote URL and display basic information about it, such as file size, row count, and column count, using D3.js. The visualization shows a static text report rendered inside a styled container, with the dataset’s metadata presented in a readable format. The code uses the `d3.csv` function to fetch and parse the data, then computes the formatted CSV string length to estimate size. The `d3.csvFormat` method converts the parsed data back to CSV for size calculation, while `data.length` and `data.columns` provide row and column counts. The result is injected into the DOM via `textContent`.

AAsrar Al Qassem
88% match
Loading thumbnail…

Fork of Fork of Blank Slate with Hot Reloading

This example loads a CSV file from a public gist and presents a data summary, a preview table of the first five rows, and a bar chart showing categorical counts. It uses `d3.csv` to fetch and parse the data, dynamically detects numeric columns, and renders the summary statistics and table into HTML elements. The bar chart is drawn as an SVG using D3’s selection and scale APIs, with all styling applied via CSS.

RRithvik
84% match
Loading thumbnail…

Fork of HTML Starter

This visualization displays a summary of a CSV file, showing the file size in kilobytes, the number of rows, and the number of columns in a clean card layout. It fetches the `shapes_data.csv` file from a GitHub Gist using the `fetch` API, then uses `d3.csvParse` to parse the text into a tabular data structure. The code accesses the parsed data’s `length` property for row count and the `columns` array for column count, displaying these values as plain text. The example demonstrates a straightforward use of D3.js v7 for CSV parsing and basic DOM manipulation without any chart rendering.

Bbalaaswitha@gmail.com
83% match
Loading thumbnail…

Fork of Fork of js

This example displays a plain-text summary of a loaded CSV dataset, showing the total row count, the column names, and the first data record as a JSON string. It uses D3.js version 7.3.0 to fetch the data with `d3.csv()` and then manipulates the DOM by selecting a `#data-summary` div and appending paragraph elements with the computed summaries. The page also logs the parsed data to the browser console for inspection.

BBALAJI MANDAVA
80% match
Loading thumbnail…

Fork of Hello HTML

This example displays a text summary describing the size and structure of a CSV dataset, rendering the file size in kilobytes, the row count, and the column count in large, bold typography. It fetches the `cssNamedColors.csv` dataset from a remote GitHub gist using D3.js’s `d3.csv` method, then formats the results via `d3.csvFormat` to calculate the byte size. The visualization demonstrates a minimal workflow for loading remote tabular data and presenting its basic dimensions without any charts or graphics.

Vvarun-j312
80% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates a simple data-summary dashboard that loads a CSV file and displays basic metadata about its contents. It shows the total number of rows, the names of all columns, and the first data row as a JSON string. The code uses D3.js version 7, specifically `d3.csv` to fetch the dataset from a remote GitHub Gist URL, and then manipulates the DOM with `d3.select` and `append` to render the summary into styled paragraph elements. The visualization is minimal, focusing on text-based output rather than charts, and the data source is a static CSV of Champions League records.

BBALAJI MANDAVA
80% match
Loading thumbnail…

Fork of Fork of Fork of HTML Starter

This D3.js visualization loads a coffee sales CSV file and displays summary statistics about the dataset on a styled web page. It fetches the remote CSV using the Fetch API, parses it with `d3.csvParse`, and then calculates and displays the file size, row count, and column count in a dedicated summary box. The page also renders a static SVG circle graphic with D3 Data text, combining data loading and parsing with basic stat reporting.

Ssravya7136@gmail.com
80% match
Loading thumbnail…

Fork of HTML Starter

This example loads a user-supplied raw CSV file and presents a data summary alongside a preview table of the first ten rows. The D3 v7 code uses `d3.csvParse` with `d3.autoType` to parse the data, then computes column-level statistics such as minimum, maximum, mean, and unique value counts. A static SVG picture demonstrates five basic shapes—rectangle, circle, polygon, line, and text—styled via external CSS. The interface includes a text input and button for fetching new data URLs, with results rendered into the summary and table containers.

Ppriyankachary1701@gmail.com
79% match