Trying Squares

100%

Trying Squares

✓ Published0🌍 Public

Last edited Nov 21, 2023

Created on Nov 21, 2023

A grid of fifteen colored rectangles renders a fixed dataset of five values repeated three times, with each rectangle’s width proportional to its value and its fill assigned a random RGB color via the custom `getRandomColor` function. The React component uses `d3.sum` to compute total width and `d3.selectAll` to append SVG `rect` elements, while the `FaceContainer` wrapper translates the group into the SVG canvas. D3 v7 and React 18 combine to generate the static layout without interaction.

AI-generated description

Half way to smile face

MIT Licensed

Similar vizzes

Loading thumbnail…

squares

This example generates a grid of 18 faces, each rendered as a simple SVG composition of a square background, two circular eyes, and an arc-shaped mouth. The faces are created using React components, with random values for stroke width, eye offset, and mouth width applied per instance. The visualization relies on D3 v7 for generating the mouth path via `d3.arc`, and uses a fixed grid layout from `d3.range` to position the repeated face elements.

FFloweringDeathStar

83% match

Loading thumbnail…

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

A grid of overlapping squares spirals outward from the center of the canvas, each square's size, stroke thickness, and color modulated by a simple algebraic sequence. The visualization uses React to define a custom SVG component, generating 190 squares with dynamically computed properties. D3.js selects the SVG canvas and appends a group for layout, while the React component maps an array of calculated values to render each square with a drop-shadow filter and randomized RGB stroke colors. The result is an abstract composition of layered geometric forms.

NNita

82% match

Loading thumbnail…

A square module

The visualization displays two identical square modules positioned side-by-side on a gray background, each composed of five semi-transparent colored rectangles arranged in a grid pattern. The code uses React components to render SVG elements, with `MyRect` and `MyCircle` defined as reusable React functions. D3.js v5 is included in the HTML but not actively used in the rendering logic. The modules are translated using SVG transform attributes, with each rectangle given specific x and y positions, dimensions of 200 by 200 pixels, and an opacity of 0.8.

NNita

80% match

Loading thumbnail…

Hello HTML

A grid of 70 randomly generated faces fills the viewport, each face rendered as an SVG composed of a yellow background circle, two eyes, and an arc-based mouth. The React components `Face`, `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth` structure the drawing, while D3’s `range` generates the face count and its `arc` helper creates the mouth path. Each face varies in eye position, eye radius, and mouth dimensions via `Math.random()` calls, producing a playful, non-repeating pattern. The example demonstrates combining React’s component model with D3’s utility functions for SVG generation.

MMatty Danbury

80% match

Loading thumbnail…

Face1

A grid of thirty cartoon faces, each rendered as an independent SVG component, demonstrates how React composes reusable visualization elements. Each face uses D3’s `arc` generator to draw a mouth with a randomized arc angle and radius, while static SVG circles form the background, eyes, and outer stroke. The faces vary randomly in eye size, eye offset, mouth radius, and mouth width, all generated by `Math.random()` within fixed ranges. The code uses React 17, D3 v6, and SVG within a `FaceContainer` that translates a group to each face’s center.

TTung Pham

80% match

Loading thumbnail…

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

A grid of randomly sized and colored squares, each with a thin contrasting outline, fills the viewport in an overlapping, chaotic arrangement. The squares are generated from a derived formula that calculates their positions and dimensions, while their stroke widths and RGB color values are randomized. Built with React and D3 v7, the visualization uses SVG `rect` elements and applies a drop-shadow filter for depth. The data is synthetic, computed directly in the React component rather than loaded from an external source.

NNita

80% match

Loading thumbnail…

Hello HTML

A grid of 18 randomly generated cartoon faces demonstrates how React components can compose SVG primitives with D3-generated paths. Each face uses the reusable `Face` component, which assembles a yellow `Head` circle, two `Eyes` circles, and a `Smile` path created via `d3.arc()` with randomized inner and outer radii. Face features vary per instance through props like `eyeOffSetX`, `stkWidth`, and `smileRadius`, while `ReactDOM.render` places all faces into the DOM. The example highlights mixing declarative React state with D3’s arc generator for parameterized visual output.

JJohn Lewis

79% match

Loading thumbnail…

Hello HTML

This example shows a grid of 18 randomly generated cartoon faces, each composed of SVG circles and arcs. Built with React components and D3’s arc generator, the faces vary in eye position, eye radius, mouth radius, and mouth width. The background circle’s fill uses a random HSL color, and React renders each face inside a shared SVG container. The layout is static, with no interaction or animation.

SSrividya Panchagnula

79% match