Visualizing Distributions

100%

Visualizing Distributions

✓ Published0🌍 Public

Last edited Jul 15, 2016

Created on Jul 15, 2016

This example compares four chart types for visualizing one-dimensional distributions. It first displays a swarm plot and a pile plot, which use a force-directed layout to position individual data points without overlap, in this case 700 values generated from a log-normal distribution. The example then shows a histogram, constructed using the `d3.layout.histogram()` function to bin the data, and a boxplot, which uses `d3.scale.quantile()` to compute summary statistics. The swarm and pile plots are built using the `d3.forceChart()` plugin from the `force-chart.js` library.

AI-generated description

A few ways to visualize 1D distributions.

Swarm and pile plots show all the data points but can't be used when there are a lot of data points. Histograms and boxplots work for any number of data points since they are visualizing summary statistics. Histograms provide more information than a boxplot. Boxplots fit in small spaces, making them nice for comparing many distributions side-by-side.

Other chart types for 1D distributions: violin plot, kernel density, empirical CDF.

The d3.forceChart() plugin is used for the swarm and pile plots; d3.layout.histogram() for the histogram; d3.scale.quantile() for the quartile summary statistics used in the boxplot.

forked from <a href='http://bl.ocks.org/armollica/'>armollica</a>'s block: <a href='http://bl.ocks.org/armollica/0f28622e38434b04907d768df6cec684'>Visualizing Distributions</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

A3 - Visualizing Distributions using P5

This example visualizes distributions using three interactive P5.js plots: a histogram, a box plot, and a strip plot, each embedded as separate VizHub links. The histogram displays the frequency of numeric values across bins, the box plot summarizes the data’s median, quartiles, and outliers, and the strip plot shows individual data points along a single axis. The visualizations use P5.js for canvas rendering and drawing shapes, with data organized into arrays and processed for statistical summaries. The page is built with plain HTML and CSS links, referencing external VizHub projects for each plot.

DDuc Pham

74% match

Loading thumbnail…

Untitled

This example shows the distributions of two variables as overlaid histograms, enabling visual comparison of their frequency shapes. The code uses d3.csv to load a dataset, then d3.histogram with 40 bins to compute counts per range for each variable. Bars are rendered as SVG rectangles with semi-transparent fills, while d3.scaleLinear and d3.axisBottom/axisLeft construct the axes. A handmade legend uses circles and text to distinguish the two series.

Zzoniyac

73% match

Loading thumbnail…

2d to 1d binned chart

This interactive visualization lets viewers collapse a two-dimensional scatterplot of nine colored circles into one-dimensional histograms along either the x-axis or y-axis, or retain the full 2D layout. Buttons trigger animated transitions where circles bounce into their respective bins, which are delimited by dashed reference lines. The code uses d3.v4’s SVG rendering, `d3.scaleQuantize` for positioning, and `d3.histogram` to bin data by chosen coordinates. A custom `transition` with `d3.easeBounceOut` and 500–750ms durations animates the morph, while `d3.scaleOrdinal` assigns distinct fill colors to each point.

PPatrick Wojda

72% match

Loading thumbnail…

Untitled

This example shows the distribution of two variables as overlapping histograms, with semi-transparent bars in teal and dark purple to reveal how their ranges compare. The visualization is built with D3.js v4 and rendered as SVG, using `d3.histogram()` to bin the data and `d3.scaleLinear()` for the axes. The code loads a CSV file, filters it by a `type` column, and draws both series on a shared x-axis while scaling the y-axis to the maximum bin count. A handmade legend identifies the two variables.

JJens Grochtdreis

71% match

Loading thumbnail…

Untitled

This example visualizes the distribution of a single numeric variable using a histogram with 70 bins. The code loads data from a CSV file, applies d3.histogram to compute bin counts, and renders bars with d3.scaleLinear axes. Bars below a threshold of 140 are colored orange, while others are teal, with a dashed line and label marking the split. The visualization is built with d3.v4, rendered as SVG within a React framework, and uses d3.axisBottom and d3.axisLeft for the axes.

Aansnejib2468

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

71% match

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

71% match

Loading thumbnail…

Charts, Charts, Charts

This visualization displays four distinct chart types side by side: a doughnut chart, bar chart, radar chart, and pie chart. Each chart presents a different dataset, such as airline passenger numbers, player skill ratings, and EU population figures. The code uses Chart.js 2.8.0 for rendering all charts onto canvas elements, while D3.js v7 handles loading CSV data from a GitHub gist. The bar chart and pie chart use hardcoded arrays, but the doughnut chart demonstrates fetching and parsing external CSV data.

Ddevvansh1997

70% match