Search⌘ K
Home
Courses
D3 Tips and Tricks: Interactive Data Visualization

Change a Line Chart Into a Scatter Plot

Explore how to create a scatter plot from a line chart in D3 by adding SVG circle elements and understanding the importance of drawing order. Learn how to customize data points using attributes like size and position to enhance visual presentation.

We'll cover the following...

Creating a scatter plot

Creating a scatter plot from a line chart is simple. Simply slot the following block in between the “Add the value line path” and the “Add the x-Axis” blocks.

C++
  // Add the scatterplot
  svg.selectAll("dot") 
      .data(data)
    .enter().append("circle")
      .attr("r", 5)
      .attr("cx", function(d) { return x(d.date); }) 
      .attr("cy", function(d) { return y(d.close); });

And we will get:

I deliberately put the dots after the line in the drawing ...