DEV Community: TianYi Zhang

What is a Histogram? A Complete Guide

TianYi Zhang — Sat, 08 Aug 2026 17:19:48 +0000

A histogram is a graphical representation that groups numeric data into intervals—called bins or class intervals—and displays the frequency (count) of observations in each bin as adjacent vertical bars. Unlike bar charts that compare categorical data, a histogram reveals the underlying frequency distribution of a continuous variable: its shape, spread, central tendency, and potential outliers. First introduced by statistician Karl Pearson in 1891, the histogram is one of the most fundamental and widely used tools in exploratory data analysis.

Key Terms

Term	Definition
Bin / Class Interval	An equal-width interval that partitions the data range. For example, 10–19 is a class interval with width 10
Frequency	The count of data points falling within a given bin. Taller bars indicate higher data density in that range
Bin Width	The width of each interval = upper bound − lower bound. All bins must be of equal width; otherwise bar areas mislead visual interpretation
Distribution Shape	The overall pattern revealed by bar heights—symmetry, skewness, modality, and whether the data is single- or multi-peaked
Skewness	A measure of distribution asymmetry. Right-skew (positive) means the tail extends to higher values; left-skew (negative) extends to lower values
Modality	The number of peaks in a distribution. Unimodal = one peak; bimodal = two peaks suggesting mixed populations

Why Use a Histogram?

See distribution shape at a glance. The rise and fall of bars naturally reveal whether your data is symmetric, skewed, unimodal, or multimodal—insights that summary statistics like mean and standard deviation cannot convey alone.
Quickly identify the densest region. The tallest bar marks the interval where data clusters most heavily, giving you the most "typical" value range.
Detect outliers and data gaps. Isolated tall bars or blank gaps between bars may indicate data entry errors, measurement anomalies, or phenomena warranting further investigation.
Compare multiple datasets. Place histograms side by side (or overlay them) to visually compare distributions across different groups or time periods.
High teaching value. The histogram is a staple of middle school, high school, and college statistics curricula worldwide, used to teach data grouping, frequency distributions, and distribution shape analysis.
Works for all numeric data. Whether exam scores, heights and weights, income levels, or production quality metrics—any continuous numeric variable can be visualized as a histogram.

Relationship to Box Plots and Stem-and-Leaf Plots

Histograms, box plots, and stem-and-leaf plots all belong to John Tukey's Exploratory Data Analysis (EDA) toolkit, each with distinct strengths:

Chart	Preserves Raw Values	Shows Distribution Shape	Reveals Multimodality	Best Data Size
Histogram	✗ Binned into intervals	✓ Bar heights show frequency	✓ Bimodal/multimodal visible	20+ points
Box Plot	✗ Five-number summary only	✓ But hides multimodal patterns	✗ Cannot show	Any size
Stem-and-Leaf	✓ Every value preserved	✓ Leaf arrangement shows shape	✓ But less intuitive than histogram	10–50 points, ideal

Worked Example

Let's work through a set of 30 math exam scores:

55, 58, 62, 65, 67, 68, 70, 72, 73, 74,
75, 76, 77, 78, 78, 79, 80, 81, 82, 83,
84, 85, 86, 87, 88, 90, 92, 95, 97, 99

Step 1: Determine the Data Range

Minimum = 55
Maximum = 99
Range = 99 − 55 = 44

Step 2: Choose the Number of Bins and Bin Width

Common rules of thumb include:

Sturges' formula: k = ⌈log₂(n) + 1⌉. For n = 30, k ≈ ⌈4.9 + 1⌉ = 6 bins
Freedman-Diaconis rule: bin width = 2 × IQR × n^(−1/3). More robust for skewed data or data with outliers

Using Sturges' formula, we choose 6 bins:

Bin width = 44 ÷ 6 ≈ 7.33 → round up to 8

Rounding the bin width up to a "nice" number makes axis labels cleaner—a common practice in real-world charting.

Step 3: Define Intervals and Count Frequencies

Starting at 55, with a width of 8, we define 6 intervals:

Interval        Frequency    Data points
55 – 62         4            55, 58, 62
63 – 70         4            65, 67, 68, 70
71 – 78         8            72, 73, 74, 75, 76, 77, 78, 78
79 – 86         8            79, 80, 81, 82, 83, 84, 85, 86
87 – 94         4            87, 88, 90, 92
95 – 102        2            95, 97, 99

Step 4: Interpretation

The tallest bars are in the 71–78 and 79–86 intervals (8 students each), meaning the bulk of scores cluster between 70 and 86
55–62 and 63–70 each have 4 students, with low scores spread evenly
87–94 has 4 students, 95–102 has 2, showing a gradual decline in high scores
Overall, the distribution is roughly symmetric and unimodal, centered around 80, with a slight right skew (a few very high scores stretch the right tail)

How Bin Width Affects the Histogram

Bin width is the single most important parameter in a histogram. The same dataset can produce dramatically different visual impressions depending on bin width:

Same 30 exam scores, different bin widths:

Bin width = 4  (~11 bins):
High resolution—many narrow bars reveal local fluctuations,
but may introduce excessive noise

Bin width = 8  (~6 bins):
Moderate resolution—distribution shape is clear and interpretable;
this is the sweet spot for most analyses

Bin width = 15 (~3 bins):
Low resolution—few wide bars oversmooth the data,
hiding important distribution features

Rules of thumb:

Too few bins → hide meaningful patterns (under-smoothing)
Too many bins → amplify random noise (over-smoothing)
5–20 bins is the optimal range for most datasets

Computation Logic

function computeHistogram(data, numBins = null) {
  // 1. Sort and get range
  const sorted = [...data].sort((a, b) => a - b);
  const dMin = sorted[0];
  const dMax = sorted[sorted.length - 1];

  // 2. Determine bin count (Freedman-Diaconis or manual)
  const bins = numBins ?? Math.max(5, Math.min(20, Math.ceil(2 * Math.cbrt(data.length))));
  const binWidth = (dMax - dMin) / bins || 1;

  // 3. Count frequencies in each bin
  const counts = Array(bins).fill(0);
  for (const value of data) {
    const idx = Math.min(bins - 1, Math.floor((value - dMin) / binWidth));
    counts[idx]++;
  }

  // 4. Build bin objects
  return counts.map((count, i) => ({
    start: dMin + i * binWidth,
    end: dMin + (i + 1) * binWidth,
    count,
  }));
}

// Example usage
const scores = [
  55, 58, 62, 65, 67, 68, 70, 72, 73, 74,
  75, 76, 77, 78, 78, 79, 80, 81, 82, 83,
  84, 85, 86, 87, 88, 90, 92, 95, 97, 99
];
const histogram = computeHistogram(scores, 6);

