Benchmark: d3 max on array from vs d3 max twice

HTML Preparation code:


<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js'></script>

Script Preparation code:

function getRandomInt(max) {
  return Math.floor(Math.random() * max);
}
var days = ['Sun', 'Mon', 'Tue', 'Wed','Thu', 'Fri', 'Sat'];
var data = [...Array(1000)].map(_ => ({day: days[getRandomInt(7)], values: (new Float64Array(1000)).map(_ => getRandomInt(1000))}));

Tests:

d3 max on array
d3.max(data.flatMap(d => Array.from(d.values)));
d3 max twice
d3.max(data.map(d => d3.max(d.values)));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
d3 max on array
d3 max twice

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:137.0) Gecko/20100101 Firefox/137.0

Browser/OS: Firefox 137 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
d3 max on array	74.3 Ops/sec
d3 max twice	286.9 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what is being tested.

**Benchmark Overview**

The benchmark is designed to compare two approaches for finding the maximum value in an array using D3.js, a popular JavaScript library for data visualization. The test is run on a large dataset of 1000 objects, each containing an array of values with random integers between 1 and 1000.

**Options Compared**

There are two options being compared:

1. **d3.max(data.flatMap(d => Array.from(d.values)))**: This approach uses the `flatMap` method to flatten the array of values into a single array, and then passes this array to the `max` function.
2. **d3.max(data.map(d => d3.max(d.values)))**: This approach uses the `map` method to apply the `max` function to each element in the array of values, and then passes the resulting arrays to the `max` function.

**Pros and Cons**

1. **d3.max(data.flatMap(d => Array.from(d.values)))**:
	* Pros: potentially faster since it reduces the number of array operations by flattening the data upfront.
	* Cons: may require more memory since it creates a new array with all values, and the `flatMap` method can be slower than direct iteration.
2. **d3.max(data.map(d => d3.max(d.values)))**:
	* Pros: does not require additional memory allocation, and avoids potential slow-downs due to large arrays.
	* Cons: may be slower since it requires iterating over each element in the array of values multiple times.

**Library and Purpose**

The library used is D3.js (Data-Driven Documents), which is a JavaScript library for producing dynamic, interactive data visualizations. The `d3.max` function is a part of this library and is used to find the maximum value in an array or other iterable.

**Special JS Feature or Syntax**

There are no special features or syntaxes being tested in this benchmark. However, it's worth noting that the use of `flatMap` and `map` methods is a relatively modern JavaScript feature, introduced in ECMAScript 2019.

**Other Alternatives**

If you're interested in exploring alternative approaches, here are some options:

* Using `Math.max()` function with direct iteration over the array of values: `d3.max(data.map(d => Math.max(...d.values)))`
* Using a custom implementation without relying on D3.js: creating a loop to iterate over each element in the array and find the maximum value.

Keep in mind that these alternatives may not provide the same performance benefits as using optimized libraries like D3.js.

Related benchmarks:

d3 max on array from vs d3 max twice (version: 0)

Comparing performance of: d3 max on array vs d3 max twice

Created: 4 years ago by: Guest

Jump to the latest result

d3 max on array

d3 max twice

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):