Benchmark: Multiple Attributes Performance III

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.x) .attr("cy", d=>d.y) .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

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:101.0) Gecko/20100101 Firefox/101.0

Browser/OS: Firefox 101 on Linux

View result in a separate tab

Test name	Executions per second
Default	1414.9 Ops/sec
each with setAttribute	1717.6 Ops/sec
setAttribute with loop	1655.1 Ops/sec
Detached	2410.2 Ops/sec

Multiple Attributes Performance III (version: 0)

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

Created: 4 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