console.log(histogram);
// [
//   { start: 55, end: 62.33, count: 4 },
//   { start: 62.33, end: 69.67, count: 3 },
//   { start: 69.67, end: 77, count: 6 },
//   { start: 77, end: 84.33, count: 7 },
//   { start: 84.33, end: 91.67, count: 5 },
//   { start: 91.67, end: 99, count: 5 },
// ]

Common Distribution Shapes

Familiarity with these typical shapes helps you quickly diagnose your data:

Shape	Description	Typical Examples
Bell-shaped	High center, symmetric tails	Heights, weights, test scores, measurement errors
Right-skewed	Bulk on the left, long right tail	Income, housing prices, page load times
Left-skewed	Bulk on the right, long left tail	Easy exam scores, product lifespan
Bimodal	Two distinct peaks	Combined male/female heights, two production batches
Uniform	Bars of roughly equal height	Lottery numbers, random number generation, fair dice
J-shaped	One end very low, the other very high	Queue waiting times, time between failures

Frequently Asked Questions

What is the difference between a histogram and a bar chart?

This is the most common confusion. A bar chart compares categorical data (e.g., sales by product), bars have gaps between them, and the order can be rearranged arbitrarily. A histogram displays the distribution of continuous numeric data, bars touch each other (no gaps), and the order is fixed by the numeric scale. In short: bar charts answer "which is larger?"—histograms answer "what does the data look like?"

How many data points do I need for a histogram?

Technically, 3 data points can produce a histogram, but at least 20 are needed to reveal a meaningful distribution shape. With very small datasets, a stem-and-leaf plot may be a better choice—it preserves every original value and is better suited for small samples.

How do I choose the right bin width?

There is no single "correct" bin width, but there are established rules of thumb. Sturges' formula (k = log₂(n) + 1) works well for approximately normal data. The Freedman-Diaconis rule (2 × IQR × n^(−1/3)) is more robust against outliers and skewed data. In practice, try 2–3 different bin widths and choose the one that best reveals the data's underlying structure.

Can a histogram show percentages instead of counts?

Yes. Divide each bin's frequency by the total number of data points to obtain the relative frequency (percentage). The vertical axis changes from "frequency" to "relative frequency." Bar heights remain proportional, but absolute values become percentages. This is especially useful when comparing datasets of different sample sizes.

Can a histogram detect outliers?

Yes, but less directly than a box plot. If a single bin has very low frequency while adjacent bins have much higher frequencies, this "gap" may signal outliers. A more systematic approach is to use box plot IQR fences (Q1 − 1.5×IQR and Q3 + 1.5×IQR) to flag outliers first, then observe their positions in the histogram.

Why must histogram bins be of equal width?

Because a histogram represents frequency through area (not just height). If bins have unequal widths, wider bins would have disproportionately larger areas, misleading the reader into thinking those intervals have higher frequency. Equal-width bins ensure bar height is directly proportional to frequency, making visual interpretation accurate. If unequal-width bins are unavoidable (e.g., logarithmic income brackets), the vertical axis must be labeled "density" (density = frequency ÷ bin width) rather than "frequency."

Extensions of the Histogram

Frequency Polygon

Connect the midpoints of each histogram bar's top edge with straight lines to form a frequency polygon. Overlaying it on the histogram helps readers trace the overall trend of the distribution more intuitively. Frequency polygons are especially useful when comparing multiple distributions in the same coordinate system.

Cumulative Frequency Histogram

Change the vertical axis to cumulative frequency (each bin's count plus all previous bins' counts), producing a step-like graph that rises from left to right. A cumulative frequency histogram directly answers questions like "how many data points are less than or equal to a given value?"

Density Curve Overlay

Superimpose a smooth kernel density estimation (KDE) curve over the histogram. This preserves the raw bin information while adding a smoothed trend line, making it easier to compare the empirical distribution against a theoretical distribution such as the normal curve.

Histogram Output

The chart was generated by https://aiboxplot.com

References

Pearson, K. (1895). Contributions to the Mathematical Theory of Evolution. II. Skew Variation in Homogeneous Material. Philosophical Transactions of the Royal Society of London, 186, 343–414.
Freedman, D., & Diaconis, P. (1981). On the histogram as a density estimator: L₂ theory. Zeitschrift für Wahrscheinlichkeitstheorie und verwandte Gebiete, 57(4), 453–476.
Sturges, H. A. (1926). The choice of a class interval. Journal of the American Statistical Association, 21(153), 65–66.
Tukey, J. W. (1977). Exploratory Data Analysis. Addison-Wesley.
Scott, D. W. (1979). On optimal and data-based histograms. Biometrika, 66(3), 605–610.

What is a Stem-and-Leaf Plot? A Complete Guide

TianYi Zhang — Sat, 08 Aug 2026 14:38:31 +0000

A stem-and-leaf plot is a semi-tabular format for displaying the distribution of quantitative data. Each value is split into a stem (the leading digits) and a leaf (the final digit), preserving every original data point while revealing the shape of the distribution at a glance. Invented by statistician John Tukey in the 1970s, it remains a staple of introductory statistics courses worldwide.

Key Terms

Term	Definition
Stem	The leading digit(s) of a number. For 73, the stem is 7. For 125, the stem is 12
Leaf	The final digit of a number. For 73, the leaf is 3. For 125, the leaf is 5. Leaves are always single digits from 0 to 9
Key	Explains how to reconstruct values from stems and leaves. For example, "2 \| 3 = 23" means stem=2, leaf=3 → value 23
Distribution	The overall pattern of data revealed by the arrangement of leaves across stems — symmetry, skewness, gaps, and clusters

Why Use Stem-and-Leaf Plots?

Preserve every data point. Unlike histograms that group values into bins, a stem-and-leaf plot keeps each individual number, so no information is lost.
See distribution shape instantly. The arrangement of leaves naturally reveals the shape of the data — symmetry, skewness, gaps, and clusters are visible at a glance.
Perfect for small datasets. When you have 10 to 50 values, a stem-and-leaf plot provides a clear, compact view without the bin-width decisions required by histograms.
Easy to create by hand or online. The format is simple: split each number into stem and leaf, then sort. This free online tool does the computation automatically.
Ideal for education. Stem-and-leaf plots are widely used in middle school, high school, and college statistics courses to teach data organization, median finding, and distribution analysis.
Recover original data. Unlike histograms and box plots, you can reconstruct every exact original value from the display.

Stem-and-Leaf vs Box Plot vs Histogram

All three belong to John Tukey's exploratory data analysis (EDA) toolkit, each with distinct strengths:

