Scatterplot within a small multiple visualization

[desta...@gmail.com]

Current situation: I already have a small multiple visualization for my data. What it represents is the stress intensity over time for six different days. It plots the graphs correctly. Now I wanted to add dots on the existing graph if the person smoked at that time. I am reading a csv file which consists of date, time, stress level and whether the person smoked or not (so 1 if they did and -1 if they didn't). I am using d3 v4.

This is what I am currently getting but the red dots are obviously in the wrong spot because they are showing up places I don't even have data. 

What I wanted was for the red dots to be on the graph and represent the times the user smoked.

Code:

<script src="https://d3js.org/d3.v4.min.js"></script>

    <script>

        var margin = {top: 8, right: 10, bottom: 2, left: 10},

                width = 1160 - margin.left - margin.right,

                height = 100 - margin.top - margin.bottom;

        var parseDate = d3.timeParse("%H:%M:%S");

        var x = d3.scaleTime()

                .range([0, width]);

        var y = d3.scaleLinear()

                .range([height, 0]);

        var area = d3.area()

                .x(function (d) {

                    return x(d.time);

                })

                .y0(height)

                .y1(function (d) {

                    return y(d.stress);

                });

        var line = d3.line()

                .x(function (d) {

                    return x(d.time);

                })

                .y(function (d) {

                    return y(d.stress);

                });

        d3.csv("6000smokedData3.csv", type, function (error, data) {

            // Nest data by date.

            var dates = d3.nest()

                    .key(function (d) {

                        return d.date;

                    })

                    .entries(data);

            // Compute the maximum stress per date, needed for the y-domain.

            dates.forEach(function (s) {

                s.maxPrice = d3.max(s.values, function (d) {

                    return d.stress;

                });

            });

            // Compute the minimum and maximum time across dates.

            // We assume values are sorted by time.

            x.domain([

                d3.min(dates, function (s) {

                    return s.values[0].time;

                }),

                d3.max(dates, function (s) {

                    return s.values[s.values.length - 1].time;

                })

            ]);

            // Add an SVG element for each date, with the desired dimensions and margin.

            var svg = d3.select("body").selectAll("svg")

                    .data(dates)

                    .enter().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 + ")");

            //Add the scatterplot

            svg.selectAll("dot")

                    .data(data)

                    .enter().append("circle")

                    .attr("r", 4)

                    .style("fill", function (d) {

                        return "red";

                    })

                    .attr("cx", function (d) {

                        if (d.smoked == 1) {

                            return x(d.time);

                        }

                    })

                    .attr("cy", function (d) {

                        if (d.smoked == 1) {

                            return y(d.stress);

                        }

                    });

            // 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));

            // Add the area path elements. Note: the y-domain is set per element.

            svg.append("path")

                    .attr("class", "area")

                    .attr("d", function (d) {

                        y.domain([0, d.maxPrice]);

                        return area(d.values);

                    });

            // Add the line path elements. Note: the y-domain is set per element.

            svg.append("path")

                    .attr("class", "line")

                    .attr("d", function (d) {

                        y.domain([0, d.maxPrice]);

                        return line(d.values);

                    });

            // Add a small label for the date name.

            svg.append("text")

                    .attr("x", width - 6)

                    .attr("y", height - 6)

                    .style("text-anchor", "end")

                    .text(function (d) {

                        return d.key;

                    });

        });

        function type(d) {

            d.stress = +d.stress;

            d.time = parseDate(d.time);

            d.smoked = +d.smoked;

            return d;

        }

    </script>

Few lines of csv file:

date,time,stress,smoked

2014-08-04,11:24:28,0.026191,-1

2014-08-04,11:24:29,0.026183,-1

2014-08-04,11:24:30,0.031845,-1

2014-08-04,11:24:31,0.01235,-1

Thank you