Skip to main content
SimilarExport ZIP
100%

Data visualization

✓ Published0🌍 Public
Ssrivalliwuyyuru
Last edited Jun 23, 2022
Created on Jun 22, 2022

This example displays metadata about a CSV file of flavor data, including its size, row count, and column count, alongside a static SVG image of the flavors. The page uses d3.csv to fetch the remote CSV from a GitHub gist, then d3.csvFormat to calculate the file size in kilobytes and d3’s array properties to count rows and columns. The results are inserted into a pre element styled with magenta background, while a red h1 heading labels the page. The layout relies on basic CSS for centered text and image sizing.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Data Visualization 1

This example displays basic metadata about a CSS-named-colors dataset loaded from a CSV file: the approximate file size in kilobytes, the number of rows, and the column names. It uses D3 v5’s `d3.csv` to fetch and parse the data, then writes the computed statistics into a large `<pre>` element on the page. The code also includes commented-out alternatives using `fetch` and `d3.csvParse` with async/await syntax.

JJohn Jeevasaeyan
82% match
Loading thumbnail…

Data Visualization

This example displays a data summary message generated from a CSV file loaded via d3.csv. The code calculates the file size in kilobytes, row count, and column count, then renders these statistics in a large, styled pre element. The page also includes a heading, a greeting, and an embedded image reference from VizHub. The visualization uses D3 v7 and React, with the CSV data sourced from a GitHub gist.

Hharika-1929
82% match
Loading thumbnail…

csv data

This example displays basic metadata about a CSV file in large text, reporting its size in kilobytes, row count, and column count. It loads the data from a GitHub Gist containing CSS named colors using d3.csv in D3 v7, then formats and measures the parsed data with d3.csvFormat. The page is a minimal HTML document with inline JavaScript and CSS, updating a pre element’s text content through the DOM API.

Eeleshaky
82% match
Loading thumbnail…

Data D3 Loader

This example demonstrates progressive loading of a remote CSV dataset by displaying its metadata. It shows the file size in kilobytes, row count, and column count derived from a CSS color palette dataset hosted as a GitHub gist. The visualization uses React hooks (`useState`, `useEffect`) to fetch and asynchronously load the data with D3’s `csv` method, then formats and displays the computed statistics in a styled `<pre>` element. The rendering is purely SVG-free text output, with D3’s `csvFormat` used to calculate string length for the size measurement.

Rrayking99
81% match
Loading thumbnail…

Data Visualization ICE5

This visualization presents metadata about a cereal nutrition dataset, displaying row count, column count, and file size as text on a styled HTML page. The page uses a background SVG image of cereal boxes and prominent headings to contextualize the data. The code loads a CSV file from a GitHub gist using `d3.csv`, then formats the data with `d3.csvFormat` to calculate the file size in kilobytes. The resulting message is inserted into a `<pre>` element via `textContent`, with CSS styling for italic red headings and green bold text.

Ppravalika.thogaru10@gmail.com
81% match
Loading thumbnail…

Data Visualization

This example displays a CSV dataset’s metadata summary, including file size in kilobytes, row count, and column count, presented in a styled header and preformatted text block. It loads D3 v7 via CDN and uses `d3.csv` to fetch remote data from a GitHub gist, then formats the output with `d3.csvFormat` and `Math.round`. The page also embeds an external SVG image of a house, with layout controlled through custom CSS classes. The visualization demonstrates basic data loading, parsing, and textual output without any graphical charting.

AAsherpranayp
81% match
Loading thumbnail…

Loading and parsing data using d3

This example demonstrates loading a CSV file from a URL and displaying its metadata, including file size in bytes and kilobytes, row count, and column count, within a styled message container. The visualization also includes a static SVG pie chart with two slices (20% and 80%) representing categorical proportions. The code uses D3 v7’s `d3.csv` to fetch and parse the remote CSV, then computes file size using `d3.csvFormat` and `.length`. The SVG chart is hand-coded with `<path>` elements and `<text>` labels, while the page layout relies on basic HTML and CSS for borders and background.

Cchalasanigayaetiri@gmail.com
81% 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
81% match