Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published0🌍 Public
KKOLLIPATI NIKHIL
Last edited Oct 4, 2025
Created on Oct 4, 2025
Forked from HTML Starter

This example shows a simple HTML table of shape data alongside a static SVG graphic containing a red circle, a blue rectangle, and a green polygon. The page summarizes the dataset with a total shape count and the average area. The visible code uses SVG shapes and a JavaScript `fetch` call to load a CSV file from a GitHub gist, dynamically populating the table and computing the summary from the parsed rows.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This example summarizes a CSV file fetched from a GitHub gist, displaying its file size, row and column counts, and a full table of its contents. It also renders two static SVG illustrations: a fish and a house, which are drawn using inline SVG path, circle, polygon, and rect elements. The code uses D3 v7’s `csvParse` and `fetch` API to load and parse the data, then injects the summary and table directly into the HTML via `innerHTML`. Styling is handled by external CSS.

Mmadalahyndavi123@gmail.com
85% match
Loading thumbnail…

Fork of HTML Starter

This example displays a library book dataset summary and a static SVG illustration. It fetches CSV data from a user-provided URL and uses D3.js version 7 to parse and analyze the columns, categorizing them as numeric or categorical and computing statistics like min, max, and mean. The summary section lists row and column counts, while a separate SVG image shows five basic shapes (rectangle, circle, polygon, line, and text), utilizing D3's `d3.csvParse` and aggregation functions.

Ppriyankachary1701@gmail.com
83% 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
82% match
Loading thumbnail…

Fork of HTML Starter-TN

This example displays a set of basic geometric shapes, including overlapping red and green circles, a yellow rectangle with a navy border, and a diagonal navy line, all arranged on a static SVG canvas. The visualization uses raw SVG elements (`circle`, `rect`, `line`) defined directly in the HTML markup, with CSS controlling the overall page layout and text styling. No external JavaScript libraries or data sources are involved; the SVG dimensions are fixed at 960 by 500 pixels, and the shapes render without any interactive or animated behavior. The code demonstrates fundamental SVG drawing through declarative markup.

TToly
81% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page that uses inline SVG elements to render basic shapes. The visualization shows a set of simple geometric figures—a blue circle, a yellow rectangle, and a smaller lightblue circle—positioned on a blank canvas. The rendering relies on the SVG API within the HTML document, with styling applied directly through attributes like `fill` and `cx`. No external libraries or JavaScript are used; the page is a static demonstration of CSS and SVG markup.

Aalexander.anton-boicuk@study.hs-duesseldorf.de
81% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal SVG scene with a blue circle with a red stroke and a red diagonal line, rendered directly in HTML. It shows how static shapes can be positioned using explicit coordinates within an SVG viewport of 960 by 600 pixels. The implementation relies on native SVG elements embedded in the DOM, styled via CSS and structured with basic JavaScript-free markup. The code uses no external libraries, making it a pure HTML and SVG starter template for simple geometric visualizations.

Nnkmng77@gmail.com
81% match
Loading thumbnail…

Fork of HTML Starter

This example shows a small set of basic SVG geometric shapes—a red circle, a blue rectangle with a red stroke, a thin navy line, and a large outlined rectangle—arranged on a 960 by 500 canvas. It renders directly using declarative SVG elements defined in static HTML, with no JavaScript logic or data binding. The visualization relies solely on SVG’s built-in shape elements like `circle`, `rect`, and `line`, styled via inline attributes for fill, stroke, and positioning.

DDev Dragon
81% match
Loading thumbnail…

Fork of HTML Starter

This example loads a cereal dataset from a GitHub gist and displays a data summary with column details, unique counts, and sample values, plus a preview table of the first five rows. It also renders a quick SVG mini bar chart showing the number of non-empty cells per row. The page uses d3.csv to fetch and parse the data, then manipulates the DOM directly to build the summary, table, and SVG visual without additional frameworks.

Ppanyamsantosh09@gmail.com
81% match