Chart	Preserves raw values	Shows distribution	Best data size
Stem-and-Leaf	✓ Every value visible	✓ Leaf arrangement shows shape	10–50, optimal
Box Plot	✗ Only five-number summary	✓ But hides multi-modal patterns	Any size
Histogram	✗ Grouped into bins	✓ But sensitive to bin width	20+

Worked Example

We'll use the Test Scores sample from the tool — 20 students' exam scores:

52, 58, 63, 67, 71, 74, 78, 82, 85, 88, 91, 94, 97, 99, 72, 64, 81, 76, 93, 55

Step 1: Split Each Value into Stem and Leaf

Split each number into stem (tens digit) and leaf (ones digit). For example, 52 → stem=5, leaf=2; 71 → stem=7, leaf=1:

52 → stem5 leaf2    58 → stem5 leaf8    63 → stem6 leaf3
67 → stem6 leaf7    71 → stem7 leaf1    74 → stem7 leaf4
78 → stem7 leaf8    82 → stem8 leaf2    85 → stem8 leaf5
88 → stem8 leaf8    91 → stem9 leaf1    94 → stem9 leaf4
97 → stem9 leaf7    99 → stem9 leaf9    72 → stem7 leaf2
64 → stem6 leaf4    81 → stem8 leaf1    76 → stem7 leaf6
93 → stem9 leaf3    55 → stem5 leaf5

Step 2: Group by Stem, Sort Leaves

Stem | Leaf
5    | 2 5 8
6    | 3 4 7
7    | 1 2 4 6 8
8    | 1 2 5 8
9    | 1 3 4 7 9

Key: 5 | 2 = 52

Step 3: Interpret

Stem 5 (50–59 pts): 3 students, lower scores
Stem 6 (60–69 pts): 3 students
Stem 7 (70–79 pts): 5 students, the largest group
Stem 8 (80–89 pts): 4 students
Stem 9 (90–99 pts): 5 students, strong high-end presence

The leaf arrangement reveals a mild bimodal pattern — two peaks at the 70–79 and 90–99 ranges, with slightly fewer students in the 80–89 range. Overall scores are high with no extreme low outliers.

Back-to-Back Stem-and-Leaf Plot

When comparing two datasets, you can share a central "Stem" column with leaves from the first group on the left and leaves from the second group on the right — a back-to-back display.

We'll use the Back-to-Back: Math vs Physics sample from the tool:

Math scores:

72, 85, 78, 90, 65, 88, 76, 92, 70, 84, 79, 86, 74, 91, 68

Physics scores:

68, 75, 82, 70, 88, 74, 80, 66, 85, 73, 90, 72, 69, 77, 81

The back-to-back stem-and-leaf plot:

       Math           Stem       Physics
       5 8             6         6 8 9
     0 2 4 6 8 9       7         0 2 3 4 5 7
     4 5 6 8           8         0 1 2 5 8
     0 1 2             9         0

Key: 6 | 5 = 65

