Identifying the function used in this d3 stacked bar chart example

Question

I am working my way through d3 tutorials, and learning both d3 and javascript as I go. My goal is to understand and alter the stacked bar chart example at this URL:

http://bl.ocks.org/3886208

In the code for this chart, there is this passage:

data.forEach(function(d) {
    var y0 = 0;
    d.ages = color.domain().map(function(name) **{ return {name: name, y0: y0, y1: y0 += +d[name]}; });**
    d.total = d.ages[d.ages.length - 1].y1;
  });

Could you please tell me what kind of process or function is being done in the bolded line "{ return {name: name, y0: y0, y1: y0 += +d[name]}" ?? I get that it's defining the treatment of (name), but the code is so terse that I can't figure out a search term to discover what it's doing. I'm hoping for a response like "that's an example of someone doing x in js or d3, and you need to go here to read more about it."

score 3 · Accepted Answer · answered Nov 22 '12 at 14:23

3

Thing surrounded by braces is an object literal. The anonymous function function(name) is returning an object literal for every value in the array returned by color.domain(). map is a javascript Array builtin.

Hopefully that is enough for you to search for more information. Object literals are used a lot in javascript; you would do well to read a decent primer (like Crockford's Javascript: The Good Parts) which will cover this, anonymous functions, closures etc (which are an idiom used a lot in frameworks like d3).

answered Nov 22 '12 at 14:23

seb

3,646
26
21

Thanks! I bought a javascript guide over the weekend, so these should be good starting points for me. Really appreciate it. – ouonomos Nov 26 '12 at 23:35
Good luck! By the way, you can "accept" the answer rather than upvote it, if you think it answers the question. That marks it as (potentially) closed in the Stack Overflow system. – seb Nov 29 '12 at 08:58

score 3 · Answer 2 · answered Sep 04 '14 at 22:27

I believe you're referring to the D3.js example for a Stacked Bar Chart

The code is returning an Object which is initialized to contain 3 different Objects (name, y0 and y1), after assigning the value to y1 it's also increasing the value of the variable y0 by d[name]. I'm re-writing the same code but with different syntax so it's easier to understand.

var y0 = 0;
d.ages = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });

Could be translated to:

var y0 = 0; // Initialize the temp var

d.ages = color.domain()
  .map(function(name) { 
    var myObj = { // Create and initialize the variable that will be returned
      name: name, 
      y0: y0, 
      y1: y0 + Number(d[name])
    };

  y0 += Number(d[name]); // Increase y0

  return myObj; // return the object and continue with the remaining values if there's a list
});

So for example, if in your input data you receive a list containing one line with the values [3, 5, 9] it will create an ages objects containing 3 other Objects for that line, something like:

  ages: [
    Object { name="youVariableName", y0=0, y1=3}
    Object { name="youVariableName", y0=3, y1=8}
    Object { name="youVariableName", y0=8, y1=17}
  ]

And so on for the remaining lines, with their correspondent values.

Identifying the function used in this d3 stacked bar chart example

2 Answers2