D3 Tips and Tricks: Interactive Data Visualization/

...

/

Change a Line Chart Into a Scatter Plot

Change a Line Chart Into a Scatter Plot

Learn to convert your line graph to a scatter plot.

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 ...