Non-negative Distributions

100%

Non-negative Distributions

✓ Published0🌍 Public

Last edited Dec 14, 2015

Created on Nov 29, 2015

This example visualizes non-negative probability distributions, including gamma, lognormal, Pareto, and Weibull. It displays both probability density functions (PDFs) and cumulative distribution functions (CDFs) side-by-side, with each distribution represented by a unique color and animated via SVG. The code uses d3.js for scales, axes, line generation, and brushing, alongside jStat to compute distribution PDFs and CDFs. An interactive brush allows selecting a range on the x-axis, enabling dynamic exploration of the distributions. The visualization is built with Blockbuilder and rendered using SVG animations.

AI-generated description

Visualization of non-negative distribution plots in d3.

Powered using d3.js, jStat, and d3-legend.

Built with blockbuilder.org.

forked from <a href='http://bl.ocks.org/SpaceActuary/'>SpaceActuary</a>'s block: <a href='http://bl.ocks.org/SpaceActuary/a0d2efed63aeefce5cb0'>Distributions</a>

Similar vizzes

Loading thumbnail…

Distributions

Two side-by-side plots compare the probability density functions and cumulative distribution functions for six Gamma distributions with varying shape and scale parameters. The left panel displays PDF curves, while the right panel shows the corresponding CDFs, with a shared x-axis and distinct y-axes. The visualization is rendered as SVG using d3.js for chart construction, jStat for computing Gamma distribution values, and d3-legend to generate a color-coded legend identifying each parameter set. Data is sampled at 0.001 intervals across the distribution range to produce smooth lines.

SSpaceActuary

79% match

Loading thumbnail…

Distributions 3

This example recreates Wikipedia’s gamma distribution plots, showing both the probability density function (PDF) and cumulative distribution function (CDF) for a negative binomial distribution, parameterized as a Tweedie distribution. The left panel plots the PDF and the right panel plots the CDF for the same distribution, using two separate linear scales. The code uses D3.js to build the SVG chart and axes, jStat to compute the PDF and CDF values, and d3-legend to add a color-coded legend with the distribution’s parameters.

SSpaceActuary

78% 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

74% match

Loading thumbnail…

Sample Distribution (Histogram/Kernel/CDF)

This interactive tool visualizes the statistical distribution of a numeric dataset using multiple complementary representations: a histogram, kernel density estimate, cumulative distribution function (CDF), and a rug plot. Users can adjust histogram bin width and toggle between linear and log2 value scales, while enabling the CDF adds a secondary y-axis. The visualization renders with SVG, supports zooming via click-drag on the x-axis, and is animated with transitions. It uses D3.js for scales, layouts, and SVG manipulation, with data loaded from a JSON file.

MMorganhaoyu

73% match

Loading thumbnail…

Sample Distribution (Histogram/Kernel/CDF)

MMorganhaoyu

73% match

Loading thumbnail…

Normal distribution

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.

ZZhengyan Yu

72% match

Loading thumbnail…

Gist ed9f5cb822cdadb5216c

A normal probability density curve animates from a flat baseline into a bell-shaped distribution on click. Each click repositions the curve’s mean to the mouse’s x-coordinate, with the area under the curve filling pink while the outline stays black. The code uses jStat to generate PDF values across a fixed domain, then d3.svg.area and d3.svg.line with basis interpolation to draw smooth shapes. Transitions with `.delay()` and `.duration()` animate the path’s `d` attribute, and the svg’s click event drives the updates.

SSpaceActuary

72% 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

67% match