CODEWITHSUNDEEP
javascriptd3.js
OiRc
OiRc

Reputation: 1622

dot not displayed into a line/scatter combo plot d3.js

I'm using on d3.js, and it's working fine.But i'm not figuring out why the scatter serie is not displayed.

this is my code:

<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */

body { font: 12px Arial;}

path { 
    stroke: steelblue;
    stroke-width: 2;
    fill: none;
}

.axis path,
.axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
}

</style>
<body>

<script src="http://d3js.org/d3.v3.min.js"></script>

<script>

// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 70},
    width = 1000 - margin.left - margin.right,
    height = 600 - margin.top - margin.bottom;

// Parse the date / time
var parseDate = d3.time.format("%H-%M-%d-%b-%y").parse;

// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);

// Define the axes
var xAxis = d3.svg.axis().scale(x)
    .orient("bottom").ticks(5);

var yAxis = d3.svg.axis().scale(y)
    .orient("left").ticks(5);

// Adds the plot
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 + ")");

lineSerie();
scatterSerie();

function lineSerie(){
var line = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.close); });
d3.csv("timeSeries.csv", function(error, data) {
    data.forEach(function(d) {
        d.date = parseDate(d.date);
        d.close = +d.close;
    });
  x.domain(d3.extent(data, function(d) { return d.date; }));
  y.domain(d3.extent(data, function(d) { return d.close; }));

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
      .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".60em")
      .style("text-anchor", "end")
      .text("CPU RunQueue");

  svg.append("path")
      .datum(data)
      .attr("class", "line")
      .attr("d", line);
});

}

function scatterSerie(){
d3.csv("scatterSerie.csv", function(error, data) {
    data.forEach(function(d) {
        d.date = parseDate(d.date);
        d.close = +d.close;
    });
    svg.selectAll("dot")
        .data(data)
        .enter().append("circle")
        .attr("r", 3.5)
        .attr("cx", function(d) { return x(d.date); })
        .attr("cy", function(d) { return y(d.close); });

});
}
</script>
</body>

line serie:

date,close

05-17-14-Oct-14,223233.06250
05-18-14-Oct-14,223233.06250
05-19-14-Oct-14,223233.06250
05-20-14-Oct-14,223233.06250
05-21-14-Oct-14,223233.06250
05-22-14-Oct-14,223233.06250
05-23-14-Oct-14,223233.06250
05-24-14-Oct-14,223233.06250
05-25-14-Oct-14,223233.06250

line serie

date,close

10-27-02-Oct-14,223233.06250
10-28-02-Oct-14,223233.06250
10-29-02-Oct-14,223233.06250
10-30-02-Oct-14,223233.06250
10-31-02-Oct-14,223233.06250
10-32-02-Oct-14,223233.06250
10-33-02-Oct-14,223233.06250
10-34-02-Oct-14,223233.06250
10-35-02-Oct-14,223233.06250
10-36-02-Oct-14,223233.06250
10-37-02-Oct-14,223233.06250
10-38-02-Oct-14,223233.06250

the line serie is displayed, but the scatter serie is not being displayed. Can someone tell me what's wrong?

thanks in advance.

Upvotes: 0

Views: 57

Answers (1)

svdwoude
svdwoude

Reputation: 553

In your scatterSerie() function, your select statement doesn't add up. There's no such thing as a 'dot' element. You'll want to select all elements with class 'dot' like so (think jQuery):

svg.selectAll(".dot")
    .data(data)
    .enter().append("circle")
    .attr('class','dot')
    .attr("r", 3.5)
    .attr("cx", function(d) { return x(d.date); })
    .attr("cy", function(d) { return y(d.close); });

Don't forget to set that 'dot' class to your newly added elements, otherwise your future updates might go south.

One other thing you might wanna look into is the style of your circles. Right now they have no defined stroke color, stroke-width or fill. You can add those as CSS rules or add them within your d3 code.

Upvotes: 1

Related Questions