2d:null 2e:["$","title",null,{"children":"Function comparison | Tom Kristian Tjemsland | Observable"}] 33:T140a,GeneratePlot = (data) => { const width = 850; const height = 400; const margin = {h: 70, top: 70, bottom: 250}; // Find mean const curMean = d3.mean(data.curPerformance); const newMean = d3.mean(data.newPerformance); // Find absolute mean const absMean = (curMean + newMean) / 2; // Get highest value within threshold let absMax = -Infinity; for (let i = 0; i < data.curPerformance.length; i++) { const val = Math.max(data.curPerformance[i], data.newPerformance[i]); if (val < absMean * 2 && val > absMax) absMax = val; } const xMax = data.curPerformance.length; // 2D data arrays const curData = []; const newData = []; for(let i = 0; i < xMax; i++) { curData.push([i, data.curPerformance[i]]); newData.push([i, data.newPerformance[i]]); } const svg = d3.create('svg') .style('width', `${width + 2 * margin.h}px`) .style('height', `${height + margin.top + margin.bottom}px`); const main = svg.append('g') .attr('transform', `translate(${margin.h}, ${margin.top})`) // Gain info text main.append('text') .attr('transform', `translate(${width / 2}, ${-30})`) .style('text-anchor', 'middle') .text(data.gain); // Append clip const clip = main.append('clipPath') .attr('id', 'clip') .append('rect') .attr('width', width) .attr('height', height) .attr('x', 0) .attr('y', 0); const x = d3.scaleLinear() .domain([0, xMax]) .range([0, width]) const y = d3.scaleLinear() .domain([0, absMax]) .range([height, 0]) const lineFunction = d3.line() .x(d => x(d[0])) .y(d => y(d[1])); // Clip graphics outside region const graphics = main.append('g') .attr('clip-path', 'url(#clip)'); graphics.append("path") // Current line .datum(curData) .attr("fill", "none") .attr('stroke', 'Crimson') .attr('stroke-width', '1px') .attr("d", lineFunction); graphics.append("path") // New line .datum(newData) .attr("fill", "none") .attr('stroke', 'SteelBlue') .attr('stroke-width', '1px') .attr("d", lineFunction); // Append x-axis const xAxis = main.append('g') .attr('transform', `translate(0, ${height})`) .call(d3.axisBottom(x)); // Append y-axis main.append('g') .call(d3.axisLeft(y)); // text label for the x axis main.append('text') .attr('transform', `translate(${width / 2}, ${height + 40})`) .style('text-anchor', 'middle') .style('font-weight', 'bold') .text('Iterations'); // text label for the y axis main.append('text') .attr('transform', `translate(${-55}, ${height / 2}) rotate(-90)`) .style('text-anchor', 'middle') .style('font-weight', 'bold') .text('Avg. execution time (ms)'); // >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> // Construct legend const legend = svg.append('g') .attr('transform', `translate(${width - 100 + margin.h}, 0)`); legend.append('rect') .attr('fill', '#E3E3E3') .attr('width', '100px') .attr('height', '50px') .attr('rx', '8') .attr('ry', '8') legend.append('path') .attr("fill", "none") .attr('stroke', 'Crimson') .attr('stroke-width', '2px') .attr("d", 'M5,15L25,15'); legend.append('path') .attr("fill", "none") .attr('stroke', 'SteelBlue') .attr('stroke-width', '2px') .attr("d", 'M5,35L25,35'); legend.append('text') .attr('x', 35) .attr('y', 15) .text('Current') .style('font-size', '15px') .attr('alignment-baseline','middle'); legend.append('text') .attr('x', 35) .attr('y', 35) .text('New') .style('font-size', '15px') .attr('alignment-baseline','middle'); // >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> // Additional data const eqRoot = svg.append('g') .attr('width', '300px') .attr('height', '150px') .attr('transform', `translate(${margin.h}, ${margin.top + height + 70})`); eqRoot.append('text') .attr('transform', `translate(${-25}, 75) rotate(-90)`) .style('text-anchor', 'middle') .style('font-weight', 'bold') .text('Output similarity'); eqRoot.append('rect') .attr('fill', 'OliveDrab') .attr('width', '50px') .attr('height', '150px') eqRoot.append('rect') .attr('fill', 'FireBrick') .attr('width', '50px') .attr('height', '150px') .attr('transform', 'translate(75, 0)'); eqRoot.append('path') .attr('fill', 'none') .attr('stroke', 'Black') .attr('stroke-width', '1px') .attr("d", `M-10,150L135,150`); eqRoot.append('text') .attr('transform', 'translate(25, 170)') .attr('fill', 'OliveDrab') .style('text-anchor', 'middle') .text('Exact') eqRoot.append('text') .attr('transform', 'translate(100, 170)') .attr('fill', 'FireBrick') .style('text-anchor', 'middle') .text('Different') // >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> return svg.node(); }34:T76f,Compare = (func1, func2, input1, input2, iterations, batches) => { const currentPerformance = new Array(iterations); const newPerformance = new Array(iterations); // Performance variables let start = 0; let end = 0; for(let i = 0; i < iterations; i++) { func1(...input1.map(d => d[0])); // Prepare function let curBatchPerformance = 0; for (let batch = 0; batch < batches; batch++) { const input = input1.map(d => d[i]); start = performance.now(); func1(...input); end = performance.now(); curBatchPerformance += (end - start); } currentPerformance[i] = curBatchPerformance / batches; func2(...input2.map(d => d[0])); // Prepare function let newBatchPerformance = 0; for (let batch = 0; batch < batches; batch++) { const input = input2.map(d => d[i]); start = performance.now(); func2(...input); end = performance.now(); newBatchPerformance += (end - start); } newPerformance[i] = newBatchPerformance / batches; // if(i === 67) console.log(newPerformance[i]); } // Get current average let curAverage = 0; currentPerformance.forEach((x) => { curAverage += x; }); curAverage /= iterations; // Get new average let newAverage = 0; newPerformance.forEach((x) => { newAverage += x; }); newAverage /= iterations; let gainString; if (newAverage < curAverage) { // Better time const diff = curAverage - newAverage; gainString = `New function improves performance by ${((diff / curAverage) * 100).toFixed(2)} percent.` } else { const diff = newAverage - curAverage; gainString = `New function decreases performance by ${((diff / curAverage) * 100).toFixed(2)} percent.`; } return GeneratePlot({ curPerformance: currentPerformance, newPerformance: newPerformance, gain: gainString, }); }35:T430,Payload = class { constructor(entries) { this.entries = entries; } // Get stored variables Get(...variables) { return variables.map(variable => this[[variable]]); } GenerateNumeric(variable, settings) { // Ensure settings are set if (!settings.min) settings.min = 0; if (!settings.max) settings.max = 1; const data = new Array(this.entries); for (let i = 0; i < this.entries; i++) { data[i] = settings.min + Math.random() * (settings.max - settings.min); } this[[variable]] = data; } GenerateVector(variable, settings) { // Ensure settings are set if (!settings.min) settings.min = 0; if (!settings.max) settings.max = 1; if (!settings.dim) settings.dim = 2; const data = new Array(this.entries); for (let i = 0; i < this.entries; i++) { const v = new Array(settings.dim); for (let d = 0; d < settings.dim; d++) { v[d] = settings.min + Math.random() * (settings.max - settings.min); } data[i] = v; } this[[variable]] = data; } }36:[] 31:{"id":"12c392e42e67bb0b","slug":"compare","title":"Function comparison","thumbnail":"d3bba9381409a2cb009b12163d5062986d009bcf569169097736f70f22dbe027","access_level":"public","create_time":"$D2019-08-14T10:41:03.034Z","update_time":"$D2019-12-12T13:53:30.587Z","view_time":null,"first_public_time":"$D2019-08-15T09:48:31.344Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"a49ab297471727ef","login":"tomktjemsland","name":"Tom Kristian Tjemsland","avatar_url":"https://avatars-next.observableusercontent.com/271d0fc197b9153a9c5a4aa29d3f170cbe6d604ab2969e36da2635c2ea6021dd","tier":"starter_2024"},"version":857,"publish_version":857,"role":null,"authored":false,"authors":[{"type":"individual","id":"e44acfdca79f4aeb","login":"tomktjemsland","name":"Tom Kristian Tjemsland","avatar_url":"https://avatars-next.observableusercontent.com/271d0fc197b9153a9c5a4aa29d3f170cbe6d604ab2969e36da2635c2ea6021dd","tier":null}],"members":[{"type":"individual","id":"e44acfdca79f4aeb","login":"tomktjemsland","name":"Tom Kristian Tjemsland","avatar_url":"https://avatars-next.observableusercontent.com/271d0fc197b9153a9c5a4aa29d3f170cbe6d604ab2969e36da2635c2ea6021dd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Function comparison","cells":[{"id":0,"value":"md`# Function comparison`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":543,"value":"md`Notebook for visual comparison of two functions.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":591,"value":"md`## To import:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"GetClipboardNode(\"import {Payload, Compare} from '@tomktjemsland/compare'\", 'SteelBlue');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":597,"value":"md`## Components:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":603,"value":"md`## Usage:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":606,"value":"{\n const iterations = 256;\n const batches = 64;\n \n const payload = new Payload(iterations * batches);\n payload.GenerateVector('a', {min: 5, max: 70, dim: 50});\n \n const input = payload.Get('a');\n \n // O(n^2)\n const func1 = (a) => {\n for (let i = 0; i < a.length; i++) {\n for (let j = 0; j < a.length; j++) {\n // ...\n }\n }\n }\n \n // O(n)\n const func2 = (a) => {\n for (let i = 0; i < a.length; i++) {\n // ...\n }\n }\n \n return Compare(func1, func2, input, input, iterations, batches);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"md`## Imports:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"d3 = require(\"d3@5\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":566,"value":"import { GetClipboardNode } from '@tomktjemsland/copy-to-clipboard';","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"