Q-Q Plots

100%

✓ Published0🌍 Public

Last edited Jul 31, 2019

Created on Dec 20, 2012

Three Q-Q plots compare a dataset of worker response times against three theoretical distributions: uniform, Gaussian, and a mixture of three Gaussians. Each plot shows quantile pairs as black circles against a diagonal reference line, with animated transitions between datasets using `d3.qq` and `transition`. The code loads `turkers.json`, computes sample statistics, and renders SVG with D3 v3.

AI-generated description

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

q-3

A bar graph displays the distribution of percentages across ten food categories, from Fast Food to Meat. The chart uses D3 v7 to load data from a local CSV file and render the visualization as SVG. It employs `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for ticks. Interactive tooltips appear on mouseover, changing bar color via `select` and CSS transitions.

AArunVurukonda@my.unt.edu

66% match

Loading thumbnail…

Box Plots

This example displays a series of box-and-whisker plots summarizing speed measurements from the Michelson–Morley experiment, with each plot representing one experimental run. The visualization periodically randomizes the underlying data values, animating the transitions using D3's `transition` API over 1000 milliseconds. The charts are rendered as SVG, with the `d3.box` custom layout implemented in the included `box.js` file. The code uses `d3.csv` to load the morley dataset and `d3.scale.linear` for positioning, while outliers, medians, and whiskers update smoothly between randomization cycles.

Mmbostock

66% match

Loading thumbnail…

Fork of q3

This interactive scatter plot visualizes the relationship between trip distance and pickup hour, with color encoding for the day of the week. The visualization uses React and D3.js v5 to render SVG circles, implementing an interactive legend that highlights a selected weekday by dimming all other data points. Using `d3.scaleLinear` for axes, `d3.scaleOrdinal` for categorical color mapping, and `d3.csv` for loading the dataset, the chart supports hover-based tooltips via SVG `<title>` elements and dynamic filtering of the rendered marks.

DDonald Bagwell

65% match

Loading thumbnail…

Assignment 10: Fixed A3 box plot

This example presents a horizontal box plot of National Aviation System delay counts, drawn with D3.js v7 and rendered as SVG. It visualizes the distribution of delays through a box spanning the interquartile range, whiskers, median line, and steel-blue outlier circles. The chart starts its x-axis at zero for accurate proportional comparison, as noted in an annotation. Using `d3.csv`, `d3.quantile`, and `d3.axisBottom`, the code computes summary statistics and plots them. English annotations, created with the `d3-svg-annotation` library, label the origin, IQR, median, and outliers, while the data comes from a remote CSV file.

Hhxu51@usfca.edu

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

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

65% match

Loading thumbnail…

Visualizing Distributions

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.

BBBischof

64% match

Loading thumbnail…

Quicksort V

A visualization of quicksort on 100 elements, where each horizontal row represents the array state after a single swap and colored lines trace each element’s positional movement through the sorting process. The code uses d3.v3 with custom SVG path interpolators to render the straight and diagonal segments, and a cubehelix color scale to differentiate elements. Randomly shuffled data is generated with `d3.shuffle` and `d3.range`, and the quicksort algorithm is implemented manually to record swap operations.

Mmbostock

64% match