For a graph I'm trying to do with d3.js I need to set up the scales for the axis.

The data for the graph is stored in a Json file structured like so:

[{
    "id" : "AustraliaNewZealand" ,
    "year" : [1990,1992,1994,1993,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010],
    "value":[477790,485825,487296,488885,502585,511718,526594,538967,550556,563572,577171,579126,591635,599216,604267,608954,615853,623685,618961,614920]
}, 
{
    "id":"CentralEurope",
    "year":[1990,1992,1994,1993,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010],
    "value":[1548736,1334452,1313088,1283248,1314709,1360546,1343907,1285511,1237278,1251872,1244069,1233778,1284639,1297510,1317861,1359787,1396681,1361445,1278731,1343044]
}, 
{
    "id":"EasternEurope",
    "year":[1990,1992,1994,1993,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010],
    "value":[4418516,3530464,3287987,2925644,2775181,2672238,2540975,2495036,2513372,2515375,2540796,2544848,2598148,2637682,2622241,2709974,2714204,2740248,2565213,2680226]
}, 
{
    "id":"NorthAmerica",
    "year":[1990,1992,1994,1993,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010],
    "value":[6750754,6821412,6948829,7059001,7166869,7386971,7460485,7509719,7573562,7790060,7675762,7710685,7769154,7896824,7918461,7841686,7966277,7751508,7277713,7493948]
}, 
{
    "id":"WesternEurope",
    "year":[1990,1992,1994,1993,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010],
    "value":[4365949,4290345,4222425,4221029,4264725,4353056,4290057,4310736,4251628,4260565,4306230,4278128,4333237,4337031,4305560,4267515,4209481,4125479,3841580,3924831]
}]

and what I'd like to do is to iterate between the various arrays nested to get the years and values minimum and maximum values, but I don't know how to get those values. I managed to get the values of a single array using:

var xScale = d3 .time.scale()
                .domain((d3.extent(dataset[0].year)))
                .range([margin*2, (width - margin)]);
var yScale = d3 .scale.linear()
                .domain([0, d3.max(dataset[0].value)])
                .range([(height - margin), margin]);

where _dataset_ is the identifier of the callback function, but what I'd like to have is to get the minimum and maximum values between all the arrays (like for example min value is in array3 and max in array 1). I guess I should use a for cycle, but I don't know where I should put it and how to set it up to look in all the arrays.

For a graph I'm trying to do with d3.js I need to set up the scales for the axis.

The data for the graph is stored in a Json file structured like so:

[{
    "id" : "AustraliaNewZealand" ,
    "year" : [1990,1992,1994,1993,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010],
    "value":[477790,485825,487296,488885,502585,511718,526594,538967,550556,563572,577171,579126,591635,599216,604267,608954,615853,623685,618961,614920]
}, 
{
    "id":"CentralEurope",
    "year":[1990,1992,1994,1993,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010],
    "value":[1548736,1334452,1313088,1283248,1314709,1360546,1343907,1285511,1237278,1251872,1244069,1233778,1284639,1297510,1317861,1359787,1396681,1361445,1278731,1343044]
}, 
{
    "id":"EasternEurope",
    "year":[1990,1992,1994,1993,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010],
    "value":[4418516,3530464,3287987,2925644,2775181,2672238,2540975,2495036,2513372,2515375,2540796,2544848,2598148,2637682,2622241,2709974,2714204,2740248,2565213,2680226]
}, 
{
    "id":"NorthAmerica",
    "year":[1990,1992,1994,1993,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010],
    "value":[6750754,6821412,6948829,7059001,7166869,7386971,7460485,7509719,7573562,7790060,7675762,7710685,7769154,7896824,7918461,7841686,7966277,7751508,7277713,7493948]
}, 
{
    "id":"WesternEurope",
    "year":[1990,1992,1994,1993,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010],
    "value":[4365949,4290345,4222425,4221029,4264725,4353056,4290057,4310736,4251628,4260565,4306230,4278128,4333237,4337031,4305560,4267515,4209481,4125479,3841580,3924831]
}]

and what I'd like to do is to iterate between the various arrays nested to get the years and values minimum and maximum values, but I don't know how to get those values. I managed to get the values of a single array using:

var xScale = d3 .time.scale()
                .domain((d3.extent(dataset[0].year)))
                .range([margin*2, (width - margin)]);
var yScale = d3 .scale.linear()
                .domain([0, d3.max(dataset[0].value)])
                .range([(height - margin), margin]);

where _dataset_ is the identifier of the callback function, but what I'd like to have is to get the minimum and maximum values between all the arrays (like for example min value is in array3 and max in array 1). I guess I should use a for cycle, but I don't know where I should put it and how to set it up to look in all the arrays.

• javascript
• arrays
• json
• d3.js

3 Answers 3

It's very fun if we use a little functional programming instead of for loops here:

d3.extent(dataset.reduce(function(a,b) { return a.concat(b.year) }, []))

You can do the same thing with the values.

The Math functions min and max are really useful here if you use apply:

function getMinMax(array, type) {
  var out = [];
  array.forEach(function(el) { return out.push.apply(out, el[type]); }, []);
  return { min: Math.min.apply(null, out), max: Math.max.apply(null, out) };
}

console.log(getMinMax(array, 'year')); // { min=1990, max=2010 }
console.log(getMinMax(array, 'value')); // { min=477790, max=7966277}

Fiddle

Javascript now provides a flatMap method on Arrays which both flattens an array of arrays into a single array and applies a transforming function on each elements:

var [min, max] = d3.extent(dataset.flatMap(d => d.value));

For example:

var input = [
  { id: "AustraliaNewZealand", value: [477790,485825,487296,488885,502585,511718,526594,538967,550556,563572,577171,579126,591635,599216,604267,608954,615853,623685,618961,614920] },
  { id: "CentralEurope",       value: [1548736,1334452,1313088,1283248,1314709,1360546,1343907,1285511,1237278,1251872,1244069,1233778,1284639,1297510,1317861,1359787,1396681,1361445,1278731,1343044] },
  { id: "EasternEurope",       value: [4418516,3530464,3287987,2925644,2775181,2672238,2540975,2495036,2513372,2515375,2540796,2544848,2598148,2637682,2622241,2709974,2714204,2740248,2565213,2680226] }
];

var [min, max] = d3.extent(input.flatMap(d => d.value));

console.log(min);
console.log(max);

<script src="https://d3js/d3-array.v2.min.js"></script>