31:[] 2f:{"title":"jQuery vs D3 performance test","cells":[{"id":0,"value":"md`\n# jQuery vs D3 performance test\nby Sungryeol Park\n## caveat\n- made in response to other person's request\n- this measurement is nowhere perfect(the result may differ from PC, OS, Browser)\n- don't use this to denounce \\`d3.js\\`. IMHO, it still is the best toolset for data oriented structuring.\n- it'll take few seconds or minutes to render the result table below. your PC may freeze.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"settings = ({\n maxTry: 1000,\n repetition: 100\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":45,"value":"getAverage = (func, ...args) =>\n Array.from({ length: settings.repetition })\n .map(() => func(...args))\n .reduce((ac, cv) => ac + cv, 0) / settings.repetition","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"jCreationTest = data => {\n const jCreateStart = window.performance.now();\n const svg = $('svg');\n const nodes = data.map(() => svg.append($('rect').addClass('test')));\n const jCreateEnd = window.performance.now();\n return jCreateEnd - jCreateStart;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"dCreationTest = data => {\n const dCreateStart = window.performance.now();\n const d3svg = d3.create('svg');\n const nodes = d3svg.selectAll('.test').data(data).enter().append('rect');\n const dCreateEnd = window.performance.now();\n return dCreateEnd - dCreateStart;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"jUpdateTest = data => {\n const svg = $('svg');\n const nodes = data.map((_, i) => $('rect').addClass('test'));\n const jStart = window.performance.now();\n nodes.forEach((n, i) => n.attr('width', nodes[i]));\n const jEnd = window.performance.now();\n return jEnd - jStart;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":88,"value":"dUpdateTest = data => {\n const d3svg = d3.create('svg');\n const nodes = d3svg.selectAll('.test').data(data);\n nodes\n .enter()\n .append('rect')\n .classed('test', true);\n\n const newData = data.map(i => i * 2);\n const dStart = window.performance.now();\n\n nodes.data(newData).attr('width', d => d);\n\n const dEnd = window.performance.now();\n return dEnd - dStart;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"{\n // object creation\n\n const testData = Array.from({ length: settings.maxTry }).map((_, i) => i);\n\n // jQuery\n const jCreationResult = getAverage(jCreationTest, testData);\n const jUpdateResult = getAverage(jUpdateTest, testData);\n\n // d3\n const dCreationResult = getAverage(dCreationTest, testData);\n const dUpdateResult = getAverage(dUpdateTest, testData);\n\n return html`\n

test result

\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

test type	jQuery(ms)	d3(ms)
object creation	${jCreationResult}	${dCreationResult}
object update	${jUpdateResult}	${dUpdateResult}

\n`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"$$ = require('jquery')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}