Benchmark: Multiple Attributes Performance IV

HTML Preparation code:

<script src="https://d3js.org/d3.v5.min.js"></script>

Script Preparation code:

const data = d3.range(100).map(() => ({
  x: Math.random() * 300,
  y: Math.random() * 150
}));

const svg = d3.select("body")
  .append("svg");
  
const circles = svg.selectAll("circle")
	.data(data)
  .enter()
  .append("circle")
  .attr("cx", d=>d.x)
  .attr("cy", d=>d.y)
  .attr("r", 2)
  .style("fill", "teal");

Tests:

Default
const data = d3.range(100).map(() => ({ x: Math.random() * 300, y: Math.random() * 150 })); const svg = d3.select("svg"); const circles = svg.selectAll("circle") .data(data) .attr("cx", d=>d.x) .attr("cy", d=>d.y) .attr("r", 2) .style("fill", "teal");
each with setAttribute
const data = d3.range(100).map(() => ({ x: Math.random() * 300, y: Math.random() * 150 })); const svg = d3.select("svg"); const circles = svg.selectAll("circle") .data(data) .each((d, i, n) => { n[i].setAttribute("cx", d.x); n[i].setAttribute("cy", d.y); n[i].setAttribute("r", 2); }) .style("fill", "teal")
setAttribute with loop
const data = d3.range(100).map(() => ({ cx: Math.random() * 300, cy: Math.random() * 150, r: 2 })); const svg = d3.select("svg"); const circles = svg.selectAll("circle") .data(data) .each((d, i, n) => { for(let key in d){ n[i].setAttribute(key, d[key]) } }) .style("fill", "teal")
Detached
const data = d3.range(100).map(() => ({ cx: Math.random() * 300, cy: Math.random() * 150, r: 2 })); const svg = d3.select("svg").remove(); const circles = svg.selectAll("circle") .data(data) .attr("cx", d=>d.cx) .attr("cy", d=>d.cy) .attr("r", 2) .style("fill", "teal"); d3.select("body") .append(() => svg.node())

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Default
each with setAttribute
setAttribute with loop
Detached

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 months ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36

Browser/OS: Chrome 132 on Linux

View result in a separate tab

Test name	Executions per second
Default	4018.4 Ops/sec
each with setAttribute	4026.6 Ops/sec
setAttribute with loop	4138.4 Ops/sec
Detached	5702.7 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

Let's break down what is being tested in this benchmark and the different approaches being compared.

**Benchmark Overview**

The benchmark measures the performance of D3.js, a popular JavaScript library for producing dynamic, interactive data visualizations. The test case generates 100 random circles with x and y coordinates, and then appends them to an SVG element using D3.js.

**Options Compared**

Four different approaches are being compared:

1. **Default**: This is the original D3.js code that creates the circles.
2. **each with setAttribute**: In this version, the `setAttribute` method is called on each data object in the `data` array, which allows for more flexibility but may be slower due to the overhead of attribute setting.
3. **setAttribute with loop**: This approach uses a loop to iterate over the properties of each data object and sets the attributes using `setAttribute`. This can be faster than calling `setAttribute` on each individual property.
4. **Detached**: In this version, the SVG element is created separately from the D3.js code, which may lead to slower performance due to the extra overhead of creating a separate DOM node.

**Pros and Cons**

* **Default**: Pros: Simple and straightforward implementation, easy to read and maintain. Cons: May have performance issues due to the repeated use of `setAttribute`.
* **each with setAttribute**: Pros: More flexible than calling `setAttribute` on each individual property, but may be slower due to attribute setting overhead.
* **setAttribute with loop**: Pros: Faster than calling `setAttribute` on each individual property, but requires more code and can be harder to read. Cons: May have performance issues if not optimized correctly.
* **Detached**: Pros: None apparent from the benchmark data, but creating a separate SVG element may lead to slower performance.

**Library Used**

The D3.js library is used in all four test cases. D3.js provides a powerful and flexible way to manipulate the DOM and create interactive data visualizations.

**Special JS Feature or Syntax**

There are no special JavaScript features or syntaxes being tested in this benchmark, as it only focuses on comparing different implementation approaches using standard JavaScript.

**Alternatives**

If you're looking for alternative libraries or frameworks for creating data visualizations, some popular options include:

* Chart.js
* Highcharts
* Plotly
* React Vis

Keep in mind that each library has its own strengths and weaknesses, and the choice of library will depend on your specific use case and requirements.

Related benchmarks:

Multiple Attributes Performance IV (version: 0)

Comparing performance of: Default vs each with setAttribute vs setAttribute with loop vs Detached

Created: 5 years ago by: Guest

Jump to the latest result

Default

each with setAttribute

setAttribute with loop

Detached

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):