This is so cool "Map function inside Map function"

100%

This is so cool "Map function inside Map function"

✓ Published1🌍 Public

Last edited Feb 25, 2020

Created on Feb 25, 2020

Forked from This is so cool "Map function inside Map function"

This example shows a dense scatter of colored circles rendered as an SVG inside a React application, where the circles overlap and vary in position and hue based on computed values. The visualization uses React’s `map` function nested twice to iterate over an array of numbers from 0 to 100, generating thousands of circle elements with random coordinates and RGB fill colors. Rendering relies on ReactDOM and raw SVG elements, with no external charting library, demonstrating how pure React can handle data-driven SVG generation.

AI-generated description

These are the circles created with react.

MIT Licensed

Similar vizzes

Loading thumbnail…

This is so cool "Map function inside Map function"

This example produces a dense field of overlapping circles inside an SVG element. It shows how React’s `map` function can be nested to generate a 101x101 grid of points, where each circle’s position, fill color, and stroke are derived from the outer and inner loop indices combined with `Math.random`. The code uses React’s `ReactDOM.render` to place the SVG into the DOM. The resulting composition is a chaotic, colorful scatter of semi-transparent circles with varied strokes, driven purely by the nested mapping logic.

NNita

94% match

Loading thumbnail…

This is so cool "Map function inside Map function"

A React application renders an SVG scatterplot of 101 circles, where each circle's position and color derive from nested map functions iterating over an array of integers from 0 to 100. The outer and inner `Array.map` calls generate coordinates using `Math.random()` multiplied by the array value, producing a randomized distribution. Circle radius is fixed at 5, with fill and stroke colors computed from the index, using React's JSX syntax to create SVG elements. The code relies on React 16.10 and ReactDOM to mount the visualization into the DOM.

Ggrateful4music@hotmail.com

93% match

Loading thumbnail…

This is so cool "Map function inside Map function"

This example visualizes a grid of randomly positioned circles, where each circle’s placement and color are derived from nested `map` functions iterating over an array of integers from 0 to 100. Using React and ReactDOM, the SVG canvas (960x500) renders over 10,000 circles with varying radii, fill colors (based on RGB values from the loop index), and opacity. The code relies on React’s JSX syntax inside `index.js`, with SVG elements generated dynamically via nested `A.map()` calls, producing an emergent, colorful scatter pattern. The rendering is static, using no external libraries beyond React and React’s DOM bindings.

NNita

93% match

Loading thumbnail…

This is so cool "Map function inside Map function"

This example generates a dense scatter of overlapping circles across an SVG canvas, with each circle’s position, fill color, and stroke determined by nested `Array.map` calls over a fixed array of numbers from 0 to 100. It uses React and ReactDOM to render the circles, computing `cx` and `cy` coordinates via `Math.random` multiplied by the array values, producing a chaotic, colorful grid-like pattern. The fill and stroke colors are derived from the same array indices using template literals, and all circles share a constant radius of 5 pixels.

NNita

93% match

Loading thumbnail…

This is so cool "Map function inside Map function"

This example generates a field of 100 randomly scattered circles, each with a size and color derived from its position in a nested loop. The visualization uses React to render an SVG element, with the `map` function applied twice to iterate over an array of numbers, producing overlapping circles that appear scattered across the canvas. The code employs `Math.random` to introduce variability in each circle's x and y coordinates, while the `fill` attribute computes an RGB color value based on the current loop index. The example showcases nested array mapping within a React component to create generative art.

NNita

92% match

Loading thumbnail…

"Map function inside Map function"

This example shows a grid of colored squares scattered across an SVG canvas, with each square’s position and color determined by nested JavaScript `map` functions over an array of integers from 0 to 100. The inner `map` iterates over the same array inside the outer `map`, generating a square for each combination of coordinates, with random placement and RGB fill values derived from the loop index. Built with React and ReactDOM, the visualization uses SVG `<rect>` elements, with rendering handled via the production React build.

NNita

87% match

Loading thumbnail…

React Starter

This example displays a dense scatter of overlapping circles on a grey SVG canvas, with positions and fill colors randomly derived from nested array mappings. Built with React and ReactDOM, the visualization renders three levels of map operations over a numeric array, generating circles with radii of 10 pixels and RGB values computed from the loop index. The SVG output uses the `id='svg'` element with a fixed 960×500 viewport, while color intensity scales with the square of the array value.

NNita

84% match

Loading thumbnail…

Fork of This is so cool "Map function inside Map function"

The visualization displays a dense field of colored ellipses scattered across a 960-by-500 SVG canvas. It shows nested React `map` functions iterating over an array of integers from 0 to 100, generating multiple ellipse elements at random positions via `Math.random`. Each ellipse uses a red-tinted fill and stroke derived from the loop variable, with opacity set to 0.9 and a thick 40-pixel stroke. The React and ReactDOM libraries render the SVG directly from the component.

RRajayaswanthvarmavegesna

84% match