Using D3.JS, you can determine the minimum and maximum values within an array of arrays, a feature that is not

Question

Using D3.JS, you can determine the minimum and maximum values within an array of arrays, a feature that is not

My data is structured as an array of arrays, with each inner array containing objects like this:

series = [ [ { "x":2013-01-01, "y":100 }, { "x":2013-01-02, "y":300 } ...],
           [ { "x":2013-01-01, "y":1000 }, { "x":2013-01-02, "y":300 } ...],...
         ]

I need to find the minimum and maximum values for both "x" and "y" using d3.js.

If I had a single array like this:

miniseries = [ { "x":2013-01-01, "y":100 }, { "x":2013-01-02, "y":300 } ...]

I could use a statement like this:

minX = d3.min(miniseries, function(d){return d.x});

However, I am unsure how to handle an array of arrays instead of just a single array.

javascript arrays d3.js

Answer 1

Answer №1

Let's find the minimum x value in a series using D3 library:
var minX = d3.min(series, function (ms) {
    return d3.min(ms, function (d) {
        return d.y
    })
});

Answer 2

Let's find the minimum x value in a series using D3 library:
var minX = d3.min(series, function (ms) {
    return d3.min(ms, function (d) {
        return d.y
    })
});

Answer 3

Answer №2

Simply loop through the data set and separate the values into two arrays (one for each axis). From there, you can easily determine the minimum and maximum values for both axes using the following approach:

To identify the minimum/maximum date (x-Axis):

// Example dataset
var dates = [ 
    new Date("2019-01-01"),
    new Date("2019-02-01"),
    new Date("2019-03-01")
];

var minDate = new Date(Math.min.apply(null, dates));
var maxDate = new Date(Math.max.apply(null, dates));

To discover the minimum/maximum value (y-Axis):

// Example dataset
var valuesAxisY = [200, 400, 600, 100];

var min = Math.min.apply(null, valuesAxisY),
var max = Math.max.apply(null, valuesAxisY);

Answer 4

Simply loop through the data set and separate the values into two arrays (one for each axis). From there, you can easily determine the minimum and maximum values for both axes using the following approach:

To identify the minimum/maximum date (x-Axis):

// Example dataset
var dates = [ 
    new Date("2019-01-01"),
    new Date("2019-02-01"),
    new Date("2019-03-01")
];

var minDate = new Date(Math.min.apply(null, dates));
var maxDate = new Date(Math.max.apply(null, dates));

To discover the minimum/maximum value (y-Axis):

// Example dataset
var valuesAxisY = [200, 400, 600, 100];

var min = Math.min.apply(null, valuesAxisY),
var max = Math.max.apply(null, valuesAxisY);

Using D3.JS, you can determine the minimum and maximum values within an array of arrays, a feature that is not

Answer №1

Answer №2

Similar questions

Vibrant array of colors in AmCharts' line graphs

Navigate to the editing page with Thymeleaf in the spring framework, where the model attribute is passed

Populating an array with a reference to the array

Storing the result of an Angular $http.get request in a variable

Mastering Fluent UI Web: Adjusting the border radius of a TextField component

Adjusting the size of a Vue component on the fly

Unable to access MongoDB documents using NodeJS/Express

Using jQuery to extract contact information from Google: A step-by-step guide

What is the trick to getting an accordion to expand when hovering, rather than when clicking?

Leveraging the FileReader API within a Vue.js component function

What is the best way to specifically target and style a component with CSS in a React application?

When using Browserify, the function require() on a concatenated string will not include the module in the output script

When processing a series of input values, a C function executes successfully, but unexpectedly encounters a Segmentation Fault error with a value of

Ways to break apart a string of text without a regular pattern

How can I replace specific text with HTML code in a webpage?

JavaScript Class vs Function as Definition

Tips for delaying a node api's execution until a database query no longer returns null

AngularJS routing not rendering the correct view

What is the best way to incorporate audio in my node.js messaging platform?

Is it possible for two distinct devices to generate the same HWID using Pushwoosh Cordova API?