D3 scatterplot on time series multi-line line graph

Question

I've attempted to place points (eventually with hover tooltips) at each data point on a time-series graph. Here is the D3 Block

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

I'm trying to create scatterplot dots on the data-points where temperature data and time intersect - which works on lines but not on my ellipses, and I'm not sure what I'm doing wrong.

The failing scatterplot attempt is here.

What's the best way to make the circles overlap the data-points? The error I'm getting in the JavaScript debugger is

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 to work fine with the line intersections, just not the cx and cy coordinates.

JavaScript for failing attempt is below:

// set the dimensions and margins of the graph
var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

// parse the date / time
var parseDate = d3.timeParse("%Y-%m-%d %H:%M:%S");
var formatTime = d3.timeFormat("%e %B");

// set the ranges
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);

// define the div for the 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 the 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 the tempprobe path.
    svg.append("path")
        .data([data])
        .attr("class", "line temp-probe temperature")
        .attr("d", tempprobe_line);

    // Add the 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 the X Axis
    svg.append("g")
        .attr("transform", "translate(0,"+ height + ")")
        .call(d3.axisBottom(x));

    // add the 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 the scatterplot -- the 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); });
});

Answer 1

The data you are passing to the selection.data() function is wrong. The data you want is nested within the data variable.

This works for 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 over each data point on the blue tempprobe line.