Add a scatterplot to this D3 line chart?

Question

D3 noob here, I managed to make a multi-line chart and I would like to add a data points to the lines. That way, I could hover on individual data points and show a tool tip. I think I can handle the tool tip part if someone can help me add data points to my line.

Here's my code in a pastebin: http://pastebin.com/F8L5gS4D

I seriously couldn't get it to run in a codepen or get it to show up on stack overflow without losing all its formatting.

here's the data I'm working with: http://pastebin.com/GyjMwqGb But I restructure it in the javascript with d3.nest(), sorting it by School.

Any help would be much appreciated. Maybe even just point me to a good guide.

Thank you all!

Answer 1

Your forEach where you do svg.append is not the D3 way. Go thru some tutorials and learn about d3.selectAll()

• https://square.github.io/intro-to-d3/data-binding/
• http://alignedleft.com/tutorials/d3/binding-data

I would then use hardcoded data before reading from CSV.

Finally when you read CSV usually you put the code to add SVG elements in the body of d3.csv

d3.csv("apdata.csv", function(error, data) {
   data.forEach(function(d) {
      d.Wk = +d.Wk;
      d.Rk = +d.Rk;
   svg.selectAll(...)
     .append()
     ...
 });

HTH