Normal distribution

100%

Normal distribution

✓ Published0🌍 Public

Last edited Jul 29, 2017

Created on Jul 29, 2017

This example visualizes the normal distribution by animating the progressive accumulation of 500 random samples drawn from three distinct normal distributions with different means and standard deviations. Each sample appears as a colored circle (blue, red, or green) that initially starts large and fades to a smaller, semi-transparent point, revealing the bell-shaped density of each distribution over time. The visualization is built with D3.js v4, using its random number generator `d3.randomNormal` to produce the data and SVG circles with animated transitions for the rendering effect.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Distribution Scatter 1

This example visualizes a dynamic scatter plot of 500 values sampled from a normal distribution using `d3.randomNormal`. Vertical rectangles represent each data point, positioned along the x-axis and layered with low opacity. Every five seconds, the background and foreground rectangle colors transition to a new palette, cycling through six predefined color schemes. The visualization is built with D3 v6, rendered as SVG, and uses `transition.attr` to animate color changes over one-second durations.

WWaseem Medhat

80% match

Loading thumbnail…

Normal Distributions

This example visualizes two normal distributions as filled, semi-transparent density curves overlaid on the same axes. It shows how the spread and peak of the distributions differ based on their standard deviations. The code uses D3 v4 with SVG rendering, and computes the probability densities using the `jStat` library’s `normal.pdf` function. Random data is generated by the custom `Random_normal_Dist` function, which samples quantiles from a mean and standard deviation. The `d3.line` generator draws the curves, and the horizontal axis is scaled with `d3.scaleLinear`.

EEfratVil

79% match

Loading thumbnail…

multimodal random

Three normal distributions appear as horizontal dot plots of 10,000 samples each: blue around 25, red around 75, and purple mixing both at equal probability. A purple histogram below aggregates the mixed distribution into 50 bins. Built with D3 v4, the example uses `d3.randomNormal`, `d3.histogram`, and linear scales, rendering SVG circles and rectangles from procedurally generated random data.

PPatrick Wojda

74% match

Loading thumbnail…

Math.random()

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.

ZZhengyan Yu

74% match

Loading thumbnail…

Visualizing Distributions

This example compares four chart types for visualizing a single data distribution: swarm plot, pile plot, histogram, and boxplot. Using d3.forceChart, the swarm and pile plots position individual data points with a force-directed layout, while the histogram aggregates counts into bins via d3.layout.histogram, and the boxplot summarizes quartiles using d3.scale.quantile. All charts render as SVG within a shared grid, sharing the same y-axis scale for direct comparison. The underlying data comes from 700 random log-normal values.

MMorganhaoyu

72% match

Loading thumbnail…

Distribution Scatter 3

Transparent rectangles in 45-degree rotation render the distribution of 500 samples from a Pareto distribution, each rectangle's width fixed at 25 pixels. Every five seconds, a palette randomly selects a background and foreground color pair, triggering `d3.transition` with 1000-millisecond durations on both the background `rect` and the foreground rectangles. The SVG animation cycles through six predefined color schemes, from teals to violets, while the rectangles maintain a 0.02 opacity. The visualization uses `d3.randomPareto` to generate data and `d3.selectAll` with `.enter()` to bind it to SVG elements.

WWaseem Medhat

72% match

Loading thumbnail…

mixed multimodal random 2d

This example shows a 2D scatterplot of 10,000 points, where the x-coordinate is sampled from either a normal distribution centered at 75 or one centered at 25, while the y-coordinate comes from a normal distribution centered at 50. The result is a clear bimodal cluster pattern. Using d3.v3 and the d3-random API, it generates random normal values, then maps them to SVG coordinates via a linear scale. The code appends red circles with radius 1 to the SVG canvas, rendering the distribution as a dense point cloud.

PPatrick Wojda

72% match

Loading thumbnail…

simple animation

This example demonstrates an interactive scatterplot of 1,000 randomly generated circles. The data is created on the fly and rendered as SVG circles within a full-window visualization. Using the D3.js library (version 7.8.5), the code applies linear scales to map random values to screen coordinates and circle radii. Hovering over a circle triggers a transition via the `transition` API, animating the circle to a new random position over one second with an elastic easing effect.

NNeeraj Kumar

70% match