Skip to main content
100%

factorcircles

✓ Published0🌍 Public
Aaknauft
Last edited Nov 2, 2017
Created on Nov 2, 2017

This visualization represents a positive integer as nested circles, where each factor of the number determines how many smaller circles are arranged around the circumference of a parent circle. The recursive algorithm draws one level per prime factor, with the circle radius shrinking according to the factor’s value. Users can input a custom number, toggle outlines, highlight prime numbers with red fills, or reverse the nesting order. Built with p5.js, it uses the canvas API for drawing and the `createInput` and `createButton` DOM elements for controls.

AI-generated description

Similar vizzes

Loading thumbnail…

Dances with Factors

Dances with Factors animates the prime factorization of integers by arranging circles in nested geometric patterns. Each factor contributes a subgroup of circles, and transitions between consecutive integers show how the arrangement evolves. The visualization is generated from JavaScript that computes prime factors and coordinates for every point, using D3 v3 selections and transitions to draw SVG circles on a linear scale. Controls let the user step through numbers sequentially, pause, or search for a specific value.

TThanaporn-sk
72% match
Loading thumbnail…

The Maximum number in prime factorization

This example visualizes the largest prime factor of each integer from 2 to 104, plotting circles at coordinates where the x-axis represents the integer and the y-axis is 500 minus ten times that factor. An SVG line chart connects these points, revealing the scattered pattern of maximum prime factors. The code uses D3 v6 to bind the data array to circles via `selectAll` and `data`, positions them with `attr`, and draws the connecting path using `d3.line()`. Each circle responds to `mouseover` by logging its coordinates to the console.

MMTR
70% match
Loading thumbnail…

P5JS Starter

This example displays a recursive fractal pattern of concentric circles that shrink and branch outward symmetrically from the center of the canvas. The sketch uses the P5JS library with a setup function that creates a 960x500 canvas and disables animation via noLoop(), while the draw function calls drawCircle to render the structure. Each circle’s fill color darkens progressively with recursion depth, computed from the level parameter. The code relies on P5JS’s ellipse and fill methods, with recursive calls splitting each circle into two smaller ones.

MMatthew J. Oldach
66% match
Loading thumbnail…

181202_05_Nested circles

A grid of nested circles and rectangles animates into place on an SVG canvas. The visualization builds a parametric layout of 91 cells, each containing concentric circles with decreasing radii and a grey rectangle that expands during the transition. The code uses D3 v5 selection and range modules to generate and position elements, with the `transition().duration()` API animating the circles from the center outward and rectangles from zero size. Hover effects change fill colors to black.

LLudovicGouverneur
65% match
Loading thumbnail…

Fork of Circles with D3

This visualization generates a dynamic abstract composition of nested rectangles and circles. The code uses D3.js (v7) to create an SVG canvas, then recursively draws a spiraling sequence of colored rectangles based on the golden ratio. Each rectangle is filled with a randomly generated hex color, while the background uses a light green tint. The rendering relies on D3's `select`, `selectAll`, `data`, `join`, and `append` methods to manage SVG elements and dynamically resize the canvas to fit its container. The final image resembles a colorful geometric fractal spiral.

11807589994@qq.com
65% match
Loading thumbnail…

Circles with Animation

Eleven concentric circles pulse sequentially from a central point, expanding and collapsing in three alternating colors: red, green, and yellow. Each circle animates its radius from zero up to a multiple of its index times ten pixels, then shrinks back. The visualization uses D3 v5 selections with chained `transition().duration()` calls to animate SVG `circle` elements, setting radius, position, fill, and stroke attributes. The data array of indices 0 through 10 drives the size progression, while CSS opacity at 0.1 gives the overlapping circles a translucent, layered effect.

NNita
65% match
Loading thumbnail…

Processing Starter with P5JS

This example presents a recursive fractal pattern of circles, rendered on a 960 by 500 pixel canvas using the P5JS library. The sketch’s `draw()` function calls `drawCircle()` six times, progressively halving the radius and shifting the x-coordinate to branch into two smaller circles per level. Each circle’s fill color is calculated by mapping the recursion level to a grayscale value, creating a subtle gradient across the nested shapes. The P5JS functions `createCanvas()`, `noLoop()`, and `ellipse()` structure the static visualization.

CCurran Kelleher
64% match
Loading thumbnail…

Circles

A set of 40 concentric circles radiates from the center of an SVG canvas, each stroke drawn in solid red with 50% opacity and a 10-pixel width. The circles grow from a minimum radius of 20 to a maximum of 80, incrementing linearly, while the outermost circle reaches a radius of 300. Rendered using React’s `ReactDOM.render` into a `div` root, the visualization maps an array of radii to `<circle>` elements, with the SVG dimensions fixed at 960 by 500 pixels. The code explicitly computes radius values in a loop, though the final array contains a single undefined element.

NNita
64% match