RGB color theory

100%

RGB color theory

✓ Published3🌍 Public

Last edited Feb 18, 2020

Created on Feb 18, 2020

Five overlapping semi-transparent squares demonstrate RGB color theory by mixing red, green, and blue primaries in various pairings to produce yellow, cyan, and a central white region. The React components `MyRect` and `MyCircle` render SVG rectangles with fixed opacity, positioned via translation transforms. Built with React 16.12 and D3 v5, the example uses static JSX coordinates rather than data-driven layout.

AI-generated description

Smiley Face Part I (with React)

MIT Licensed

Similar vizzes

Loading thumbnail…

RGB color theory

Three overlapping semi-transparent red, green, and blue squares form the classic RGB color-mixing diagram, revealing secondary colors where they intersect. The React components `MyRect` and `MyCircle` render SVG rectangles with configurable fill, opacity, and positioning, while D3 v5 supplies the scaling and layout logic in the background. Static SVG shapes are composed in a React component tree, with each square’s blend determined by a fixed opacity value of 0.9.

NNita

94% match

Loading thumbnail…

RGB color theory

Three overlapping translucent squares in red, green, and blue demonstrate RGB color theory through additive color mixing. Rendered as React components with SVG circles and rectangles, the visualization uses `MyRect` and `MyCircle` exports from `exports.js` to position three 250-pixel squares at offsets from the center of a 960×500 viewport with 0.9 opacity. D3 v5 sets the SVG dimensions while React 16.12 manages component rendering into the `#root` element.

NNita

94% match

Loading thumbnail…

RGB color theory

This example visualizes RGB color theory by stacking four semi-transparent rectangles—red, green, blue, and yellow—in a centered cluster to show how primary colors blend into secondary hues through overlap. Built with React and D3 v5, it uses reusable `MyRect` SVG components defined in a separate exports file. Each rectangle is positioned with explicit x/y coordinates and an opacity of 0.7, allowing the overlapping intersections to reveal mixed colors like cyan and magenta. The static SVG scene demonstrates subtractive color mixing without interaction, focusing purely on the visual result of layered transparency.

NNita

91% match

Loading thumbnail…

Rectangles coordinates when translated

Five semi-transparent squares arranged around a common center demonstrate how SVG translation affects a rectangle’s coordinate system. A red, green, blue, and yellow square sit at the cardinal offsets from the origin, while a magenta square is centered at half the rectangle’s width and height. Using React with D3 v5, the `<g>` element’s `transform` attribute shifts all children via `translate(480,250)`. The code defines reusable `MyRect` components, passing explicit `xPos` and `yPos` props, and renders them into an SVG with a light gray background.

NNita

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

77% match

Loading thumbnail…

Trying Squares

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.

Ddumbdataguy@gmail.com

76% match

Loading thumbnail…

xy co-ordinates

This example shows a static arrangement of SVG shapes, including red rectangles and circles, positioned at fixed coordinates on a gray background. It demonstrates how React components render SVG elements using the `MyRect` custom component, which returns a `<rect>` element with position, size, fill, and opacity props. The visualization uses React 16 and D3 v5, with circles drawn directly inside an SVG container at varying x-coordinates based on an array mapping. The code defines the canvas dimensions and centers, but the displayed geometry remains fixed rather than interactive or data-driven.

NNita

74% match

Loading thumbnail…

Rendering data with React

This example renders a flat, 960-pixel-wide color bar from a CSV of CSS named colors. It shows how React’s declarative component structure can replace manual SVG or HTML generation for D3-loaded data. The `App` component uses `useState` and `useEffect` to fetch the remote CSV via D3’s `csv` utility, then maps each row to a `<div>` whose `backgroundColor` is set from the `RGB hex value` column. Rendering is done through React 18’s `ReactDOM.render`, producing a simple stacked sequence of colored strips.

NNana Kwame

74% match