Three bin widths for the same 120 batteries
Orange bars are bins that end at 10% or lower. The pedal bikes have battery: null, so the example keeps the e-bikes only, and d3.bin would skip the nulls without any message anyway.
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
default: 11 bins -> 0-10:4 10-20:1 20-30:3 30-40:11 40-50:12 50-60:18 60-70:20 70-80:14 80-90:14 90-100:12 100-110:11
0-100 : 10 bins -> 0-10:4 10-20:1 20-30:3 30-40:11 40-50:12 50-60:18 60-70:20 70-80:14 80-90:14 90-100:23
counted from all 320 bikes: 120
thresholds hint 25 gives 20 bins (D3 rounds to 1-2-5 steps)
e-bikes under 10%: 4 | at exactly 100%: 11