d3.js - D3 scatterplot on time series multi-line line graph -

i've attempted place points (eventually hover tooltips) @ each data point on time-series graph. here d3 block

the multi-line portion based on this example, , creates function called draw() draws graph leveraging external d3.line() generators.

i'm trying create scatterplot dots on data-points temperature data , time intersect - works on lines not on ellipses, , i'm not sure i'm doing wrong.

the failing scatterplot attempt here.

what's best way make circles overlap data-points? error i'm getting in javascript debugger

d3.v4.js:1381 error: <circle> attribute cx: expected length, "nan". d3.v4.js:1381 error: <circle> attribute cy: expected length, "nan". 

the data parsing seems work fine line intersections, not cx , cy coordinates.

javascript failing attempt below:

// set dimensions , margins of graph var margin = {top: 20, right: 20, bottom: 30, left: 50},     width = 960 - margin.left - margin.right,     height = 500 - margin.top - margin.bottom;  // parse date / time var parsedate = d3.timeparse("%y-%m-%d %h:%m:%s"); var formattime = d3.timeformat("%e %b");  // set ranges var x = d3.scaletime().range([0, width]); var y = d3.scalelinear().range([height, 0]);  // define div tooltip var div = d3.select("body").append("div")     .attr("class", "tooltip")     .style("opacity", 0);   var tempprobe_line = d3.line()     .x( function(d) { return x(d.timestamp); })     .y( function(d) { return y(d.tempprobe); });  var high_threshold_line = d3.line()     .x(function(d){ return x(d.timestamp); })     .y(function(d){ return y(d.threshold_high); });  var low_threshold_line = d3.line()     .x(function(d){         return x(d.timestamp);     })     .y(function(d){         return y(d.threshold_low);     })   var ambient_line = d3.line()     .x(function(d)         { return x(d.timestamp);}     )     .y( function(d) {         return y(d.ambient);     });   var svg = d3.select("body").append("svg")     .attr("width", width + margin.left + margin.right)     .attr("height", height + margin.top + margin.bottom)     .append("g")     .attr("transform",             "translate(" + margin.left + "," + margin.top + ")");   function draw(data, tempdata) {      var data = data[tempdata];      data.foreach(function(d, i) {         d.timestamp = parsedate(d.timestamp);         d.tempprobe = +d.tempprobe;         d.ambient = +d.ambient;     });      data.sort(function(a, b){         return a["timestamp"]-b["timestamp"];     });      // scale range of data     x.domain(d3.extent(data, function(d){         return d.timestamp;     }));     y.domain([0, d3.max(data, function(d){         return math.max(d.tempprobe, d.ambient);     })]);      // add tempprobe path.     svg.append("path")         .data([data])         .attr("class", "line temp-probe temperature")         .attr("d", tempprobe_line);      // add ambient path     svg.append("path")         .data([data])         .attr("class", "line ambient temperature")         .attr("d", ambient_line);      svg.append("path")         .data([data])         .attr("class", "line high-threshold")         .attr("d", high_threshold_line)      svg.append("path")         .data([data])         .attr("class", "line low-threshold")         .attr("d", low_threshold_line)      // add x axis     svg.append("g")         .attr("transform", "translate(0,"+ height + ")")         .call(d3.axisbottom(x));      // add y axis     svg.append("g")         .call(d3.axisleft(y));     }      d3.json("temp_data.json",         function(error, data){     if (error){         throw error;     }     draw(data[0], "tempdata");     // add scatterplot -- failing part     svg.selectall("dot")         .data(data)       .enter().append("circle")         .attr("r", 3.5)         .attr("cx", function(d) { return x(d.timestamp); })         .attr("cy", function(d) { return y(d.tempprobe); }); }); 

the data passing selection.data() function wrong. data want nested within data variable.

this works me:

svg.selectall("dot")    .data(data[0]['tempdata'])    .enter()    .append("circle")    .attr("r", 3.5)    .attr("cx", function(d) { return x(d.timestamp); })    .attr("cy", function(d) { return y(d.tempprobe); }); 

this adds circles on each data point on blue tempprobe line.