Sloppy chart is an extended version of the standard line or bar chart, with each line segment or bar representing two values instead of just one.

Example: you have run an online course, in which students were supposed to watch a series of video lectures. Naturally, not all students completed the entire course. To understand where they dropped out, you plot a bar chart:

Good old bar chart. Each bar represents a video lecture, with its height corresponding to the number of students who started watching it. Hover on a bar to see the exact number:

While this bar chart shows how many students started watching a lecture, it doesn't show how many of them finished it. You know how many of them dropped out from lecture to lecture, but you don't know if it happened halfway through the lecture (perhaps they found it boring or below expectations) or after they finished watching it (perhaps they weren't committed enough and never got around to starting the next lecture).

Vice versa, if you show how many finished a lecture then you loose the other half of information.

You can rectify this problem by plotting two bars per lecture:

Grey bar — the number of students who started watching a lecture, red — finished. Hover to see the exact numbers:

The above chart shows the drop-out both during a lecture (difference in height of grey bar and adjacent red bar) and between lectures (red bar and the next grey bar).

This is an improvement on the original bar chart, but let's not stop just yet. Let's take a simple and effortless step towards ideal data visualisation — by removing everything which is unnecessary.

A lecture is a single step in our data model, however, two bars of the same width create a visual impression of two equally important parts. To resolve this contradiction between reality and its visual representation, let's merge each pair of bars into a trapezoid:

Each trapezoid represents a lecture, with the height of its left side corresponding to the number of students who started watching the lecture, right — finished. Hover to see the exact numbers:

The gaps between bars used to serve a purpose — they helped us distinguish one bar from another. They don't represent reality, as we have no information as to whatever students do between watching lectures. If we only leave the topline of each trapezoid we can safely get rid of these gaps, thus only visualising what we do know:

The left end of each line segment represents the number of students who started watching the respective lecture, right — finished.
The slope of a line segment indicates the drop-out rate during the lecture, gaps between segments — drop-out rate between lectures (also projected onto y-axis in red).
Hover to see the exact numbers:

And this is the sloppy chart.