2d:null 2e:["$","title",null,{"children":"METHOD_POOL performance comparison | Volodymyr Sapsai | Observable"}] 33:T7f8,function displaySingleMeasurement(measurementName, measurementData, commonDomain) { function numberCell(value, formatter) { formatter = formatter || d3.format(".3f"); return html`${formatter(value)}`; } let header = html``; header.appendChild(html``); // First column is mostly empty, except summary rows. measurementData.forEach((approachData, index) => { let colorIndicator = colorSquare(d3.schemeCategory10[index]); header.appendChild(html`${approachData.name}${colorIndicator}`) }); let tbody = html``; var rowIndex = 0; var isMoreDataAvailable = true; while (isMoreDataAvailable) { isMoreDataAvailable = false; var row = html``; measurementData.forEach(approachData => { if (rowIndex < approachData.values.length) { isMoreDataAvailable = true; row.appendChild(numberCell(approachData.values[rowIndex])); } }); rowIndex += 1; if (isMoreDataAvailable) { tbody.appendChild(row); } } let approachMeans = measurementData.map(approachData => d3.mean(approachData.values)); var meanRow = html`Mean`; approachMeans.forEach(m => meanRow.appendChild(numberCell(m))); tbody.appendChild(meanRow); let approachDeviations = measurementData.map(approachData => d3.deviation(approachData.values)); var deviationRow = html`Deviation`; approachDeviations.forEach(d => deviationRow.appendChild(numberCell(d, d3.format(".4f")))); tbody.appendChild(deviationRow); let chart = BeeswarmChart(measurementData, { groupData: g => g.values, color: (group, groupIndex) => d3.schemeCategory10[groupIndex], domain: commonDomain, width: 350, }); return html`

${measurementName}

${header}${tbody}

${chart}

`; }34:T10a1,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/beeswarm function BeeswarmChart(groupedData, { groupData, // accessor to read data value = d => d, // convience alias for x label, // convenience alias for xLabel type = d3.scaleLinear, // convenience alias for xType domain, // convenience alias for xDomain x = value, // given d in data, returns the quantitative x value color = (group, groupIndex) => "steelblue", // given group in groupedData returns the color radius = 3, // (fixed) radius of the circles padding = 1.5, // (fixed) padding between the circles marginTop = 10, // top margin, in pixels marginRight = 20, // right margin, in pixels marginBottom = 30, // bottom margin, in pixels marginLeft = 20, // left margin, in pixels width = 640, // outer width, in pixels height, // outer height, in pixels xType = type, // type of x-scale, e.g. d3.scaleLinear xLabel = label, // a label for the x-axis xDomain = domain, // [xmin, xmax] xRange = [marginLeft, width - marginRight] // [left, right] } = {}) { // Map grouped data into the flat one. var data = []; var colors = []; groupedData.forEach((group, groupI) => { let groupColor = color(group, groupI); let groupValues = groupData(group); data = data.concat(groupValues); colors = colors.concat(d3.range(groupValues.length).map(d => groupColor)); }); // Compute values. const X = d3.map(data, x).map(x => x == null ? NaN : +x); // Compute which data points are considered defined. const I = d3.range(X.length).filter(i => !isNaN(X[i])); // Compute default domains. if (xDomain === undefined) xDomain = d3.extent(X); // Construct scales and axes. const xScale = xType(xDomain, xRange); const xAxis = d3.axisBottom(xScale).tickSizeOuter(0); // Compute the y-positions. const Y = dodge(I.map(i => xScale(X[i])), radius * 2 + padding); // Compute the default height; if (height === undefined) height = d3.max(Y) + (radius + padding) * 2 + marginTop + marginBottom; // Given an array of x-values and a separation radius, returns an array of y-values. function dodge(X, radius) { const Y = new Float64Array(X.length); const radius2 = radius ** 2; const epsilon = 1e-3; let head = null, tail = null; // Returns true if circle ⟨x,y⟩ intersects with any circle in the queue. function intersects(x, y) { let a = head; while (a) { const ai = a.index; if (radius2 - epsilon > (X[ai] - x) ** 2 + (Y[ai] - y) ** 2) return true; a = a.next; } return false; } // Place each circle sequentially. for (const bi of d3.range(X.length).sort((i, j) => X[i] - X[j])) { // Remove circles from the queue that can’t intersect the new circle b. while (head && X[head.index] < X[bi] - radius2) head = head.next; // Choose the minimum non-intersecting tangent. if (intersects(X[bi], Y[bi] = 0)) { let a = head; Y[bi] = Infinity; do { const ai = a.index; let y = Y[ai] + Math.sqrt(radius2 - (X[ai] - X[bi]) ** 2); if (y < Y[bi] && !intersects(X[bi], y)) Y[bi] = y; a = a.next; } while (a); } // Add b to the queue. const b = {index: bi, next: null}; if (head === null) head = tail = b; else tail = tail.next = b; } return Y; } const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(xAxis) .call(g => g.append("text") .attr("x", width) .attr("y", marginBottom - 4) .attr("fill", "currentColor") .attr("text-anchor", "end") .text(xLabel)); const dot = svg.append("g") .selectAll("circle") .data(I) .join("circle") .attr("cx", i => xScale(X[i])) .attr("cy", i => height - marginBottom - radius - padding - Y[i]) .attr("r", radius) .attr("fill", i => colors[i]); return svg.node(); }35:[{"id":"c24ebb1069c9c025ee13766b8afe51d909969ad2a181f0d2751a3b110e62b74e70aebc0fd6e970a4cbfccfac50d9e57678bca1346d3a83615567bf32fba48d2d","href":"https://static.observableusercontent.com/files/c24ebb1069c9c025ee13766b8afe51d909969ad2a181f0d2751a3b110e62b74e70aebc0fd6e970a4cbfccfac50d9e57678bca1346d3a83615567bf32fba48d2d","name":"project 1@1.tsv","type":"text/tab-separated-values","lastModified":1635321322540.804,"size":1210},{"id":"cd3e8edeb3b80c6f7644a0f832862d2b785e3e73971fb58cd2e4c1f37efb54d14f5e98e770b5d8947e76f3e8456ad236be821ae8844cfdc6fdb0aa6f914d3922","href":"https://static.observableusercontent.com/files/cd3e8edeb3b80c6f7644a0f832862d2b785e3e73971fb58cd2e4c1f37efb54d14f5e98e770b5d8947e76f3e8456ad236be821ae8844cfdc6fdb0aa6f914d3922","name":"project 2@1.tsv","type":"text/tab-separated-values","lastModified":1635321343834.872,"size":1214}] 31:{"id":"8a522ce45c2dc83f","slug":"method_pool-performance-comparison","title":"METHOD_POOL performance comparison","thumbnail":"bf051eb5b57ae6c7344ecf6525e566a576256f3e7be7503692563fc8a80ebaea","access_level":"public","create_time":"$D2021-10-24T01:12:01.766Z","update_time":"$D2021-10-27T07:55:43.213Z","view_time":null,"first_public_time":"$D2021-10-25T02:01:07.743Z","fork":{"id":"bd116742b1f91cf4","slug":"simple-d3","title":"Simple D3","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"1f82dc7abcd624aa","login":"vsapsai","name":"Volodymyr Sapsai","avatar_url":"https://avatars-next.observableusercontent.com/1096bd42d3a4a4d751175e6412b3ba9cb3953484eff42de6acc5e5cfda6a89b5","tier":"starter_2024"},"version":218,"publish_version":218,"role":null,"authored":false,"authors":[{"type":"individual","id":"126cbc11c5978fc8","login":"vsapsai","name":"Volodymyr Sapsai","avatar_url":"https://avatars-next.observableusercontent.com/1096bd42d3a4a4d751175e6412b3ba9cb3953484eff42de6acc5e5cfda6a89b5","tier":null}],"members":[{"type":"individual","id":"126cbc11c5978fc8","login":"vsapsai","name":"Volodymyr Sapsai","avatar_url":"https://avatars-next.observableusercontent.com/1096bd42d3a4a4d751175e6412b3ba9cb3953484eff42de6acc5e5cfda6a89b5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"METHOD_POOL performance comparison","cells":[{"id":0,"value":"# `METHOD_POOL` performance comparison\n\nShow the results of measuring performance for different approaches discussed in https://reviews.llvm.org/D109632","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"md`The change in clang should fix a slow compilation time issue. We know it works on [a synthetic test case](https://gist.github.com/vsapsai/f9d3603dde95eebd23248da4d7b4f5ec#file-synthesize-shared-framework-chain-test-py) but we are also interested to see how it behaves on real code. Also we have different approaches to fix the issue - \"**no dupes**\" and \"**no transitive**\" (refer to [the review](https://reviews.llvm.org/D109632) for more details). So we are interested to see how these approaches are performing and to compare them.\n\nFor that purpose I've selected 2 projects and in each of them 5 .m files that are built with modules (but without a precompiled header). I've compiled these files multiple times and measured the elapsed time. The presented data is compilation time for these files. I should also note that the module cache in all cases was pre-populated but cleaned between different approaches.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"displayMeasurementData(await FileAttachment(\"project 1@1.tsv\").tsv())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"displayMeasurementData(await FileAttachment(\"project 2@1.tsv\").tsv())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"md`## Potential improvements\n\n* For each approach show the percentage of improvement over baseline.\n* On the chart show mean and error margin (standard deviation) for each group of measurements.\n* Using t-test show for all groups of measurements if the difference in their mean is statistically significant or not.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"/**\n `parsedTsv` should be a `FileAttachment` content parsed as TSV format.\n\n The first column is a sample name. Subsequent columns are measurement values.\n Returns array of sample measurements.\n */\nfunction parseMeasurementData(parsedTsv) {\n let nameColumn = parsedTsv.columns[0];\n var result = parsedTsv.map(row => {\n var sample = {\"name\": row[nameColumn]};\n sample.data = parsedTsv.columns.slice(1).map(measurementName => {\n var measurement = {\"name\": measurementName};\n measurement.values = row[measurementName].split(\",\").map(d => parseFloat(d));\n return measurement;\n });\n return sample;\n });\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"function displayMeasurementData(parsedTsv) {\n let container = html`

`;\n let parsedData = parseMeasurementData(parsedTsv);\n // Calculate domain covering all measurements.\n let allValues = d3.merge(parsedData.map(\n measurement => d3.merge(measurement.data.map(\n approachData => approachData.values))\n ));\n let domain = d3.extent(allValues);\n parsedData.forEach(measurement => {\n container.appendChild(displaySingleMeasurement(measurement.name, measurement.data, domain));\n });\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"function colorSquare(colorString) {\n const size = 12;\n const svg = d3.create(\"svg\")\n .attr(\"width\", size)\n .attr(\"height\", size)\n .attr(\"viewBox\", [0, 0, size, size])\n .attr(\"class\", \"color-square\");\n svg.append(\"rect\")\n .attr(\"x\", 0)\n .attr(\"y\", 0)\n .attr(\"width\", size)\n .attr(\"height\", size)\n .attr(\"fill\", colorString);\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"