Building a simple scatter plot application

Did you ever wonder how Google Analytics, GitHub, or Wolfram Alpha create these beautiful and colorful plots of your data? Did you know that with D3.js, you have the power to create similar or even better visualizations right at your fingertips?

In this chapter, we will build a simple scatter plot application. This type of plot can be used to visualize the areas and frequency of clicks on a web page; the following figure shows an example of such a plot. The circles indicate typical areas of the website that are often clicked on, whereas the size and color of the circles show the amount of clicks on an area. To keep things simple, in the beginning, we will create a scatter plot and fill it with random data.

Simple scatter plot application