CODEWITHSUNDEEP
javascriptd3.jsdata-visualization
user10354957
user10354957

Reputation:

what does the equation within d3.nest().entries() do?

I have a question about the equation within entries() of d3.nest().

As far as I know, what goes into the parenthesis of 'entries()' is name of array that I'm going to bring in. However, in the following example, it puts an equation. Why the nest is not working once I replace it that with just 'data'? If I could understand what the equation does, it would be easier for me to understand.

the code is as below.

var x,
    y,
    duration = 1500,
    delay = 500;



var svg = d3.select("body").append("svg")
    .attr("width", w + m[1] + m[3])
    .attr("height", h + m[0] + m[2])
  .append("g")
    .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

var stocks,
    symbols;

// A line generator, for the dark stroke.
var line = d3.svg.line()
    .interpolate("basis")
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.price); });

// A line generator, for the dark stroke.
var axis = d3.svg.line()
    .interpolate("basis")
    .x(function(d) { return x(d.date); })
    .y(h);

// A area generator, for the dark stroke.
var area = d3.svg.area()
    .interpolate("basis")
    .x(function(d) { return x(d.date); })
    .y1(function(d) { return y(d.price); });

d3.csv("stocks.csv", function(data) {
  var parse = d3.time.format("%b %Y").parse;

  // Nest stock values by symbol.
  symbols = d3.nest()
      .key(function(d) { return d.symbol; })
      .entries(stocks = data);

  // Parse dates and numbers. We assume values are sorted by date.
  // Also compute the maximum price per symbol, needed for the y-domain.
  symbols.forEach(function(s) {
    s.values.forEach(function(d) { d.date = parse(d.date); d.price = +d.price; });
    s.maxPrice = d3.max(s.values, function(d) { return d.price; });
    s.sumPrice = d3.sum(s.values, function(d) { return d.price; });
  });

  // Sort by maximum price, descending.
  symbols.sort(function(a, b) { return b.maxPrice - a.maxPrice; });

  var g = svg.selectAll("g")
      .data(symbols)
    .enter().append("g")
      .attr("class", "symbol");

  setTimeout(lines, duration);
});

Upvotes: 1

Views: 78

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102188

That's not an equation (in the mathematical sense), that's just the assignment operator.

You can clearly see that that's not a math equation if we do this:

let x = 2;
x = x + 5;//x is 7 now

This x = x + 5 makes no sense as an equation. What's happening here is that we're taking the current value of x and adding 5 to it. In JavaScript, what would be closer to an equation in the mathematical sense of the word would be using == or ===.

Back to your question, what we have is this:

var stocks;//undefined at this point

Then, when you do...

.entries(stocks = data);

... you are simply assigning stocks to data, and passing that as the argument to entries. From the entries method viewpoint it makes absolutely no difference, the method would behave exactly the same if you just do .entries(data).

Finally, you can see that stocks is outside d3.csv, so what's probably happening here is that the person who wrote that code wants to use data outside the asynchronous function. That's something we usually see when programmers don't like or don't know how to deal with the asynchronous nature of those methods.

Upvotes: 1

Related Questions