cubism, d3 data join

Question

I'm a d3 beginner, and I'm sorry to admit that I'm having trouble simply constructing the cross-product of two arrays. I'm actually working with Cubism, doing something very simple: for each type, produce a few aggregates.

My attempt:

var aggs = [
    {title: 'mean', metric: function(d) { return cube.metric("sum(" + d +  (value))").divide(cube.metric("sum(" + d + ")")); }},
    {title: 'count', metric: function(d) { return cube.metric("sum(" + d + ")").divide(step / 1e3); }}
]

d3.json(origin + "/1.0/types", function(types) {    
    d3.select("body").insert("div", ".bottom")
    .attr("class", "group")
    .selectAll(".typegrp")
    .data(types)
    .enter()
    .append("div")
    .attr("class", "typegrp")
    .selectAll("div")
    .data(aggs)
    .enter()
    .append("div")
    .attr("class","horizon")
    .call(context.horizon()
        .title(function(d) { return d.title; })
        .metric(function(d) { return d.metric(FOOOO); })
     );
});

The part I don't understand is the "FOOOO" part. from the 'inner' context (the row in 'aggs'), how do I access the 'outer' context (the row in 'types')?

Thanks in advance.

EDIT: here's a complete working example as suggested by nick, below.

var aggs = [
            {title: 'mean',  metric: function(d) { return cube.metric("sum(" + d + "(value))").divide(cube.metric("sum(" + d + ")")); }},
            {title: 'sum',   metric: function(d) { return cube.metric("sum(" + d + "(value))"); }},
            {title: 'count', metric: function(d) { return cube.metric("sum(" + d + ")"); }},
            {title: 'max',   metric: function(d) { return cube.metric("max(" + d + "(value))"); }},
            {title: 'min',   metric: function(d) { return cube.metric("min(" + d + "(value))"); }}
        ]

d3.json(origin + "/1.0/types", function(types) {    
    d3.select("body")
    .insert("div", ".bottom")
    .attr("class", "group")
    .selectAll(".typegrp")
    .data(types)
    .enter()
    .append("div")
    .attr("class", "typegrp")
    .each(function(type) {
        d3.select(this)
        .selectAll("div.horizon")
        .data(aggs)
        .enter().append("div")
        .attr("class","horizon")
        .each(function(agg) {
            d3.select(this)
            .call(context.horizon()
                .title(agg.title + " " + type)
                .metric(agg.metric(type))
            );
        });
    });
});

Answer 1

I haven't used Cubism, but I think there are two options here:

1. The easy option, if you really only have two aggregate metrics - don't do a data join, just add them separately.

   var typeGroups = d3.select("body").insert("div", ".bottom")
       .attr("class", "group")
     .selectAll(".typegrp")
       .data(types);
   
   typeGroups.enter()
     .append("div")
       .attr("class", "typegrp");
   
   typeGroups
     .append("div")
       .attr("class","horizon")
       .call(context.horizon()
           .title('mean')
           .metric(function(d) { return cube.metric( ... ); })
       );
   
   typeGroups.
     .append("div")
       .attr("class","horizon")
       .call(context.horizon()
           .title('count')
           .metric(function(d) { return cube.metric( ... ); })
       );
   

2. The slightly harder option - join the aggs array within .each calls:

   typeGroups.enter()
     .append("div")
       .attr("class", "typegrp")
       .each(function(type) {
           d3.select(this).selectAll("div.horizon")
               .data(aggs)
             .enter().append("div")
               .attr("class","horizon")
               .each(function(agg) {
                   d3.select(this)
                       .call(context.horizon()
                           .title(agg.title)
                           .metric(agg.metric(type))
                       );
               });
       });
   

   This gives you access to the type variable at the time you call context.horizon().