100%

Dances with Factors

✓ Published0🌍 Public

Last edited Feb 20, 2015

Created on Oct 4, 2016

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.

AI-generated description

Dances with Factors

bl.ocks.org link

Dances with Factors visualizes prime factorization of integers.

The fundamental theorem of arithmetic states that every integer greater than 1 is either prime itself or a product of prime numbers.

The project is created using D3.js.

Description

Dances with Factors is inspired by the creation of Stephen Von Worley, which in turn is based on the original idea by Brent Yorgey. Use the control widgets to explore prime factorization of various numbers! You might be interested to check out some cool numbers e.g. 243, 611, 700, 1024 :)

This visualization helps us track the prime factors that compose a given number. We can easily identify primes when we arrive to a simple circle (i.e. a prime cannot be composed of smaller divisors). We can also identify common patterns of smaller prime divisors e.g. 2, 3, 5

An excellent implementation of prime factorization through SVG recursion is provided by Jason Davies. Instead of a recursive approach, I decided to handle the problem through generating all relevant attributes of points i.e. x, y, and r. This allows me to provide a data-driven solution to the problem and allow D3 to handle the transitions on new and old points.

Files

index.html: Main HTML file.
draw.js: All D3 drawing logic is contained in this file.
factor.js: JS file containing logic to compute factors and prime factorization of integers.
style.css: stylesheet

Other Notes

Visualizations at larger numbers become less visible due to a fixed viewing dimension and decreasing point radius.
Some interesting visualizations include:

Similar vizzes

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

73% match

Loading thumbnail…

D3 Tutotial Video 5 Viz (using functions to separate code)

Fifteen circles orbit in a smooth, looping dance, their opacity pulsing in a rhythmic wave as they trace overlapping circular paths. The animation is generated using D3 v7, with the `select` and `range` functions creating and updating SVG circle elements. Position and opacity values for each frame are computed from trigonometric functions based on an incrementing time variable, with data binding handled through `.data()` and `.join()`. The visualization runs on a fixed 60 FPS interval, showcasing a simple procedural approach to generative animation.

CCasualWanderer20XX

66% match

Loading thumbnail…

D3 selection and Exploration

A collection of animated circles moves across the screen, their positions and sizes oscillating in a wave-like pattern over time. The visualization demonstrates dynamic data binding and updates in D3 v7, using `select`, `range`, and the `.join()` method to create and modify SVG circle elements at 60 frames per second. The animation is driven by `setInterval`, recalculating each circle's x-coordinate, y-coordinate, and radius based on sine functions that incorporate a continuously incrementing time variable.

DDonald Bagwell

66% match

Loading thumbnail…

D3 Selection Exploration - Functions

A dynamic scatterplot animates a set of circles, whose count, vertical position, and radius oscillate over time based on a sine function. The visualization uses the `select` and `range` functions from D3 to build and update SVG circles. The JavaScript code runs a 60 Hz interval, generating new data and joining it to the existing elements. The rendering is entirely SVG-based, with the animation driven by an internal timer.

Aajoua

66% match

Loading thumbnail…

D3 Selection Exploration

Fifteen circles undulate vertically in a sine-wave pattern, creating a rhythmic, animated wave across the browser window. The visualization demonstrates D3's data join and selection methods, where each frame generates new array data and updates the circles' positions. Using `d3.select`, `d3.range`, and the `.join()` pattern, the code binds fresh coordinates to SVG circle elements, which are animated every 60 milliseconds via `setInterval`. Rendering is done in SVG, with circles styled by radius and positioned absolutely by attributes like `cx` and `cy`.

CColin Frutschi

66% match

Loading thumbnail…

Fork of D3 Selection Exploration

A D3.js animation displays a set of circles that continuously move and change size, with their vertical positions and radii following a sine wave pattern over time. The visualization updates in real-time at 60 frames per second using a timer, generating 10 to 15 data points based on a sinusoidal function. The code creates and positions SVG circles using D3's selection API, specifically the `select`, `selectAll`, and `join` methods, while `range` and `scaleLinear` from the `d3` library generate numeric sequences. The circles are rendered as SVG elements, and the data is synthesized programmatically rather than sourced from an external dataset.

Vvsokhonglim

66% match

Loading thumbnail…

D3 Selection animation exercise

Fifteen circles oscillate in a sine wave pattern across the screen, with each circle’s radius enlarging as it descends and shrinks as it rises. The animation runs on a 60fps interval, updating positions based on time and index. Built with D3 v7, it uses `select`, `range`, and `join` to bind freshly generated data to SVG circle elements each frame.

Ppkdvalis

65% match

Loading thumbnail…

D3 Selection

Animated circles in navy float across the screen, their sizes and vertical positions oscillating smoothly in a wave-like pattern that changes over time. The number of visible circles also fluctuates rhythmically, creating a dynamic, generative composition. Using D3.js v6 with SVG, the code computes coordinates from trigonometric functions and a time variable within a `setInterval` loop. It employs the data-join pattern with `.selectAll`, `.data`, and `.join` to update circle attributes continuously, demonstrating D3's core selection mechanics in a responsive full-viewport canvas.

EEzhil-Kalai

65% match