My Webpage

100%

✓ Published0🌍 Public

Last edited Jul 1, 2023

Created on Jul 1, 2023

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.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

My Webpage

This example demonstrates the loading and display of a CSV dataset from a GitHub Gist, showing file size, row count, and column count in a preformatted text container. The page combines basic HTML and CSS styling with D3.js v5, using the `d3.csv` API to fetch and parse the remote data asynchronously. The visualization also includes a simple inline SVG graphic with geometric shapes, and the code highlights VizHub's modular architecture through local ES6 module imports in separate JavaScript files.

Aakshayvenishetty1437

89% 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

88% match

Loading thumbnail…

My Webpage

This example shows a webpage that loads data from a remote CSV file using `d3.csv`, displaying the file's size, row count, and column count in a `<pre>` tag. The page also includes an SVG graphic and a static header. The code uses the D3 v5 library loaded via UNPKG, and an equivalent `index.js` demonstrates importing `csv`, `csvFormat`, and `select` from the `d3` module to parse and preview the first 10 rows of the Automobile dataset.

VVenkat-Sumith-Thota

88% match

Loading thumbnail…

My Webpage

This example demonstrates a webpage about cricket legend MS Dhoni, featuring a custom-designed SVG logo of a face and embedded text content. The page loads D3 v5 via UNPKG and uses the `d3.csv` function to fetch a remote CSV dataset from a Gist URL, displaying file size, row count, and column count in a message container. The visualization also imports `select`, `csv`, and `csvFormat` from D3 in the `index.js` file to append the first 10 data rows as formatted JSON text to the page body.

MManideeprenikindi

83% 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

83% match

Loading thumbnail…

Creating a dataset and using the dataset on webpage

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.

Mmomopng

82% match

Loading thumbnail…

My Webpage

This example demonstrates how to embed a CSV data table directly into a webpage using the native Fetch API to load a remote file from a GitHub gist. It shows the first ten rows of parsed data displayed in an HTML table, with headers and cells populated dynamically through DOM manipulation. The page also includes basic HTML structure, a reference to an SVG logo image, and a link to a D3 version 6 tutorial video, though no D3 visualization is actually implemented. The code relies on standard browser APIs like `fetch` and `document.createElement` rather than any external charting library.

BBhavanaGIrni

81% 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

81% match