From this display we can see immediately: Math scores are generally higher and more spread out (65–92, with leaves across four stems 6–9), while Physics scores are more concentrated (66–90, with most leaves in stems 7 and 8). Physics also has more low-scoring students (3 at stem 6 vs. Math's 2).

Stem-and-Leaf Plot Result

The chart was generated by https://aiboxplot.com

Extended Forms

Split Stems

When data is concentrated in a narrow range, each stem can be split into two (e.g., 5 for leaves 0–4, 5* for leaves 5–9) to reveal finer detail:

Stem | Leaf
5    | 2 3 4
5*   | 5 6 7 8 8 9
6    | 0 1 2 2 3
6*   | 5 6 7 8 9 9

Computation Logic

function computeStemLeaf(data) {
  // 1. Sort
  const sorted = [...data].sort((a, b) => a - b);

  // 2. Split into stem and leaf, group by stem
  const groups = new Map();
  for (const value of sorted) {
    const stem = Math.floor(value / 10);
    const leaf = value % 10;
    if (!groups.has(stem)) groups.set(stem, []);
    groups.get(stem).push(leaf);
  }

  // 3. Convert to ordered rows
  const stems = Array.from(groups.keys()).sort((a, b) => a - b);
  const rows = stems.map(stem => ({
    stem,
    leaves: groups.get(stem),  // already sorted because input was sorted
  }));

  return {
    rows,
    minStem: stems[0],
    maxStem: stems[stems.length - 1],
    // Dynamic key: use first stem's first leaf as example
    key: `${rows[0].stem} | ${rows[0].leaves[0]} = ${rows[0].stem}${rows[0].leaves[0]}`,
  };
}

// Using the Test Scores sample data
const scores = [52, 58, 63, 67, 71, 74, 78, 82, 85, 88, 91, 94, 97, 99, 72, 64, 81, 76, 93, 55];
const { rows, key } = computeStemLeaf(scores);

// Output:
// rows = [
//   { stem: 5, leaves: [2, 5, 8] },
//   { stem: 6, leaves: [3, 4, 7] },
//   { stem: 7, leaves: [1, 2, 4, 6, 8] },
//   { stem: 8, leaves: [1, 2, 5, 8] },
//   { stem: 9, leaves: [1, 3, 4, 7, 9] },
// ]
// key = "5 | 2 = 52"

Frequently Asked Questions

What is the minimum number of data points needed?

You need at least 3 data points to create a stem-and-leaf plot, but 10 to 50 points produce the best results. Too few and no pattern is visible; too many and the leaf columns become unwieldy.

What is the difference between a stem-and-leaf plot and a histogram?

A histogram groups data into bins and shows only frequencies (bar heights), discarding individual values. A stem-and-leaf plot preserves every data point — you can recover the exact original numbers from the display.

Can stem-and-leaf plots handle decimals?

Yes. For decimals like 7.3, 8.1, 9.6, the stem can be the integer part (7, 8, 9) and the leaf the decimal part (3, 1, 6). The key must specify this, e.g., "7 | 3 = 7.3".

Can stem-and-leaf plots handle three-digit numbers?

Yes. For three-digit numbers like 125, 138, 142, the stem is the first two digits (12, 13, 14) and the leaf is the last digit (5, 8, 2). Key example: "12 | 5 = 125".

Is there an online stem and leaf plot maker?

Yes. This tool provides a free online stem and leaf plot maker with support for both single-dataset and back-to-back (dual-dataset) modes. Paste your data to generate instantly — no sign-up, no watermarks.

Why are stem-and-leaf plots widely used in education?

Because the operation is simple (just split digits), the original data is preserved, and the distribution shape is immediately visible. Students who create stem-and-leaf plots by hand gain a deep understanding of data organization and the intuitive meaning of distribution.

What is a Box Plot? A Complete Guide

TianYi Zhang — Sat, 08 Aug 2026 14:36:38 +0000

A box plot (also called a box-and-whisker plot) is a standardized way of displaying the distribution of a dataset based on a five-number summary: minimum, first quartile (Q1), median, third quartile (Q3), and maximum. Invented by statistician John Tukey, the plot gets its name from the rectangular "box" spanning the interquartile range, with "whiskers" extending outward like a cat's whiskers.

Key Terms

Term	Definition
Minimum (Min)	The smallest data point excluding outliers
First Quartile (Q1)	The median of the lower half. 25% of data falls below Q1
Median (Q2)	The middle value. 50% of data falls below the median
Third Quartile (Q3)	The median of the upper half. 75% of data falls below Q3
Maximum (Max)	The largest data point excluding outliers
Interquartile Range (IQR)	Q3 − Q1. The width of the box, measuring the spread of the middle 50% of data
Mean	The arithmetic average of all data points
Outliers	Data points beyond Q1 − 1.5×IQR or Q3 + 1.5×IQR

Why Use Box Plots?

Compare groups instantly. Place boxes side by side to see medians, spreads, and outliers across categories at a glance.
Detect skewness visually. A lopsided box reveals asymmetry — a long upper whisker indicates right skew, a long lower whisker indicates left skew.
Identify outliers objectively. The IQR-based Tukey fences method flags statistically unusual data points.
Summarize large datasets compactly. One box plot can represent the distribution of thousands of data points.

Worked Example

Let's walk through a real example using exam scores. Suppose we have scores for four subjects, each with 12 students:

Math:      72, 85, 78, 90, 65, 88, 76, 92, 70, 84, 79, 86
Physics:   68, 75, 82, 70, 88, 74, 80, 66, 85, 73, 90, 72
Chemistry: 60, 68, 72, 58, 75, 70, 65, 80, 62, 74, 68, 67
Biology:   78, 85, 82, 90, 88, 84, 86, 92, 80, 87, 83, 89

We'll use the Math scores to demonstrate how each key term is calculated step by step.

Step 1: Sort the Data

First, sort all values in ascending order:

Sorted: 65, 70, 72, 76, 78, 79, 84, 85, 86, 88, 90, 92

Step 2: Calculate Quartiles (Linear Interpolation)

We use linear interpolation (Hyndman & Fan method 7) to compute percentiles — the same method used by Python's NumPy and pandas.

Core Idea

With 12 sorted data points, the "25th percentile position" may not fall exactly on a data point — it can land between two values. Linear interpolation takes the value proportionally between the two surrounding data points.

Computing Q1 (25th percentile)

Sorted data with indices:

Index:  0   1   2   3   4   5   6   7   8   9   10  11
Value: 65  70  72  76  78  79  84  85  86  88  90  92

Calculate the position for Q1:

The 12 data points occupy positions 0 through 11. The 25th percentile position is:

position = (12 - 1) × 0.25 = 2.75

Position 2.75 means we are between index 2 (value 72) and index 3 (value 76), at 75% of the distance from index 2.

Interpolate proportionally:

Q1 = 72 + 0.75 × (76 - 72)
   = 72 + 0.75 × 4
   = 72 + 3
   = 75

Visual diagram:

Index:     2              2.75             3
Value:    72 ──────────────●────────────── 76
                           ↑
                    75% of the way
                    72 + 0.75×4 = 75

Result: Q1 = 75

This means 25% of students scored below 75 in Math.

Computing the Median Q2 (50th percentile)

position = (12 - 1) × 0.5 = 5.5
lo = 5  →  sorted[5] = 79
hi = 6  →  sorted[6] = 84
fraction = 5.5 - 5 = 0.5

Median = 79 + 0.5 × (84 - 79) = 79 + 2.5 = 81.5

Result: Median = 81.5

Half the students scored below 81.5, half above.

Computing Q3 (75th percentile)

position = (12 - 1) × 0.75 = 8.25
lo = 8  →  sorted[8] = 86
hi = 9  →  sorted[9] = 88
fraction = 8.25 - 8 = 0.25

Q3 = 86 + 0.25 × (88 - 86) = 86 + 0.5 = 86.5

Result: Q3 = 86.5

75% of students scored below 86.5.

Step 3: Calculate the Interquartile Range (IQR)

IQR = Q3 − Q1 = 86.5 − 75 = 11.5

Result: IQR = 11.5

The middle 50% of students' scores span 11.5 points. A larger IQR indicates greater spread in the data.

Step 4: Calculate Outlier Fences (Tukey's Fences)

Tukey's fences method uses 1.5 × IQR as the threshold for flagging outliers:

lowerFence = 75 − 1.5 × 11.5 = 75 − 17.25 = 57.75
upperFence = 86.5 + 1.5 × 11.5 = 86.5 + 17.25 = 103.75

Check the original data for values below 57.75 or above 103.75:

Original: 72, 85, 78, 90, 65, 88, 76, 92, 70, 84, 79, 86
All values are within [57.75, 103.75]

Result: No outliers.

These Math scores are fairly concentrated — no extreme high or low values.

Step 5: Determine Whisker Endpoints (Min and Max)

The whiskers extend to the smallest and largest non-outlier values:

Since there are no outliers, the whiskers reach directly to the data extremes:

Min = 65  (first sorted value)
Max = 92  (last sorted value)

Step 6: Calculate the Mean

Sum = 65 + 70 + 72 + 76 + 78 + 79 + 84 + 85 + 86 + 88 + 90 + 92 = 965
Mean = 965 ÷ 12 ≈ 80.42

Result: Mean ≈ 80.42

Note that the mean (80.42) is slightly lower than the median (81.5), indicating a mild left skew — a few lower scores pull the average down.

Complete Calculation Code

Here is all the logic consolidated into a single function:

function calculateBoxPlotStats(data, iqrMultiplier = 1.5) {
  // 1. Sort
  const sorted = [...data].sort((a, b) => a - b);
  const n = sorted.length;

  // 2. Percentile via linear interpolation
  function percentile(p) {
    const h = (n - 1) * p;
    const lo = Math.floor(h);
    const hi = Math.ceil(h);
    if (lo === hi) return sorted[lo];
    return sorted[lo] + (h - lo) * (sorted[hi] - sorted[lo]);
  }

  // 3. Five-number summary
  const q1 = percentile(0.25);
  const median = percentile(0.5);
  const q3 = percentile(0.75);
  const iqr = q3 - q1;

  // 4. Outlier fences
  const lowerFence = q1 - iqrMultiplier * iqr;
  const upperFence = q3 + iqrMultiplier * iqr;

  // 5. Mean
  const mean = sorted.reduce((sum, v) => sum + v, 0) / n;

  // 6. Outliers & whisker endpoints
  const outliers = sorted.filter(v => v < lowerFence || v > upperFence);
  const nonOutliers = sorted.filter(v => v >= lowerFence && v <= upperFence);
  const min = nonOutliers[0];
  const max = nonOutliers[nonOutliers.length - 1];

  return { min, q1, median, q3, max, iqr, mean, lowerFence, upperFence, outliers };
}

// Example usage
const mathScores = [72, 85, 78, 90, 65, 88, 76, 92, 70, 84, 79, 86];
const stats = calculateBoxPlotStats(mathScores);

console.log(stats);
// {
//   min: 65,
//   q1: 75,
//   median: 81.5,
//   q3: 86.5,
//   max: 92,
//   iqr: 11.5,
//   mean: 80.42,
//   lowerFence: 57.75,
//   upperFence: 103.75,
//   outliers: []
// }

Interpreting the Result

When you plot all four subjects side by side, the comparison reveals clear patterns: Biology scores are consistently high and tightly clustered, while Chemistry scores are lower overall but evenly spread. This kind of multi-group comparison is exactly what makes box plots so powerful for exploratory data analysis.

Box Plot Result

The chart was generated by https://aiboxplot.com

Box Plot vs Other Chart Types

Chart	Best For	Limitation
Box Plot	Comparing distributions, spotting outliers	Hides multi-modal patterns
Violin Plot	Showing distribution shape and density	Less familiar to general audiences
Histogram	Revealing frequency and modality	Bin width choices affect appearance
Scatter Plot	Exploring XY relationships	Needs two numeric variables

Computation Method

Quartiles: Linear interpolation (Hyndman & Fan method 7), consistent with Python's NumPy and pandas.
Outliers: Tukey fences — lower fence = Q1 − 1.5×IQR, upper fence = Q3 + 1.5×IQR.
Notched boxes: 95% CI around median (±1.58 × IQR / √n), enabling visual significance testing.

Frequently Asked Questions

What is the minimum number of data points needed?

You need at least 5 data points for a box plot. For reliable outlier detection and stable quartile estimates, 20+ points per dataset is recommended.

How accurate is the outlier detection?

The tool uses the standard Tukey fences method (1.5 × IQR), the industry standard taught in statistics courses and used in research. You can adjust sensitivity to 2× or 3× IQR for more conservative detection.

Is my data stored or shared?

No. All computation happens locally in your browser. Data is never uploaded to any server, stored, or shared. This tool is completely private.

Can I use exported charts in academic papers?

Yes. SVG exports are vector graphics that scale to any resolution — ideal for publications. PNG exports at 2x resolution for sharp rendering in presentations.

Does this tool work on mobile devices?

Yes. The interface is fully responsive and works on phones, tablets, and desktops. The chart canvas adapts to screen size.

Is this tool really free?

Yes, completely free. No sign-up required, no ads, no watermarks. All statistical tools are available with full functionality at zero cost.

References

Hyndman, R. J. & Fan, Y. (1996). "Sample Quantiles in Statistical Packages." The American Statistician, 50(4), 361–365.
Tukey, J. W. (1977). Exploratory Data Analysis. Addison-Wesley.

How I Built an AI Pet Video Generator with TanStack Start and ByteDance Seedance

TianYi Zhang — Tue, 21 Jul 2026 16:54:34 +0000

How I Built an AI Pet Video Generator with TanStack Start and ByteDance Seedance

A few months ago I set out to build something that felt genuinely magical. Not another CRUD dashboard, not another productivity tracker. I wanted to build something my non-technical friends would actually use and enjoy.

The result is PetVideo Generator — you upload a photo of your cat or dog, describe what you want them to do ("my corgi surfing a giant wave at sunset"), and the app uses AI to turn that into a short cinematic video. No editing skills, no prompt engineering — just upload, describe, and download.

I'll walk through the stack, why I went all-in on TanStack, how I integrated ByteDance's Seedance 2.5 for video generation, and a few sharp edges I hit along the way.

Going All-In on the TanStack Ecosystem

I have a rule for side projects: pick a stack and commit. Half-measures — like mixing Next.js pages router with React Query and a separate form library you don't fully understand — are how projects die in week three. This time, I committed to TanStack end to end.

Here's the full lineup:

Concern	TanStack piece	What it replaced for me
Framework & routing	TanStack Start (Vite 8 + Nitro)	Next.js App Router
Server state	TanStack Query v5	useEffect + fetch / SWR
Forms	TanStack Form v1 + Zod v4	React Hook Form
Tables	TanStack Table v8	Hand-rolled table logic
UI primitives	shadcn/ui v4 + Tailwind CSS 4	—
Auth	better-auth (Drizzle adapter)	NextAuth / Clerk
Database	Drizzle ORM on PostgreSQL	Prisma
i18n	Paraglide JS	next-intl

Let me go through each piece and explain why it earned its spot.

TanStack Start — the Foundation

TanStack Start is still in RC, which worried me at first. But after a weekend of building, the worry evaporated. Here's what I liked:

File-based routing without the magic. Routes live under src/routes/ as flat files and folders. A page at /pricing is literally src/routes/pricing.tsx. Route groups use parentheses like (auth)/sign-in.tsx — same convention as Next.js, but without the "use client" directives or RSC boundary confusion. Every component is a regular React component. If it runs on the server, you write a loader. If it runs on the client, you write a component. That's it.

Loaders are server-side, not magical. Need to fetch data before rendering a page? Export a loader function:

export const Route = createFileRoute('/pricing')({
  loader: async () => {
    const plans = await getPublicPlans();
    return { plans };
  },
  component: PricingPage,
});

The loader runs on the server during SSR and can access your database directly — no API route indirection, no getServerSideProps ceremony. The returned data is serialized and available via Route.useLoaderData() in your component, fully typed.

Nitro under the hood. TanStack Start bundles with Nitro, which means your server endpoints live in src/routes/api/ and are just exported functions. Need a webhook handler? src/routes/api/webhook.ts exports a POST function. It deploys to Node.js, Cloudflare Workers, or anywhere Nitro supports — no lock-in.

Metadata without the boilerplate. Each route has a head export that receives loader data:

export const Route = createFileRoute('/pricing')({
  loader: () => ({ title: 'Pricing — PetVideo Generator' }),
  head: ({ loaderData }) => ({
    meta: loaderData ? [{ title: loaderData.title }] : [],
  }),
  component: PricingPage,
});

This pattern stayed consistent across all 35+ routes in the app. Once you learn it once, you know it everywhere.

TanStack Query — Server State Done Right

I used to manually manage server state with useEffect + fetch + useState for loading/error/data. I'd eventually add a cache layer that I maintained poorly. TanStack Query eliminates all of that.

For the admin panel's user list, a paginated query looks like this:

const usersQuery = useQuery({
  queryKey: ['admin-users', page, search],
  queryFn: () => apiGet(`/api/admin/users?page=${page}&search=${search}`),
  placeholderData: keepPreviousData,
});

keepPreviousData is quietly one of the best features — when the user clicks to page 2, the table keeps showing page 1's data until page 2 loads. No flash of empty rows, no loading spinner where data should be. It feels fast because it is fast.

Mutations follow the same pattern across the entire app:

const grantCredits = useMutation({
  mutationFn: (vars: { userId: string; amount: number }) =>
    apiPost('/api/admin/users/credits', vars),
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ['admin-users'] });
    toast.success('Credits granted');
  },
});

