Locate the highest and lowest values within a .json file

Question

Locate the highest and lowest values within a .json file

When working on a graph using d3.js, one key step is setting up the scales for the axis.

The data for the graph is stored in a Json file with multiple arrays, each representing different regions and years:

[{
    "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]
}]

Ideally, I want to iterate through all the arrays to find the minimum and maximum values for years and values across all regions. One way to achieve this is by using a for loop, but figuring out where and how to implement it remains a challenge.

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]);

javascript arrays json d3.js

Answer 1

Answer №1

Experience the joy of incorporating a touch of functional programming in place of utilizing for loops:

d3.extent(dataSet.reduce(function(x,y) { return x.concat(y.month) }, []))

You have the capability to apply this method to the data values as well.

Answer 2

Experience the joy of incorporating a touch of functional programming in place of utilizing for loops:

d3.extent(dataSet.reduce(function(x,y) { return x.concat(y.month) }, []))

You have the capability to apply this method to the data values as well.

Answer 3

Answer №2

The Math functions min and max can be exceptionally handy when paired with the apply method:

function findMinAndMax(arr, type) {
  var result = [];
  arr.forEach(function(item) { return result.push.apply(result, item[type]); }, []);
  return { min: Math.min.apply(null, result), max: Math.max.apply(null, result) };
}

console.log(findMinAndMax(array, 'year')); // { minimum=1990, maximum=2010 }
console.log(findMinAndMax(array, 'value')); // { minimum=477790, maximum=7966277}

Check out this Fiddle for the code implementation.

Answer 4

The Math functions min and max can be exceptionally handy when paired with the apply method:

function findMinAndMax(arr, type) {
  var result = [];
  arr.forEach(function(item) { return result.push.apply(result, item[type]); }, []);
  return { min: Math.min.apply(null, result), max: Math.max.apply(null, result) };
}

console.log(findMinAndMax(array, 'year')); // { minimum=1990, maximum=2010 }
console.log(findMinAndMax(array, 'value')); // { minimum=477790, maximum=7966277}

Check out this Fiddle for the code implementation.

Answer 5

Answer №3

With the latest update, Javascript has introduced a flatMap method for Array, which not only flattens an array of arrays into a single array but also applies a transforming function to each element:

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

For demonstration:

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>

Answer 6

With the latest update, Javascript has introduced a flatMap method for Array, which not only flattens an array of arrays into a single array but also applies a transforming function to each element:

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

For demonstration:

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>

Locate the highest and lowest values within a .json file

Answer №1

Answer №2

Answer №3

Similar questions

Center a span vertically inside a div as the text within the span grows to occupy the entire div

Manipulating CSS styles with jQuery

Why isn't my classList .add method working properly?

Validation using Joi allows for a field to be optional, but if it is included, it must be a positive integer

Invalid index when trying to add to an array

Developing an interactive Breadcrumb component using Vue.js in the latest version, Vue 3

Issue with Ajax form submission on one specific page

Navigating through directory paths in JavaScript can be a daunting task for many

Transforming a value within a controller into a directive

Exploring ways to locate a specific text within a URL using nodeJS

Tips for creating a unit test for a React Component utilizing the useEffect hook and asynchronous fetch

Adjusting font size, contrast, brightness, and sound levels on a website with the help of jQuery

Having difficulty accessing any of the links on the webpage

The invocation of $.ajax does not work as a function

Utilizing Angular's DomSanitizer to safely bypass security scripts

Modify the values of all cells within a specific column in a table by utilizing a 2D array for both rows and cells

Fetching JSON data in NodeJS and rendering it in an EJS template

Guide on using jq to parse an array of JSON objects

Configuring Webpack for a React application with Express and Babel

Replicate the form to a new one while concealing the elements and then submit it