A box plot, every bike as a dot, and bin edge cases
The box plot's whiskers reach from 3 to 100 and no point is an outlier, so the box alone would hide the four low bikes. The dots keep them visible.
A histogram counts how many values fall in each range of numbers, so you see the shape of the data instead of single values. d3.bin makes the ranges. The width of the bins can change the story, so you check more than one.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 4 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write histogram(values, width) that returns the bins of values from 0 to 100 in steps of width, and prints how many values fell outside 0–100.
Draw the bikes' km_total as a histogram with 8 bins. Hint: look at d3.extent(bikes, (d) => d.km_total) first.
Explain it without notes
What is in a bin that d3.bin returns?
Why does the default bin range run to 110 when no battery is above 100?
Why can the width of the bins change what you conclude?
Preview
Console
Nothing logged yet.Expected console output
quartiles: 49 65 83.25 | mean: 64.5
whiskers: 3 to 100 | outliers: none
no values [[null,null,0]]
one value [[7,7,1]]
all equal [[4,4,3]]
with undefined [[0,5,1],[5,10,1]]