Invalidate on success, toast on success, toast on error. Every mutation in the codebase follows this shape, which made the app predictable to work on even as it grew.

TanStack Form + Zod

Forms are where most React apps accumulate technical debt. You start with controlled inputs, then add validation, then need field-level errors, then realize your form state is 200 lines of useState and useEffect.

TanStack Form takes a different approach. You define the form shape and validation schema once, and the library manages all the state:

const form = useForm({
  defaultValues: { email: '', password: '' },
  validators: {
    onChange: zodValidator(
      z.object({
        email: z.string().email(),
        password: z.string().min(8),
      })
    ),
  },
  onSubmit: async ({ value }) => {
    await signIn(value);
  },
});

Paired with a thin TextField wrapper component that reads form.Field state and renders a labeled input, every form in the app — sign in, sign up, settings, admin dialogs — follows the same structure. No per-form state management, no duplicated validation logic between client and server.

TanStack Table for Admin Panels

The admin panel has several data-heavy tables: users, subscriptions, payments, credits, posts. Each one needs server-side pagination, search, and sortable columns. TanStack Table handles the headless logic — you provide the data shape, define columns, and it gives you back everything you need for rendering:

table.getRowModel().rows for the visible rows
table.getHeaderGroups() for column headers with sort indicators
Built-in pagination state that plugs into your query parameters

