Benchmark: d3test2 - MeasureThat.net

HTML Preparation code:

<div id="test3"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.0.0/d3.min.js"></script>

Script Preparation code:

function compile3(arr){
  d3.select("#test3").selectAll('div')
    .data(arr)
    .join(init)
    .call(update)

  function init(enter) {
	const box = enter.append("div")
      .style('width', '150px')  
      .style('border', '1px solid')
      box.append('span')
      box.append('div')
	  update(box)
  }
  
  function update(box) {
    box.select('span').text(d => d.title)
    box.select('div').text(d => d.text)
  }
}

function compile2(arr){
  d3.select("#test3").html('').selectAll('div')
    .data(arr)
    .enter()
    .append('div')
    .style('width', '150px')  
    .style('border', '1px solid')
    .each(html)

  function html(d) {
    const box = d3.select(this)
    box.append('span').text(d.title)
    box.append('div').text(d.text)
  }
}

function compile1a(arr){
  const fragment = new DocumentFragment()

  arr.forEach(html)
  const wrap = document.getElementById('test3')
  wrap.innerHTML = ''
  wrap.appendChild(fragment)
  
  function html(d) {
    const box = document.createElement('div')
	box.style.width = '150px'
	box.style.border = '1px solid'
	const span = document.createElement('span')
	span.textContent = d.title
	const div = document.createElement('div')
	div.textContent = d.text
    box.appendChild(span)
	box.appendChild(div)
    fragment.append(box)
  }
}

function compile1(arr){
  const fragment = new DocumentFragment()

  arr.forEach(html)
  const wrap = d3.select("#test3").html('')
  wrap.node().append(fragment)

  function html(d) {
    const box = d3.create('div')
    .style('width', '150px')  
    .style('border', '1px solid')
    box.append('span').text(d.title)
    box.append('div').text(d.text)
    fragment.append(box.node())
  }
}

function compile(arr){
  const el = arr.map(html).join('')
  d3.select("#test3").html(el)

  function html(d) {
    const box = d3.create('div')
    .style('width', '150px')  
    .style('border', '1px solid')
    box.append('span').text(d.title)
    box.append('div').text(d.text)
    return box.node().outerHTML
  }
}
//https://observablehq.com/@d3/selection-join
function getArr() {
  const arr = []

  function addOne() {
    const rand = Math.round(Math.random()*100)
    const title = 'title'+rand
    const text = 'asljfla aslj a asllj sa lsj'
    arr.push({title, text})
  }
  const count = 100
  for (let i = 0; i < count; i++) addOne()
  return arr
}

Tests:

Fragment
const arr = getArr() compile1a(arr) const arr2 = getArr() compile1a(arr2)
Join
const arr = getArr() compile3(arr) const arr2 = getArr() compile3(arr2)
Frag + d3
const arr = getArr() compile1(arr) const arr2 = getArr() compile1(arr2)
Clear
const arr = getArr() compile2(arr) const arr2 = getArr() compile2(arr2)
Replace2
const arr = getArr() compile(arr) const arr2 = getArr() compile(arr2)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Fragment
Join
Frag + d3
Clear
Replace2

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:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

d3test2 (version: 0)

Checking d3 performance

Comparing performance of: Fragment vs Join vs Frag + d3 vs Clear vs Replace2

Created: 2 years ago by: Guest

Jump to the latest result

Fragment

Join

Frag + d3

Clear

Replace2

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

No previous run results