Skip to main content
SimilarExport ZIP
100%

RGB color theory

✓ Published2🌍 Public
NNita
Last edited Feb 15, 2020
Created on Feb 11, 2020

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.

AI-generated description

Smiley Face Part I (with React)

MIT Licensed

Similar vizzes

Loading thumbnail…

RGB color theory

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.

NNita
94% match
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
93% 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
90% 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
78% 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
76% 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…

Rendering data with React & D3

A radial burst of CSS named colors fills a 960 by 500 SVG canvas, with each color occupying an equal-angled slice emanating from the center. The visualization loads a CSV of named colors using D3’s `csv` utility, then employs D3’s `pie` and `arc` generators to compute the slice geometries. React 18 manages the state and renders the resulting SVG `path` elements, with each path’s fill set to the corresponding hex value from the dataset.

NNana Kwame
76% match
Loading thumbnail…

Rendering colors with react and D3

A full-screen color wheel renders all 148 CSS named colors from a CSV dataset, with each color occupying an equal arc around the center. The React app loads the data using `d3.csv`, then applies `d3.pie().value(1)` and `d3.arc()` to generate SVG path elements. Each path is filled using the `RGB hex value` column, creating a complete circular spectrum. The example demonstrates combining React state management with D3's data-joining and geometric layout functions.

Jjackcaldwellnichols
75% match