Skip to main content
SimilarExport ZIP
100%

d3 intro

✓ Published0🌍 Public
Ssukumardunn
Last edited Jan 25, 2023
Created on Jan 25, 2023
Forked from Hello Package.json

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.

AI-generated description

hiiii

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
87% match
Loading thumbnail…

my first d3

This example generates a full-screen SVG composition of 100 horizontal and 100 vertical rectangles, each 10 pixels thick and spaced 20 pixels apart. Two SVG masks with 200-pixel-radius circles in the center determine visibility: the first mask (white circle on black) reveals horizontal strips, while the second (black circle on white) hides vertical strips. Using d3.select, d3.range, and the .join() pattern, the rectangles are created and styled, with the masks applied via the url(#…) attribute. The result is a striped grid where horizontal and vertical bars cross, creating a contrasting pattern inside and outside the circular regions. Data is procedurally generated from the range of 100.

NNeeraj Kumar
85% match
Loading thumbnail…

D3 Starter

This example builds a full-screen SVG visualization of 50 horizontal rectangles arranged in a vertical sequence, with their heights and spacing varying incrementally by index. A circular mask reveals only the central portion of the layered bars, creating a lens-like effect against a white background. The code uses D3 v7 selections and the `range()` generator to bind data, then appends rectangles via `join()`. A dedicated `<mask>` element contains a single white circle positioned at the center, demonstrating basic D3 masking and data-binding techniques.

Sscheenmi@gmail.com
85% match
Loading thumbnail…

d3 art

This example renders a series of red horizontal rectangles across the full screen using SVG, with each rectangle positioned at a fixed y-coordinate. The code builds an array of mark objects and uses D3 v5's `select`, `range`, and `append` methods to create the shapes, while the HTML page loads D3 from a CDN. The visualization is minimal, showing only stacked red bands without interaction or animation.

Aaissatheprogrammer
84% match
Loading thumbnail…

D3 Starter-episode 04

This example demonstrates a basic D3.js bar-like visualization of 100 horizontal rectangles stacked vertically, each with a height of 10 pixels and width matching the viewport. The code uses `d3.select`, `d3.range`, and the `join` pattern to bind data to SVG `rect` elements, spacing them at 20-pixel intervals. It renders quickly to show the minimal setup for D3 version 6, with styling from a large body font size. The visualization is purely layout-driven, using no external data source or interaction.

Mmaxthamt
83% match
Loading thumbnail…

d3

This example demonstrates masked striped patterns overlaid on top of each other. It creates 100 horizontal rectangles and 100 vertical rectangles, each with a height or width of 10 pixels, spaced 20 pixels apart. The rectangles are masked using SVG masks with circular cutouts, creating a crosshatch effect with a circular reveal. The visualization uses D3 v6 with `select`, `selectAll`, and `data` joins to bind the mark arrays to the SVG elements, rendering the output as SVG in a React-styled HTML page.

Eelgato_1994
83% match
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
82% match
Loading thumbnail…

Starting with D3

This example creates a full-screen SVG pattern of horizontal and vertical stripes using D3’s `select`, `range`, and `join` methods. Two sets of 100 rectangles are generated, each masked to reveal or hide a circular region at the center. The code uses SVG `mask` elements with black-and-white circles to produce a cross-shaped visual intersection. The data is synthetic, generated via `range(n)`, and rendered entirely with D3 v6 and SVG attributes.

Pphilmae
82% match