Get the volume of a complex data structure in D3

Question

I am trying to get the dimensions of my xy data that have this nested form:

data = [
        {"points": [{"x": 0, "y": 0}, {"x": -5, "y": 100}, {"x": 300, "y": 1}, ...],
         "rgbval": "rgb(0, 0, 0)"
        },
        {"points": [{"x": 1, "y": 2}, {"x": -7000, "y": 2}, {"x": 0, "y": 0}, ...],
         "rgbval": "rgb(255, 0, 0)"
        }, 
         .
         .
         .
       ]

In the case of sample data, the data I'm looking for is as follows:

x_domain = [-7000, 300]
y_domain = [0, 100]

I can get the size of a specific group of points using:

for i in [0...data.length]
    console.log(d3.extent(data[i].points, (d) -> d.x))  # x_domain of i_th group of points
    console.log(d3.extent(data[i].points, (d) -> d.y))  # y_domain of i_th group of points

In the sample example, this will give me two x_domains and two y_domains. I want common xy data domains.

Answer 1

First merge the arrays using d3.merge (which is pretty bizarre concat):

var merged = d3.merge(data.map(function(d){ return d.points}));

Then just get the normal path:

var xExtent = d3.extent(merged, function(d){ return d.x});
var yExtent = d3.extent(merged, function(d){ return d.y});

Here is a demo:

var data = [{
  "points": [{
    "x": 0,
    "y": 0
  }, {
    "x": -5,
    "y": 100
  }, {
    "x": 300,
    "y": 1
  }],
  "rgbval": "rgb(0, 0, 0)"
}, {
  "points": [{
    "x": 1,
    "y": 2
  }, {
    "x": -7000,
    "y": 2
  }, {
    "x": 0,
    "y": 0
  }],
  "rgbval": "rgb(255, 0, 0)"
}];

var merged = d3.merge(data.map(function(d) {
  return d.points
}));

var xExtent = d3.extent(merged, function(d) {
  return d.x
});
var yExtent = d3.extent(merged, function(d) {
  return d.y
});

console.log("x extent: " + xExtent);
console.log("y extent: " + yExtent);

<script src="https://d3js.org/d3.v4.min.js"></script>

Run codeHide result

PS: do not allow this unusual d3.mergefor the more famous selection.merge.