CODEWITHSUNDEEP
javascriptarraysjsond3.js
tomtomtom
tomtomtom

Reputation: 1522

Find max and min values in a .json

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.

Upvotes: 4

Views: 7502

Answers (3)

Xavier Guihot
Xavier Guihot

Reputation: 61676

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.org/d3-array.v2.min.js"></script>

Upvotes: 0

homam
homam

Reputation: 1975

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.

Upvotes: 5

Andy
Andy

Reputation: 63550

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

Upvotes: 1

Related Questions