Fork of D3.js 教程

100%

Fork of D3.js 教程

✓ Published0🌍 Public

Last edited Mar 22, 2024

Created on Mar 22, 2024

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

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

92% match

Loading thumbnail…

Fork of d3 and canvas - the bind, the draw and the pick

This example demonstrates a grid of colored rectangles, where each cell represents a data point and its color is mapped from its value using a spectral color scale. The visualization implements a picking mechanism for canvas-based interactivity by assigning each rectangle a unique, hidden color stored in a separate off-screen canvas. Using D3 v4, the code binds data to custom elements, then draws the visible grid with animations, while the hidden canvas enables precise hit-testing through color lookup, demonstrated with a tooltip.

Oonceup

83% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a simple D3.js starter template that renders a grid of rectangles across the full window. The visualization uses nested loops to create SVG groups at regular intervals, with each group containing multiple rectangles positioned vertically. The code imports `select` and `range` from the d3.v7 library and uses data joins with `.join('rect')` to append elements. The page scales text to 13em and includes a YouTube tutorial link, while the JavaScript calculates grid margins based on window dimensions and sets the SVG size to fill the viewport.

JJeppeOEM

81% match

Loading thumbnail…

Fork of with D3 and group elements

This example generates an SVG grid of horizontal and vertical rectangles, precisely 960 by 500 pixels, using the D3.js library. The grid is composed of two groups of rectangles, each with a stroke width of 8 pixels, and is overlaid with circular masks to create a focal point in the center. The code leverages D3's `select`, `append`, `attr`, and `range` methods to build the structure, along with custom `setAttributes` and `join` helpers for efficient element creation. The visualization demonstrates how to combine SVG masks with D3's data-driven rect generation to produce a geometric pattern with a central spotlight effect.

Pparag776

81% match

Loading thumbnail…

Fork of D3 Starter

This example shows a grid of horizontal and vertical stripes across the full viewport, with a circular region at the center appearing brighter against the surrounding dark mask. The code uses D3 v7 selections to append two groups of rectangles, each generated from a `range(100)` data array, and assigns SVG masks to each group. The first mask contains a black rect with a white circle, while the second uses inverse colors, creating the overlapping visual effect.

HHaritscode

80% match

Loading thumbnail…

Fork of Fork of Sol LeWitt-d3-3

This example generates a grid-based abstract pattern using D3.js version 6, rendering SVG rectangles in horizontal and vertical orientations. The visualization uses the d3.select and d3.range functions to create 100 stripes of each direction, layered with SVG mask elements to create two circular cutout effects at the center of the viewport. The first mask uses a white circle on black, while the second uses a black circle on white, producing contrasting visibility through the overlapping stripes. The visualization fills the entire browser window dynamically by setting the width and height to the inner dimensions of the viewport.

Bbillzhou2005

80% match

Loading thumbnail…

Fork of D3 Implementation first day

This example demonstrates a minimal, full-screen grid of horizontal and vertical stripes that become visible only through two circular windows. Built with D3.js version 7, it uses the `select` API to append SVG elements, `range` to generate 100 coordinates, and iterative `join` operations to create and position the rects. Two SVG masks—one with a central white circle on a black field, the other inverted—define the circular reveal for the horizontal and vertical stripe layers, respectively.

NNyashaBradleymhepo

80% match

Loading thumbnail…

Fork of d3-get-it-right-04

This example creates a hundred horizontal and vertical striped rectangles overlaid to form a grid, with a symbol-shaped hole cut through the pattern. The code uses d3.select, d3.range, and d3.join to bind data to SVG rect elements. Two SVG masks, one inverted and one normal, are built with d3.symbol and a d3.symbols[0] path (a circle) to punch a central circular reveal. The result shows layered d3.mask and d3.symbol APIs combined on a full-window SVG canvas.

Tthymdi

80% match