D3.js 教程

100%

✓ Published14🌍 Public

Last edited Nov 6, 2023

Created on Nov 6, 2023

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.

AI-generated description

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

Similar vizzes

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

92% match

Loading thumbnail…

D3 beginning

This example shows a grid of thin horizontal and vertical rectangles that intersect to form a visible weave pattern, with a circular region in the center where the crossing lines appear to invert in contrast. The visualization uses D3 v6’s `select` and `range` functions to generate 100 rectangles in each direction, appended as SVG elements across the full window width and height. Two SVG masks, each containing a rectangle and a circle, selectively control which parts of the horizontal and vertical lines remain visible, creating the central circular effect against a dark background.

AAleOG

81% match

Loading thumbnail…

first D3

This example shows a fullscreen grid of 200 vertical rectangles, each a random color, animating upward indefinitely. The rendering approach uses raw SVG elements created via the `document.createElementNS` API, with styles set directly on each rectangle. The animation relies on the Web Animations API (`element.animate`) to translate each rectangle along the Y-axis with randomized durations and infinite iterations. No external JavaScript libraries are used; the page is a minimal HTML document with inline CSS and JavaScript, demonstrating basic D3-free DOM manipulation for a generative visual effect.

GGusnaRWX

81% 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

80% match

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…

vol

This visualization displays a grid of 20 colorful rectangles arranged in a responsive layout, where each rectangle’s height and width are fixed but their positions depend on the window width. The SVG renders on a warm beige background, with each shape colored by cycling through a palette of six hues based on the rectangle’s index. The code uses D3 v6 to select the chart container, append an SVG element, and bind data via the `.join()` method. The number of columns is computed from the available width, creating a dynamic arrangement that adapts to the viewport.

Vvivianaaai@qq.com

80% match

Loading thumbnail…

Reproduction with D3

The visualization draws a grid of overlapping horizontal and vertical bars across the entire viewport. Two sets of 100 rectangles each are created using D3's selection and join operations, with dimensions tied to the window size. Masking via SVG circle masks creates a central circular window that reveals alternating black and white stripes. The code uses `d3.select`, `d3.range`, and chained SVG attribute setters within a React-free HTML page.

Aahora

79% match

Loading thumbnail…

D3 first steps

This example generates a full-screen grid of 100 vertical and horizontal bars using D3 selections and joins, then applies two circular SVG masks to create a striking cross-hatch pattern. Built with a React-wrapped D3 v6 setup, the code uses `select`, `range`, and `join` to bind data to rectangles, while the masks—one with a white circle on black, the other inverted—reveal and hide intersecting lines around a central focal point.

Ccyriltoneatto965

79% match