Skip to main content
100%

JS Bin

✓ Published0🌍 Public
WWillNetsky
Last edited May 18, 2016
Created on May 18, 2016

This example uses D3 to generate a 40-by-40 grid of SVG rectangles, each initially filled red. The visualization responds to mouseover events, changing a hovered rectangle’s fill to green via the `style` method. The grid is positioned using an ordinal scale with `rangeBands` across an 800-pixel square. The code defines an `onClick` function that toggles a rectangle’s color between red and green, though this handler is not attached to any event in the visible code.

AI-generated description

Similar vizzes

Loading thumbnail…

GRID

A 10x10 grid of square cells responds to clicks by cycling through four fill colors: white, blue, orange, and gray, based on a per-cell click counter. The SVG is generated with D3 v4, using data binding to create rows and columns of `rect` elements. Each cell maintains its own click state, and the `d3.select(this)` method directly updates the clicked square’s style. The grid itself is static, with no animation or external data source beyond the locally generated coordinate and dimension objects.

CChristoph Diefenthal
76% match
Loading thumbnail…

Fork of D3.js 教程

This example shows a grid of 20 colored rectangles laid out on an SVG canvas, with each rectangle’s fill color cycling through a palette of six distinct hues. The visualization is generated using D3.js v6, where `d3.range` creates the dataset and `selectAll` with `.join` binds it to SVG `<rect>` elements. The layout positions rectangles in rows and columns based on a computed column count, while the background is set via CSS. The code runs in a browser, adapting the chart size to half the window width and full height, and demonstrates basic data binding and SVG rendering without external data sources.

Hhchen156@jh.edu
75% match
Loading thumbnail…

JS Example

A JavaScript-generated SVG visualization displays a series of vertical blue rectangles, each 10 pixels wide and spaced 20 pixels apart, spanning the full window height. A circular mask, centered on the screen with a radius of 200 pixels, reveals only the bars within its boundary, creating a striking circular cutout effect against the otherwise full-height stripes. The code builds the SVG dynamically using the DOM API, creating elements via `createElementNS` and appending them to the body with attributes set programmatically.

Nnubhatia
75% match
Loading thumbnail…

D3.js 教程

This example generates a colorful grid of rectangles using D3.js. The visualization displays twenty rectangles arranged in a responsive layout, with each rectangle's fill color cycling through a palette of six distinct colors. The code leverages the D3.js library (v6) to select the chart container, append an SVG element, and join data to SVG rectangles using the `selectAll`, `data`, and `join` methods. The SVG renders at half the window's width and full height, with a light cream background.

Vvivianaaai@qq.com
75% match
Loading thumbnail…

SVG Fun!

This example demonstrates a playful grid of twelve pink rectangles rendered as SVG elements. The visualization shows how CSS transitions and hover states can animate the shapes, changing their fill color and stroke width on mouse interaction. The code uses plain SVG and CSS, with rectangles defined in the HTML and styled via a `rect` selector. The transition property applies a 1000-millisecond easing effect, while the `:hover` pseudo-class modifies the visual style. The page is structured with a fixed 960x500 SVG viewport and a margin around the body.

Vverrasc
74% match
Loading thumbnail…

D3 Random Abstract Art

This example generates a grid of 100 colored rectangles whose fills use randomized pairs from the d3 `schemeCategory10` palette via `d3.scaleLinear`. As the mouse hovers over a square, that rectangle and its entire row are re-appended to the SVG to bring them to the foreground, while the square’s width and height are scaled up or down by a factor of three or four. Clicking anywhere reloads the page to generate a fresh random composition. The visualization is built with D3 v6 selections and SVG rendering, and includes a small instruction bar.

CCaroline Ghisolfi
73% match
Loading thumbnail…

D3 JS

An SVG grid of 100 horizontal and 100 vertical rectangles covers the full viewport. Two circular masks, defined via D3's `mask` element, create a lens-like effect: the first mask exposes a central white circle outlined by black-filled rectangles, while the second inverts the fill to produce a complementary pattern. Using D3 v7's `join` method, the code binds `d3.range` data to generate the rectangles, with each strip sized 10 pixels thick and spaced 20 pixels apart. The overlapping masks reveal alternating stripe orientations, forming a dynamic moiré-like crosshatch within the central circular region.

TTehran Mammadov
73% match
Loading thumbnail…

js-visualization

This example renders two sets of overlapping SVG rectangles—horizontal red stripes and alternating green vertical stripes—that are masked by circular cutouts to create a dynamic patterned display. The entire visualization rotates continuously via CSS animation. The code builds the SVG scene imperatively using the DOM API, creating masks, rectangles, and circles with `document.createElementNS`, while styling spins through keyframes defined in CSS.

GGusnaRWX
73% match