Spreading data in a scatter chart

The scatter chart is a very powerful chart and is mainly used to get a bird's-eye view while comparing two data sets. For example, comparing the scores in an English class and the scores in a Math class to find a correlative relationship. This style of visual comparison can help find surprising relationships between unexpected data sets.

This is ideal when the goal is to show a lot of details in a very visual way.

Getting ready

If you haven't had a chance yet to scan through the logic of our first recipe in this chapter, I recommend you take a peek at it as we are going to base a lot of our work on that while expanding and making it a bit more complex to accommodate two data sets.

The regular HTML start-up code can be found in the code bundle or go through Chapter 1, Drawing Shapes in Canvas, for more information on creating the HTML document.

I've revisited our data source from the previous recipe and modified it to store three variables of students' exam scores...