Skip to main content
SimilarExport ZIP
100%

Fork of Fork of HTML Starter

✓ Published1🌍 Public
BBHUMIKA CHUNDU
Last edited Oct 5, 2025
Created on Oct 5, 2025

This example embeds a static SVG tree illustration as a preview image while performing async data loading with D3 v7. It fetches a CSV file of Nepalese Himalayan peaks, normalizes whitespace-separated headers to commas, trims lines, and parses with `d3.csvParse` and `d3.autoType` to calculate dataset dimensions. The page displays the CSV URL and reports file size plus row and column counts in a styled card layout using CSS custom properties and a green accent theme.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This example displays a simple SVG tree illustration alongside textual statistics about Nepal’s Himalayan Peaks dataset. The page loads a CSV file using `d3.text` and `d3.csvParse` with `d3.autoType`, then prints the file size, row count, and column count. The custom `MyArt.svg` artwork, featuring a green canopy and brown trunk, is embedded directly as an image. Styling is handled through standard CSS, with the D3 v7 library providing the data-loading and parsing functionality.

Kkhushburajan2015@gmail.com
89% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates the end-to-end process of loading a remote CSV dataset and generating a data-driven SVG visualization. The page presents key statistics, a preview table of the first five rows, and a custom SVG plot where each mark represents one CSV row, with shape and color mapped to the category column and position determined by row index and value. The implementation uses D3.js v7 to fetch and parse the data with `d3.csv` and `d3.autoType`, then dynamically builds the table and SVG elements using JavaScript DOM manipulation and the SVG API.

Ssakethpapareddy@gmail.com
86% match
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
86% match
Loading thumbnail…

Fork of Fork of HTML Starter

This example loads a personal expense CSV and displays a summary of its structure, including row count, column count, and column names, in an HTML div. It then renders two static SVG shapes—a steelblue rectangle and an orange circle—on a separate SVG canvas. The code uses the Fetch API to retrieve the CSV, d3.csvParse to parse it, and basic D3 selections and attribute setters to draw the shapes. The visualization serves as a minimal starter template for combining textual data summaries with simple SVG graphics.

HHariniPotla@my.unt.edu
85% match
Loading thumbnail…

Fork of HTML Starter

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.

Kktvgs25@gmail.com
85% match
Loading thumbnail…

Fork of Fork of HTML Starter

This example loads a small CSV dataset of color names from a remote URL and prints a summary of its size, row count, and column count into a preformatted text block. It uses d3.csv to fetch and parse the data, and d3.csvFormat to calculate the approximate file size. Below that, the page displays four static SVG circles, each filled with a hex color from the dataset and labeled with its color name. The page is a minimal React-free HTML document that combines D3 v7 with inline SVG rendering.

Nneeharika2023@gmail.com
85% match
Loading thumbnail…

Fork of Fork of Fork of HTML Starter

This example displays a static welcome page for ICE-5 data visualization, featuring a title, an embedded SVG image, and a text summary of a loaded CSV dataset. The page uses d3.csv to fetch and parse the remote CSV file, then computes and displays the dataset’s size in kilobytes, row count, and column count. D3 v7 is loaded via unpkg, and the summary updates dynamically in a <pre> element. The visualization does not include charts or interactive graphics; it focuses on presenting metadata about the CSV source.

Ppanduvik99@gmail.com
84% match
Loading thumbnail…

Fork of HTML Starter

This example summarizes a vehicle intrusion dataset loaded from a remote CSV file. It displays file size, row count, and column count in a header card, alongside a small static SVG containing a rectangle, circle, and line. Below, a preview table shows the first eight rows using D3 v7's `d3.csv` method. The page uses HTML, CSS, and JavaScript to fetch the data and render the summary and table.

SSanjayRamaSwamyAdla@my.unt.edu
84% match