CODEWITHSUNDEEP
javascriptd3.js
Vinicenzo
Vinicenzo

Reputation: 11

d3v4.js - d3.line not drawing the right values

I initially followed a simple line example to graph a line in d3.js (https://bl.ocks.org/d3noob/402dd382a51a4f6eea487f9a35566de0).

My real world requires to manipulate a bit the original data, and thus I added a nest() and a rollup() to sum the closes per day. I.e. on May 07, the graph line should show 400 instead of 100.

Based on the codes and tsv file below:

Based on my research, my feeling is the d3.line function is reading the "data" info instead of the nested/rolledup "groupByDate" information (not reading "values" but "closes"). When i try to change things, I get a message: d3.v4.min.js:2 Error: <path> attribute d: Expected number, "MNaN,450LNaN,447L…"

I've searched through many answers in this site and changed my d3.line function to include the groupByDate information, but it seems, the wrong way. I just need that line to jump to 400 on day 07, as in the console.

    <!DOCTYPE html>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var parseTime = d3.timeParse("%d-%b-%y");

var x = d3.scaleTime()
    .rangeRound([0, width]);

var y = d3.scaleLinear()
    .rangeRound([height, 0]);

var vline = d3.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(+d.close); });

d3.tsv("data.tsv", function(d) {
  d.date = parseTime(d.date);
  d.close = +d.close;
  return d;
}, function(data) {
  var groupByDate = d3.nest()
    .key(function(d) { return d.date; })
    .rollup(function(d) { return d3.sum(d, function(g) { return +g.close; }); })
    .entries(data);

    groupByDate.forEach(function(d) {
         d.date = d.key;
         d.close = +d.close;
         d.close = d.value;
        });

    console.log(groupByDate);


  x.domain(d3.extent(data, function(d) { return d.date; }));
  y.domain(d3.extent(groupByDate, function(d) { return d.value; }));

  g.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x))
    .select(".domain")
      .remove();

  g.append("g")
      .call(d3.axisLeft(y))
    .append("text")
      .attr("fill", "#000")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", "0.71em")
      .attr("text-anchor", "end")
      .text("Price ($)");

  g.append("path")
      .datum(data)
      .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-linejoin", "round")
      .attr("stroke-linecap", "round")
      .attr("stroke-width", 1.5)
      .attr("d", vline);
});

</script>

data.tsv

date    close
24-Apr-07   93.24
25-Apr-07   95.35
26-Apr-07   98.84
27-Apr-07   99.92
30-Apr-07   99.80
1-May-07    99.47
2-May-07    100.39
3-May-07    100.40
4-May-07    100.81
7-May-07    100.00
7-May-07    100.00
7-May-07    100.00
7-May-07    100.00
8-May-07    105.06
9-May-07    106.88
10-May-07   107.34
11-May-07   108.74
14-May-07   109.36
15-May-07   107.52
16-May-07   107.34

Upvotes: 1

Views: 290

Answers (1)

Emma Lewis
Emma Lewis

Reputation: 402

You should be passing groupByData rather than data to your path. But the reason that this then doesn't work is that the nest.key has to be a string, so it's parsing your time back to a string which then won't work with your x scale. I'd suggest removing parseTime from the row conversion and instead adding it to your x scale domain and to the vline x function (although this means putting it in two places so perhaps there's a better way...).

Your x scale domain would become:

x.domain(d3.extent(data, function(d) { return parseTime(d.date); }));

And vline would become:

var vline = d3.line() .x(function(d) { return x(parseTime(d.date)); })...

Upvotes: 1

Related Questions