The loading prop on the DataTable component (which wraps TanStack Table) shows a subtle shimmer overlay without unmounting the current rows — again, no jarring loading states.

The consistency across TanStack libraries is the real win. They share the same mental model — define a configuration object, get back reactive state, plug it into your UI. After learning Query, picking up Form and Table took hours, not days.

Working with ByteDance's Seedance 2.5

Now for the fun part — the AI that actually makes the videos.

What Is Seedance?

Seedance is ByteDance's image-to-video model. If you've been following the AI video space, you've probably heard of Runway, Pika, or Kling. Seedance sits in the same category but has a few characteristics that made it a good fit for this project.

Seedance 2.0 was already solid — it produced clean motion, handled pet fur and anatomy reasonably well, and didn't introduce too many visual artifacts. Seedance 2.5, which released earlier this year, brought some meaningful improvements:

Better motion coherence. Earlier image-to-video models would sometimes warp the subject — a dog's leg might stretch weirdly, or the background would shimmer. Seedance 2.5 handles motion much more naturally. Pets running, jumping, or turning their heads look like actual pets doing those things, not glitchy approximations.
Higher temporal consistency at longer durations. It supports up to 15 seconds of output at 720p. The frame-to-frame consistency at 10+ seconds is where it pulls ahead of earlier versions — fewer morphing artifacts and smoother transitions.
Prompt adherence. The model respects camera direction cues — "slow push-in," "dolly left," "bird's eye view" — more reliably than its predecessor. This matters because cinematic camera motion is what makes the output feel like a real video rather than a animated still.

How I Integrated It

The generation pipeline has three stages, and Seedance handles the third:

Stage 1 — Upload. Users drop or paste an image. It uploads to Cloudflare R2 (S3-compatible object storage). Before anything else, a quick vision-model check confirms the image actually contains a pet — saves people from burning credits on generation attempts that'll fail or produce nonsense.

Stage 2 — Prompt optimization. Most people write terrible prompts. "Make my cat dance" isn't going to give Seedance enough to work with. So the app runs the user's casual description through an LLM that rewrites it into cinematic language:

User types: "my golden retriever as a wizard"
System generates: "A majestic golden retriever wearing flowing wizard robes,
holding a wooden staff with a glowing crystal, standing in a candlelit stone
chamber with floating embers and magical particles, slow camera push-in,
cinematic lighting, shallow depth of field"

This step takes under a second and runs server-side. The difference in output quality is night and day — Seedance responds dramatically better to detailed, cinematography-aware prompts than to casual descriptions.

Stage 3 — Video generation with Seedance. The original photo and the optimized prompt get sent to the Seedance 2.5 endpoint. The model takes the static image and the text description and generates a video clip — typically 5 to 15 seconds, at either 480p or 720p.

The generation itself takes 30–90 seconds depending on duration and resolution. The app polls for completion and saves the resulting video URL to the user's gallery. Users can preview, download, or share their videos from there.

What Seedance Excels At (and Where It Struggles)

After generating thousands of videos during development and testing, I've developed a sense for what works:

Pet close-ups are excellent. Seedance handles fur texture, ear movement, and facial expressions well. A close-up of a cat slowly blinking and turning its head looks genuinely good — the kind of result that makes people say "how is this AI?"

Action at a distance is weaker. If the pet is small in the frame — say, a dog running across a field — the motion can get mushy. The model has fewer pixels to work with for the subject, and the quality drops noticeably. My rule of thumb: if you can't clearly see the pet's eyes in the source photo, the result won't be great.

Simple backgrounds work better than complex ones. A pet on grass or a plain wall generates cleaner motion than a pet in a busy living room. The model sometimes confuses background elements with the subject. When I prompt users to "use a photo with a clean, uncluttered background," the success rate jumps noticeably.

Camera motion cues are genuinely useful. Adding "slow zoom out," "gentle pan right," or "static camera, subject moves toward lens" to the prompt changes the output. This feels less like a gimmick and more like a fundamental capability — you can direct the shot, not just describe the scene.

Why Not Other Models?

I evaluated a few alternatives. Runway Gen-3 produces great results but the API pricing doesn't work for a consumer SaaS with a low price point. Kling is strong on human faces but less consistent with animals. Pika is fast but resolution-limited.

Seedance hit the sweet spot for this use case: good enough quality for pet content (where slight imperfections are actually charming rather than off-putting), reasonable generation speed, and a cost structure that let me offer a free tier without losing money on every user.

