Let's make some random bricks and practice basic looping

100%

Let's make some random bricks and practice basic looping

✓ Published1🌍 Public

Last edited Sep 24, 2020

Created on Sep 22, 2020

A single gray rectangle is drawn on an SVG canvas, using D3 v6 to append the shape and set its height and width attributes. The example demonstrates the basics of D3 selection and SVG creation within a React framework, serving as a starting point for practicing loops and generating random elements. The code relies on `d3.select` and the SVG `rect` element, with no data binding or animation present.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Let's make some random bricks and practice basic looping

A random field of 1,000 overlapping rectangles forms a dense, colorful brick-like pattern. The example demonstrates basic looping and random attribute assignment using D3 v6 within a React framework. Each iteration appends an SVG `rect` element, varying its width, height, and fill color through `Math.random()` and a conditional color chooser that selects red, green, or blue. The `select` API targets the SVG container, while `attr` with a dynamic `transform` rule staggers rectangles horizontally, creating a layered, chaotic composition.

MModalMBS

92% match

Loading thumbnail…

Fork of Fork of Random circle shapes with react July 4,2022 -2

This example renders a grid of 200 randomly positioned and colored squares, each with a thin, semi-transparent stroke, onto an SVG canvas within a React application. The code uses ReactDOM to inject a component into the page, while D3.js is loaded solely for its selection and SVG creation utilities, though the actual drawing is handled by React's JSX elements. Each square’s size, color, and position are derived from a simple arithmetic series and the `Math.random` function, producing a non-repeating, abstract pattern of shapes.

NNita

77% match

Loading thumbnail…

Fork of Fork of Fork of Random circle shapes with react July 4,2022 -2

This example shows a dense field of randomly positioned, semi-transparent rectangles and circles rendered with React and SVG, each with randomized stroke widths, opacity, and dynamically generated RGB colors. The layout is produced by a fixed array of 200 values calculated from a simple arithmetic formula, mapped through React components to create the visual elements. Using D3 v7 only to select the body and append a base SVG, the code primarily relies on React’s `ReactDOM.render` and custom components like `My_circle` to generate the shapes, with no interactive or animated behavior.

Qqwxyyigesm

76% match

Loading thumbnail…

Random Path

This example displays a dense cluster of overlapping circles and polylines drawn across a gray SVG canvas. The visualization uses React to render a grid of 10x10x10 elements, each generating random coordinates for its circle and path positions. Colors are derived from the loop variable, creating a gradient of reds and grays. The code relies on React’s `ReactDOM.render` and JSX to construct the SVG, with no external data source or animation, resulting in a static, chaotic composition of geometric primitives.

NNita

76% match

Loading thumbnail…

Fork of Random circle shapes with react July 4,2022 -1

A grid of randomly positioned circles and rectangles fills an SVG canvas, each shape rendered with semi-transparent strokes and varied colors derived from mathematical calculations. The visualization uses React components to generate 190 shape elements, with each circle’s radius fixed while rectangles receive computed dimensions. The code combines React 16.13.1, D3 v7 for SVG manipulation, and direct DOM rendering through ReactDOM, with random stroke widths, colors, and opacity levels creating an abstract, generative composition.

NNita

76% match

Loading thumbnail…

Fork of Fork of HTML Starter

This example demonstrates basic SVG shapes created with D3.js and vanilla JavaScript, rendering two circles and three rectangles of varying heights on a blank canvas. The code uses D3’s `select` to append the shapes to an SVG element, with an array `myData` supplying rectangle heights. It also queries all `rect` elements via `document.querySelectorAll` and attaches a click handler that logs a message to the console. The page is styled with CSS, including a large centered greeting and red circles.

HHOURPRIMERA@GMAIL.COM

75% match

Loading thumbnail…

Fork of Fork of Random square shapes with react July 4,2022 - 2

A collection of 190 nested square outlines and small circles rendered in SVG, colored with random RGB values and positioned along a logarithmic curve derived from the input number. The React app maps an array of calculated values to custom `My_circle` components, each drawing a square with a dynamic stroke width and a static drop-shadow filter. Using React 16 and D3 v7 solely for SVG selection and attribute setup, the visualization applies `Math.random()` for stroke thickness and color channel values, with the viewport set to 960×500 pixels.

NNita

75% match

Loading thumbnail…

D3 SVG Primitives

This example demonstrates basic SVG shape primitives rendered with D3.js in a React environment. It displays rectangles, circles, ellipses, and lines with static styling, showcasing fundamental SVG element creation. The code uses D3 version 4 selections to append shapes directly to an SVG canvas, loading data from a CSV file for positioning. A second version uses `d3.scaleLinear` and `d3.interpolateBlues` to map data values to circle radii and fill colors, with mouseover and mouseout events controlling opacity to highlight individual circles.

FFahimeh Saleh

75% match