test

100%

✓ Published0🌍 Public

Last edited Jul 16, 2023

Created on Jul 16, 2023

This example demonstrates how SVG shapes can fill a browser window using D3.js. The code appends a red rectangle covering the entire viewport, then adds 100 horizontal bars stacked vertically with 10-pixel gaps. Each bar spans the full window width, creating a striped overlay effect. The visualization uses D3 selections with the `range()` generator and `.join()` method to bind data to SVG `<rect>` elements. All rendering occurs through SVG, with dimensions dynamically derived from `window.innerWidth` and `window.innerHeight`.

AI-generated description

A demo of SVG shapes.

MIT Licensed

Similar vizzes

Loading thumbnail…

d3 tutorial

This example demonstrates a simple SVG visualization where 100 horizontal rectangles are drawn across the full window width, with a circular mask revealing only the central portion of the stacked bars. The code uses d3.select, d3.range, and the .join() method to bind data to rectangle elements, then appends an SVG mask containing a black background rect and a white circle to create the viewport effect. Rendering is handled entirely through SVG attributes, with the visualization sized dynamically to the browser window.

JJesper Martinsson

80% match

Loading thumbnail…

d3 intro

This example renders a full-screen SVG filled with 100 horizontal rectangles, each stacked vertically with a fixed height of 10 pixels and a small gap between them. The visualization uses d3.select and d3.range to generate the data, then binds it to rect elements via a data join. The rectangles span the entire window width, creating a simple striped pattern that highlights D3’s declarative approach to binding data to SVG shapes using the .attr and .join methods.

Ssukumardunn

79% match

Loading thumbnail…

test

A grid of thin horizontal and vertical bars covers the full screen, creating intersecting lines that are visible only through a central circular mask, leaving the corners dark. The bars are drawn as SVG rectangles using D3’s `selectAll().join()` pattern with `range()`-generated data. Two masks define the view: one white circle reveals the inner bars, while a second mask with an inverted circle hides the outer bars’ center. The example uses D3 v7 and SVG rendering with no external data source.

Mmartincbhak@gmail.com

78% match

Loading thumbnail…

d3 test

This example demonstrates a minimal starting point for using D3 version 7, creating a simple SVG canvas that fills the browser window. The code imports the `select` function from the D3 library and appends an SVG element to the page body, sizing it with `window.innerWidth` and `window.innerHeight`. It then defines an array of ten rectangle objects with fixed positions and dimensions, logging them to the console. No visual output is rendered from those rectangles; the example solely focuses on setting up the D3 environment and data structures.

JJacobRozak

78% match

Loading thumbnail…

D3Trial full

This example renders a full-screen SVG grid of 100 horizontal and 100 vertical bars, each drawn as a thin rectangle. The bars are layered and clipped by two SVG masks. One mask inverts its fill to hide the horizontal bars over a central region, while the other mask similarly hides the vertical bars in a complementary area, creating a cross-hatched visual effect. The code uses D3 v6 selections with `.join()`, `d3.range`, and `d3.symbol` (commented out), with masks constructed via `svg.append('mask')` and filled rectangles. The dimensions are set to `window.innerWidth` and `window.innerHeight`.

Ffdrigui

78% match

Loading thumbnail…

d3 tutorial 4

This example uses D3 to render a full-window SVG image. It draws 100 horizontal bars, each with a height of 10 pixels and stacked vertically, to create a striped pattern across the canvas. A clipping mask, defined with the `<mask>` element, applies a white star-shaped path over the stripes, so only the area inside the star remains visible against a black background. The code uses D3's `select`, `range`, `symbol`, and `symbols` APIs to generate the star path and SVG elements.

JJesper Martinsson

77% match

Loading thumbnail…

Untitled

This example displays 100 horizontal SVG rectangles stacked vertically, each rendered with varying heights and widths across the viewport. The code uses D3’s `select` method to append an SVG element to the body and sets its dimensions from `window.innerWidth` and `window.innerHeight`. Inside a loop, it creates each rectangle via `document.createElementNS`, setting attributes for positioning and size, and appends them directly to the SVG using `appendChild`. The visualization shows a striped pattern of bars without any interactivity or data binding.

Nnreinig3@gatech.edu

77% match

Loading thumbnail…

mySVGwork

This example displays a full-screen SVG canvas filled with one hundred vertical rectangles, each ten pixels wide and spaced twenty pixels apart. The code generates the graphic dynamically using the Document API's `createElementNS` method to construct SVG elements. The rectangles span the entire height of the browser window, creating a striped pattern that responds to the current viewport dimensions. The rendering approach uses a simple loop to position each shape incrementally across the horizontal axis.

DDonald Bagwell

77% match