The Credit System

This is the boring-but-critical part nobody blogs about. When you charge users in "credits" and those credits get consumed by variable-cost API calls, you need a real accounting system.

A few things I learned:

FIFO consumption matters. Users accumulate credits from multiple sources — signup bonus, subscription renewal, credit pack purchases. Each batch has its own expiration date. When a generation costs 22 credits, the system needs to consume from the batch that expires soonest. Implementing this correctly with Drizzle ORM meant writing window functions and atomic update queries, not just a credits -= amount decrement.

Reserve-then-consume, not consume-then-refund. When a user kicks off a generation, you reserve credits. If the generation succeeds, you consume them. If it fails, you release them. If you consume first and refund on failure, you create a small window where users can overdraft by submitting multiple requests simultaneously. The reserve pattern (with optimistic UI showing "pending" credit usage) prevents this.

Expiration is a feature, not just a cost-control mechanism. Credits that expire encourage regular usage, which increases the chance users will upgrade. But be transparent about it — the dashboard shows exactly when each credit batch expires, and the reminder email goes out a week before.

The whole credit module — FIFO logic, expiration, partial consumption, automated top-ups — ended up being about 400 lines of TypeScript. Not trivial, but self-contained. It imports nothing from the rest of the app except the database client and Drizzle schemas.

Monetization Without Feeling Scummy

Pricing took more iteration than any technical decision. I studied the dominant player in this space ($15–129/month) and set a straightforward goal: every plan cheaper than the equivalent, with a genuinely usable free tier.

Plan	Monthly	Credits/mo	Highlights
Free	$0	1 gen + download/week	No watermark, no credit card
Basic	$12.99	300	All modes, up to 720p
Pro	$24.99	800	Priority queue, longer durations
Ultra	$109.99	5,000	Top priority, dedicated support

The free tier gives one generation and download per week — enough to try it, share something, and decide if you want more. No card, no trial expiration countdown. If someone uses it once a week forever, that's fine — word of mouth from free users is its own kind of revenue.

The paid tiers run at a thin margin on short/low-res generations but make it up on the longer, higher-resolution videos that paying users naturally gravitate toward. I also added credit packs (small one-time purchases, no subscription) and lifetime plans (one payment, permanent access) for people who prefer those models.

Stuff I'd Do Differently

Start with webhooks, not polling. I poll Seedance's job status endpoint every few seconds to check if a generation is done. For low volume this is fine. At scale, switching to webhook callbacks would cut wasteful API calls and reduce perceived latency. This is on the roadmap but would have been easier to build from day one.

The credit system needed more upfront modeling. FIFO ordering, partial consumption across multiple pools, expiration, auto-grant on signup, revocation on refunds — it's a deeper domain than it looks. Next time I'd sketch the full state machine before writing a single service function.

i18n from the start was the right call. I wanted English and Chinese from day one, so I wired up Paraglide JS early. The Inlang compiler tree-shakes unused messages at build time, which is nice, but keeping 675+ translation keys in sync during rapid development is genuinely tedious. There's no great tooling for this yet.

Wrapping Up

