Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published0🌍 Public

Last edited Jan 20, 2023

Created on Jan 18, 2023

This example displays a series of thin horizontal rectangles that collectively span the full width of the browser window, using a minimal design that emphasizes simplicity. The SVG canvas is dynamically sized to match the viewport dimensions. The visualization is built with D3.js, leveraging the `select`, `append`, `range`, and `join` APIs to generate and position each rectangle vertically, with a fixed height of 10 units. The data is synthetic, derived from a numeric range of 100 values, resulting in a clean, unadorned grid-like pattern rendered directly in the browser.

AI-generated description

Demostration SVG

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a full-screen SVG visualization composed of 100 horizontal rectangles, each 10 pixels tall. The rectangles are rendered as uniform stripes that collectively fill the entire browser viewport. The visualization applies a circular mask to every rectangle, creating a repeating pattern of clipped shapes. The code uses D3 v6's `d3.select` and `.join` APIs to efficiently bind array data to SVG elements, with `d3.range(n)` generating the sequence of y-positions.

IIvan Sergio Lopez

88% match

Loading thumbnail…

Fork of HTML Starter

This example renders a full-screen SVG canvas using raw JavaScript and the SVG DOM API, drawing a series of 100 vertical rectangles. Each rectangle is placed at increasing x-coordinates, with a fixed width and a height set to the window’s inner width, creating a striped pattern across the viewport. The code programmatically creates SVG elements via `document.createElementNS` and appends them to the document, demonstrating a minimal HTML/CSS/JavaScript setup without external libraries.

CChirag

86% match

Loading thumbnail…

Fork of Fork of HTML Starter

This example displays a series of black rectangles of varying heights and widths arranged on a white 960×500 SVG canvas, creating an abstract geometric composition. The rectangles are positioned at different coordinates, with some overlapping in their vertical extents. The visualization uses raw SVG elements defined directly in the HTML markup, including `<svg>`, `<rect>`, and inline styles for sizing and placement. No JavaScript libraries or data processing are involved; the rendering relies solely on static SVG attributes such as `x`, `y`, `width`, and `height` to define the layout.

LLucia Cerchie

86% match

Loading thumbnail…

Fork of HTML Starter

This example generates a grid of 100 thin vertical rectangles on an SVG canvas using JavaScript’s `document.createElementNS` API. Each rectangle is positioned at increasing x-coordinates with a fixed width and full height, creating a striped pattern across the 960-by-500 pixel viewport. The code uses native Document Object Model (DOM) methods to build the SVG element and its children, with no external libraries or data sources. It demonstrates fundamental SVG creation and attribute manipulation in a bare HTML page.

Sscxingji

85% match

Loading thumbnail…

Fork of HTML Starter

A minimal web page visualizes an empty SVG canvas that fills the entire browser window. The code uses D3's `select` method to append an SVG element to the body, setting its width and height to the viewport dimensions. No data is loaded or drawn; the example simply demonstrates the basic structure for starting a React-free visualization project with D3, serving as a foundation for adding custom graphics.

BBaptPoi

85% match

Loading thumbnail…

Fork of HTML Starter

This example draws a generative art piece inspired by Sol LeWitt, rendering a grid of vertical bars across the full browser window. Using raw SVG manipulation via the DOM API, the script creates 100 rectangle elements, each 10 pixels wide and 500 pixels tall, spaced 20 pixels apart along the x-axis. The rectangles are appended to an SVG canvas that stretches to the viewport’s dimensions, producing a minimalist, repeating pattern without any interaction or animation. The result is a static, rule-based composition generated entirely in JavaScript.

Rraturi22@gmail.com

84% match

Loading thumbnail…

Fork of HTML

This visualization displays a full-screen SVG canvas filled with one hundred horizontal stripes, each ten pixels tall, spanning the entire width of the viewport. The code creates an SVG element using the raw DOM API `document.createElementNS`, dynamically sizing it to the browser window’s inner dimensions. It then generates rectangles via a JavaScript loop, setting their `y` position incrementally and applying fixed height and width attributes. No external libraries are used; the rendering relies entirely on standard SVG and browser JavaScript.

GGuna

84% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a simple D3.js starter template that creates a vertical series of 100 rectangular bars across the full width of the viewport. The visualization uses D3’s selection and data-join API (`select`, `selectAll`, and `join`) to generate SVG rectangles positioned by their `y` attribute, with each bar spaced 20 pixels apart. The code initializes an empty SVG element within the page body and relies on D3 version 7.8.2, loaded via CDN, to construct the graphic without any external data source.

DDea Bardhoshi

83% match