Distributions 3

100%

Distributions 3

✓ Published0🌍 Public

Last edited Dec 1, 2015

Created on Dec 1, 2015

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.

AI-generated description

Recreation of wikipedia's gamma 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>

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

Similar vizzes

Loading thumbnail…

Non-negative Distributions

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.

SSpaceActuary

78% match

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

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

65% match

Loading thumbnail…

Sample Distribution (Histogram/Kernel/CDF)

MMorganhaoyu

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

64% match

Loading thumbnail…

Histogram

This histogram visualizes the distribution of a numeric variable, grouping observed values into discrete bins and displaying their frequencies as vertical bars. It uses the D3.js library, specifically leveraging `d3.histogram` and `d3.scale` APIs to compute bin ranges and map data to screen coordinates. The rendering relies on SVG paths generated from the binned counts, with axes and labels drawn via D3’s measurement and tick utilities. The dataset originates from a GitHub gist, and the code operates entirely in the browser without external data files.

Mmbostock

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

62% match

Loading thumbnail…

Statistical Summaries

This example visualizes statistical summaries of three datasets, displaying each group’s count, minimum, quartiles, median, maximum, and mean. Each row shows a box plot of the parameter distribution alongside the sample count, with values formatted to three decimal places. Built with D3.js and jStat, the SVG chart uses a custom `ParamLevelSummary` function and `MinimalBoxPlot` to render the summaries, reading data from a local CSV file.

SSpaceActuary

62% match