Building a consumer AI product is a different beast from building a dev tool or a B2B SaaS. The quality bar is higher (people compare it to Hollywood, not to a spreadsheet), the margin math is tighter (you're paying per API call, not per server-hour), and the "wow factor" is the entire product — there's no enterprise feature checklist to fall back on.

PetVideo Generator is live and free to try. Upload a photo of your pet, give it a prompt, and see what Seedance 2.5 can do. No credit card, no time-limited trial — just one generation a week you can actually use and download.

If you're curious about the underlying SaaS architecture — auth, payments, admin panel, the credit engine — the backend runs on ShipAny, a headless SaaS boilerplate. Their source is on GitHub and their docs are at shipany.ai. I mention it because a lot of indie devs burn weeks on infrastructure before they ever write a line of product code. Having that layer done meant I went from idea to working prototype in about a week.

Would love to hear what you're building — or how you'd approach this differently. Drop a comment.

Build a Box Plot Calculator in Pure JavaScript — No Libraries Needed

TianYi Zhang — Tue, 30 Jun 2026 18:00:50 +0000

Build a Box Plot Calculator in Pure JavaScript — No Libraries Needed

A box plot (or box-and-whisker plot) is one of the most powerful tools in exploratory data analysis. In one compact graphic, it reveals the median, spread, skewness, and outliers of a dataset — all from just five numbers.

In this tutorial, I'll walk through building a complete box plot calculator from scratch using vanilla JavaScript and SVG. No D3, no Chart.js, no dependencies. By the end, you'll understand:

How to compute quartiles the right way
How to detect outliers with Tukey's fences
How to render a box plot as SVG
Why all of this matters for real-world data analysis

If you want to skip the code and use a ready-made tool, I built aiboxplot.com — a free, no-sign-up platform that does all of this plus AI analysis, multi-dataset comparison, and one-click export to PNG/SVG/CSV. The rendering engine is open source too.

Try it now → aiboxplot.com

1. The Five-Number Summary

Every box plot is built on five values:

Metric	Description
Minimum	The smallest value that's not an outlier
Q1 (first quartile)	25th percentile — 25% of data falls below this
Median (Q2)	50th percentile — the middle value
Q3 (third quartile)	75th percentile
Maximum	The largest value that's not an outlier

Plus one more: the Interquartile Range (IQR) = Q3 − Q1. This measures the spread of the middle 50% and is the key to detecting outliers.

2. Computing Quartiles Correctly

The most common mistake in box plot calculators is using the wrong quartile method. There are at least 9 different ways to compute percentiles (see Hyndman & Fan, 1996). I use linear interpolation (method 7), which is the default in Python's NumPy and pandas:

/**
 * Compute a percentile value using linear interpolation.
 * @param {number[]} sorted - Sorted array of numbers
 * @param {number} p - Percentile as a fraction (0.25 = Q1, 0.5 = median, 0.75 = Q3)
 */
function percentile(sorted, p) {
  if (sorted.length === 0) return 0;
  if (sorted.length === 1) return sorted[0];

  const n = sorted.length;
  const h = (n - 1) * p;          // Real-valued index
  const lo = Math.floor(h);
  const hi = Math.ceil(h);

  if (lo === hi) return sorted[lo];

  // Linear interpolation between lo and hi
  return sorted[lo] + (h - lo) * (sorted[hi] - sorted[lo]);
}

Why this matters: for a dataset of [1, 2, 3, 4, 5], the median is 3. But for [1, 2, 3, 4], using simple rounding gives 2, while linear interpolation correctly gives 2.5. These small differences compound when you're analyzing real data.

3. Detecting Outliers with Tukey's Fences

John Tukey's fences method is elegant, simple, and still the industry standard:

function calculateStats(data, iqrMultiplier = 1.5) {
  const sorted = [...data].sort((a, b) => a - b);
  const n = sorted.length;
  const mean = sorted.reduce((a, b) => a + b, 0) / n;

  const q1 = percentile(sorted, 0.25);
  const median = percentile(sorted, 0.5);
  const q3 = percentile(sorted, 0.75);
  const iqr = q3 - q1;

  // Tukey's fences
  const lowerFence = q1 - iqrMultiplier * iqr;
  const upperFence = q3 + iqrMultiplier * iqr;

  // Values outside fences are potential outliers
  const outliers = sorted.filter(v => v < lowerFence || v > upperFence);

  // Non-outlier range defines the whiskers
  const nonOutliers = sorted.filter(v => v >= lowerFence && v <= upperFence);
  const min = nonOutliers[0];
  const max = nonOutliers[nonOutliers.length - 1];

  return { min, q1, median, q3, max, iqr, mean, lowerFence, upperFence, outliers, count: n };
}

The 1.5 multiplier is the standard. Use 2.0 for a more conservative detection, or 3.0 for extreme outliers only. At aiboxplot.com, you can switch between these thresholds in real time.

4. Rendering as SVG

Now for the fun part — turning numbers into a chart. Here's the core SVG rendering logic:

function renderBoxPlot(stats, width = 500, height = 200) {
  const { min, q1, median, q3, max, outliers } = stats;

  // Scale setup
  const padL = 50, padR = 30, padT = 20, padB = 40;
  const plotW = width - padL - padR;
  const plotH = height - padT - padB;

  const dataMin = Math.min(min, ...outliers);
  const dataMax = Math.max(max, ...outliers);
  const range = dataMax - dataMin || 1;
  const paddedMin = dataMin - range * 0.08;
  const paddedMax = dataMax + range * 0.08;
  const paddedRange = paddedMax - paddedMin;

  // Map data value → SVG x-coordinate
  const sx = (v) => padL + plotW * ((v - paddedMin) / paddedRange);

  const boxY = padT + plotH * 0.2;
  const boxH = plotH * 0.6;
  const yc = padT + plotH / 2;
  const color = "#2563eb";

  return `
    <svg viewBox="0 0 ${width} ${height}" xmlns="http://www.w3.org/2000/svg">
      <!-- Axis -->
      <line x1="${padL}" y1="${padT + plotH}" 
            x2="${padL + plotW}" y2="${padT + plotH}" 
            stroke="#d1d5db" stroke-width="0.5"/>

      <!-- Left whisker -->
      <line x1="${sx(min)}" y1="${yc - boxH / 4}" 
            x2="${sx(min)}" y2="${yc + boxH / 4}" 
            stroke="${color}" stroke-width="1.5" stroke-linecap="round"/>
      <line x1="${sx(min)}" y1="${yc}" 
            x2="${sx(q1)}" y2="${yc}" 
            stroke="${color}" stroke-width="0.5" stroke-dasharray="3 3"/>

      <!-- Box (Q1 to Q3) -->
      <rect x="${sx(q1)}" y="${boxY}" 
            width="${sx(q3) - sx(q1)}" height="${boxH}" 
            fill="${color}" opacity="0.15" stroke="${color}" stroke-width="1.5" rx="2"/>

      <!-- Median line -->
      <line x1="${sx(median)}" y1="${boxY}" 
            x2="${sx(median)}" y2="${boxY + boxH}" 
            stroke="${color}" stroke-width="2" stroke-linecap="round"/>

      <!-- Right whisker -->
      <line x1="${sx(q3)}" y1="${yc}" 
            x2="${sx(max)}" y2="${yc}" 
            stroke="${color}" stroke-width="0.5" stroke-dasharray="3 3"/>
      <line x1="${sx(max)}" y1="${yc - boxH / 4}" 
            x2="${sx(max)}" y2="${yc + boxH / 4}" 
            stroke="${color}" stroke-width="1.5" stroke-linecap="round"/>

      <!-- Outlier dots -->
      ${outliers.map(o => `<circle cx="${sx(o)}" cy="${yc}" r="4" 
            fill="none" stroke="${color}" stroke-width="1.5"/>`).join("")}
    </svg>
  `;
}

The key insight: SVG is just XML. A box plot is just <line>, <rect>, and <circle> elements — no canvas, no external libraries.

5. Putting It All Together

// Example: exam scores from two classes
const dataA = [72, 85, 78, 90, 65, 88, 76, 92, 70, 84, 79, 86, 74, 91, 68, 83, 77, 89, 71, 95];
const dataB = [60, 62, 58, 70, 55, 68, 72, 64, 68, 61, 75, 66, 53, 77, 69, 71, 59, 63, 67, 74];

const statsA = calculateStats(dataA);
const statsB = calculateStats(dataB);

console.log("Class A — Median:", statsA.median, "IQR:", statsA.iqr);
console.log("Class B — Median:", statsB.median, "IQR:", statsB.iqr);
console.log("Outliers in A:", statsA.outliers);
console.log("Outliers in B:", statsB.outliers);

document.getElementById("chart-a").innerHTML = renderBoxPlot(statsA);
document.getElementById("chart-b").innerHTML = renderBoxPlot(statsB);

Side-by-side comparison instantly reveals:

Class A has a higher median and wider spread
No outliers in either class
Class B scores are more tightly clustered

This kind of insight takes seconds with a box plot — and pages of text to describe otherwise.

From Demo to Production

Building a working box plot is straightforward. Building a great one takes more:

Multi-dataset comparison — stacking boxes vertically with independent colors
Notched boxes — 95% confidence intervals around the median (McGill-Tukey-Kramer method)
Jitter scatter overlays — showing every raw data point without overlap
Responsive scaling — charts that look sharp at any screen size
Export to PNG/SVG — for papers, presentations, and reports
AI-powered analysis — automatic insights about distribution shape and skewness

I built aiboxplot.com to solve all of this — with 8 chart types, AI chat, and zero sign-up required. The rendering engine behind it is open source so you can see exactly how every calculation and SVG element is constructed.

Make your first box plot → aiboxplot.com

Key Takeaways

Quartiles matter — use linear interpolation for correct results
Tukey's fences are the standard for outlier detection
SVG is underrated for data visualization — pure XML, no build step
Box plots compress thousands of data points into one clear graphic
All computation can be client-side — your data never needs to leave the browser

Did this help? Let me know in the comments, or show me what you build! And if you want a ready-made solution for your next data project, give aiboxplot.com a try.