Math.random()

100%

✓ Published0🌍 Public

Last edited Jul 29, 2017

Created on Jul 25, 2017

D3.js v4 visualizes the distribution of `Math.random()` by sequentially placing 500 red circles on an SVG canvas, one every 5 milliseconds via `setInterval`. Each circle’s x-coordinate equals the random result and its y-coordinate uses another random value, then a 300-millisecond transition fades its color to black and shrinks its radius, revealing the uniform clustering pattern across the plot.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/c582edefdc782701f00bc11c6fe0d3ae'>fresh block</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Uniform Random

A grid of 3,000 circles appears one by one at random positions across a 960×500 SVG canvas. Each circle starts with a radius of zero and animates outward to a radius of two pixels via D3's `transition.attr`. The animation uses `d3.timer` to append ten new circles per frame, driven by a custom `uniformRandomSampler` function that returns `[Math.random() * width, Math.random() * height]` coordinates. This demonstrates a simple, lightweight approach to generating and animating random scatter points with D3 v3.

Mmbostock

79% match

Loading thumbnail…

Circles with Math.random and fill with jsx

This example displays a scatter of small circles generated from random positions. Each circle’s vertical coordinate comes from `Math.random()`, while its horizontal position and color are derived from an array of sequential numbers. The visualization uses React to render an SVG, mapping over a precomputed array to create circle elements. The code explicitly uses `Math.random()`, React’s `ReactDOM.render`, and JSX inside an `<svg>` container with a `g` transform, producing 201 circles with RGB fills based on their array index.

NNita

78% match

Loading thumbnail…

random generator

Ten randomly positioned orange circles on a grey scatter plot animate to new coordinates whenever a “change data” button is clicked. The circles pulse by expanding and contracting their radius, and their fill color briefly shifts to red during the transition. Built with React and D3 v7, the visualization uses `d3.scaleLinear` for axes, `d3.randomUniform` for generation, and chained `transition` calls with an `easeSin` easing function. All rendering is SVG with animated updates.

Bbart

77% match

Loading thumbnail…

Random Digit Dice

This example visualizes random digit generation as a dice-rolling game. A grid of 20 circles represents possible outcomes, and clicking the Play button randomly selects a digit (0-9), coloring the corresponding circles orange. The code uses D3.js v5 selection methods like `d3.select` and `attr` to update circle fills. A Reset button restores all circles to black. The visualization renders as an SVG with IDs for each circle, and the random number logic is implemented in plain JavaScript using `Math.random()`.

SSreenivasulu

76% match

Loading thumbnail…

D3: Scatterplot!

This interactive scatterplot displays 50 random data points on Cartesian axes, with each circle colored blue or red depending on whether its x-coordinate falls in the left or right half of the plot. Clicking the “Randomize” button generates a fresh dataset and smoothly animates the points, axes, and color updates over two seconds. The visualization is built with D3 3.5.5, using the `d3.scale.linear`, `d3.svg.axis`, and `transition().duration(2000)` APIs, and renders entirely as SVG. The code derives from Scott Murray’s examples, forked from earlier gists by anonymous and jalapic.

MMissHanJ

76% match

Loading thumbnail…

sin circle

The visualization plots 50 randomly generated points as circles within an SVG canvas, using the `d3.select` API to append an `svg` element and a `g` group. Each circle's x-position is a random value `a`, its y-position is `Math.sin(a*Math.PI*2)/2+.5` (mapping a sine wave to the vertical range), and its radius scales with a third random value `c`. The code directly uses the `d3.v4` library's chainable methods like `attr` and `append` to render the circles onto the `#canvas` container.

ZZhengyan Yu

76% match

Loading thumbnail…

A simple rectangle

This example shows a set of circles moving randomly within an SVG canvas, with their positions and radii changing every 500 milliseconds. The visualization uses D3.js version 3 to generate random data points and animate the circles through the `transition()` API, while CSS styles define the circles’ blue fill with partial opacity and red stroke. The animation runs continuously via `setInterval`, creating an ever-shifting pattern of overlapping translucent circles.

JJn1532

76% match

Loading thumbnail…

Fork of Random Circles

This example shows a field of 50 randomly placed circles that drift continuously across the screen through a series of small random steps. Each circle’s position updates on every tick of a d3.timer, while the SVG attributes for cx and cy are rebound to reflect the changing data. The visualization uses D3 v6 for selection, data binding, and animation, with circles styled in steelblue via a CSS class. A React wrapper is present, though the core rendering and movement are handled entirely by the D3 code in circles.js.

Mmbooch22

75% match