Scatter plots, also known as dot charts, are used to visualize the relationship between two variables. Each point on the chart represents an observation from the dataset. In this chapter, we will learn how to create scatter plots using D3.

Sample Data

We will use a sample dataset that shows the grades and study hours of various students:

javascript

SVG Setup

First, we set up the SVG area where the scatter plot will be drawn:

javascript

Scales

We need scales for the X and Y axes.

X Scale

We use a linear scale for the X axis:

javascript

Y Scale

For the Y axis, we use a linear scale:

javascript

Axes

We create and add the X and Y axes using the defined scales:

javascript

mobile-image: Image showing the SVG with correctly positioned X and Y axes desktop-image: Image showing the SVG with correctly positioned X and Y axes

Creating the Dots

Now we bind the data to circle elements to create the dots of the scatter plot:

javascript

mobile-image: Image showing the complete scatter plot desktop-image: Image showing the complete scatter plot

Customizing the Scatter Plot

We can customize the scatter plot to make it more appealing. For example, by adding labels to the points with the corresponding values:

javascript

We can add CSS styles to enhance its appearance:

style.css

css

Interactivity

Let's add basic interactivity, such as a tooltip that shows the value when hovering over a point:

javascript

mobile-image: Image showing the scatter plot with highlighted points and a visible tooltip desktop-image: Image showing the scatter plot with highlighted points and a visible tooltip

Summary

In this chapter, we learned how to create a scatter plot in D3. We started with the basic setup of the drawing area and then created the scales and axes. We plotted the points using circle elements and added labels to improve visibility. Finally, we added basic interactivity with tooltips.

Scatter plots are useful for showing the relationship between two variables and detecting patterns or trends. Now you have the tools needed to create and customize your own scatter plots using D3.

In the next chapter, we will explore how to visualize hierarchical data with tree charts.

mobile-image: Image showing the final scatter plot with interactive points and tooltips desktop-image: Image showing the final scatter plot with interactive points and tooltips