Level of detail: squares when zoomed out, points when zoomed in
Move the slider. The label names the mode and how many points are in view. The last two lines show a 2,000-point sample losing the one lonely trip, while its square still counts 1.
Past a point, drawing every record makes a worse chart: dots pile on dots and the page slows down. Sampling, counting in bins and zooming into detail show more truth with less drawing. The rule is never to drop data silently.
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 binIndex(x, y, size, columns) that returns one number for the square holding the point, and -1 for a point outside a grid columns squares wide.
Change the second example so the lonely trip is drawn as a red dot when it is in view, even while the rest are squares.
Explain it without notes
Why can a chart of 200,000 dots be worse than a chart of 2,000?
How does binning keep every record counted, while sampling does not?
Preview
Console
Nothing logged yet.Expected console output
zoom 1x: squares of 32, 194,851 points in view
zoom 2x: squares of 16, 116,827 points in view
zoom 4x: squares of 8, 16,979 points in view
zoom 8x: dots, 3,812 points in view
a 2,000-point sample contains the lonely trip: false
the square around the lonely trip still counts: 1