31:T20f3,CanvasSimulation = { var radius = 2; var tick = 300; let height = width / 1.5; var context = DOM.context2d(width, height); let data = JSON.parse(JSON.stringify(many_body_graph_data)); var scale = d3 .scaleLinear() .range([radius, height - 10 * radius]) .domain([-3200, 3200]); var forceSim = d3 .forceSimulation() .velocityDecay(0.01) .alphaDecay(0) .force('link', d3.forceLink()) .force('charge', manyBodySampled()) .force('center', d3.forceCenter(width / 2, height / 3)); forceSim.nodes(data.nodes).on('tick', function() { drawNetwork(data); if (--tick < 0) forceSim.stop(); }); forceSim.force('link').links(data.links); function drawNetwork(data) { context.clearRect(0, 0, width, height); context.fillStyle = '#ffffff'; context.fillRect(0, 0, width, height); // Draw links. context.strokeStyle = 'rgba(90, 90, 90, 0.30)'; context.lineWidth = 1; data.links.forEach(function(d) { context.beginPath(); var pos = [scale(d.source.x), scale(d.source.y)]; context.moveTo(pos[0], pos[1]); pos = [scale(d.target.x), scale(d.target.y)]; context.lineTo(pos[0], pos[1]); context.stroke(); }); // Draw nodes. // let index = randomColorIndexer(); context.fillStyle = getColor; context.beginPath(); data.nodes.forEach(function(d) { var pos = [scale(d.x), scale(d.y)]; context.moveTo(pos[0], pos[1]); context.arc(pos[0], pos[1], radius, 0, 2 * Math.PI); }); context.fill(); } function manyBodySampled() { var nodes, alpha, strength = constant(-30), strengths, indicesRepulse, prevIndex = 0, distanceMin2 = 1, distanceMax2 = Infinity, neighborSize = function() { return 15; }, updateSize = function(nodes) { return Math.pow(nodes.length, 0.75); }, sampleSize = function(nodes) { return Math.pow(nodes.length, 0.25); }, numNeighbors, numUpdate, numSamples, chargeMultiplier = function(nodes) { return nodes.length < 100 ? 1 : nodes.length < 200 ? 3 : Math.sqrt(nodes.length); }, cMult, rand = Math.random; function addRandomNode(node) { var randIdx = Math.floor(rand() * nodes.length), randNode = nodes[randIdx], randDist = (node.x - randNode.x) * (node.x - randNode.x) + (node.y - randNode.y) * (node.y - randNode.y), currIdx, currNode, currDist, maxI, maxDist = -Infinity, i = -1; // Is this already in the list? if (node.nearest.indexOf(randIdx) >= 0) return; // If there is room for another, add it. if (node.nearest.length < numNeighbors) { node.nearest.push(randIdx); return; } // Replace the farthest away "neighbor" with the new node. while (++i < node.nearest.length) { currIdx = node.nearest[i]; currNode = nodes[currIdx]; currDist = Math.hypot(node.x - currNode.x, node.y - currNode.y); if (currDist > maxDist) { maxI = i; maxDist = currDist; } } if (randDist < maxDist) { node.nearest[maxI] = randIdx; } } function getRandIndices(indices, num) { num = Math.floor(num); var i, n = nodes.length, cnt = n - num, randIdx, temp; // Choose random indices. for (i = n - 1; i >= cnt; --i) { randIdx = Math.floor(rand() * i); temp = indices[randIdx]; indices[randIdx] = indices[i]; indices[i] = temp; } return indices.slice(cnt); } function approxRepulse(node) { var i, randIndices, currNode, w, x, y, l; // Choose random nodes to update. randIndices = getRandIndices(indicesRepulse, numSamples); for (i = randIndices.length - 1; i >= 0; --i) { currNode = nodes[randIndices[i]]; if (currNode === node) continue; x = currNode.x - node.x; y = currNode.y - node.y; l = x * x + y * y; if (l >= distanceMax2) continue; // Limit forces for very close nodes; randomize direction if coincident. if (x === 0) (x = (rand() - 0.5) * 1e-6), (l += x * x); if (y === 0) (y = (rand() - 0.5) * 1e-6), (l += y * y); if (l < distanceMin2) l = Math.sqrt(distanceMin2 * l); w = (strengths[node.index] * alpha * cMult) / l; node.vx += x * w; node.vy += y * w; } } function constantRepulse(node) { var i, nearest, currNode, w, x, y, l; // Update the list of nearest nodes. if (numNeighbors) addRandomNode(node); nearest = node.nearest; if (numNeighbors) for (i = nearest.length - 1; i >= 0; --i) { currNode = nodes[nearest[i]]; if (currNode === node) continue; x = currNode.x - node.x; y = currNode.y - node.y; l = x * x + y * y; if (l >= distanceMax2) continue; // Limit forces for very close nodes; randomize direction if coincident. if (x === 0) (x = (rand() - 0.5) * 1e-6), (l += x * x); if (y === 0) (y = (rand() - 0.5) * 1e-6), (l += y * y); if (l < distanceMin2) l = Math.sqrt(distanceMin2 * l); w = (strengths[node.index] * alpha * cMult) / l; node.vx += x * w; node.vy += y * w; } } function force(_) { var i = 0, j = prevIndex, n = nodes.length, upperIndex = prevIndex + numUpdate; for (alpha = _; i < n || j < upperIndex; ++i, ++j) { if (j < upperIndex) approxRepulse(nodes[j % n]); if (numNeighbors && i < n) constantRepulse(nodes[i]); } prevIndex = upperIndex % n; } function initialize() { if (!nodes) return; var i, n = nodes.length, node; indicesRepulse = new Array(n); for (i = 0; i < n; ++i) indicesRepulse[i] = i; strengths = new Array(n); // Cannot be negative. numNeighbors = Math.min(Math.ceil(neighborSize(nodes)), n); numNeighbors = numNeighbors < 0 ? 0 : Math.min(numNeighbors, nodes.length); numUpdate = Math.ceil(updateSize(nodes)); numUpdate = numUpdate < 0 ? 0 : Math.min(numUpdate, n); numSamples = Math.ceil(sampleSize(nodes)); numSamples = numSamples < 0 ? 0 : Math.min(numSamples, n); cMult = chargeMultiplier(nodes); alpha = 1; for (i = 0; i < n; ++i) { node = nodes[i]; strengths[node.index] = +strength(node, i, nodes); node.nearest = []; while (node.nearest.length < numNeighbors) addRandomNode(node); } } force.initialize = function(_) { nodes = _; initialize(); }; force.strength = function(_) { return arguments.length ? ((strength = typeof _ === "function" ? _ : constant(+_)), initialize(), force) : strength; }; force.distanceMin = function(_) { return arguments.length ? ((distanceMin2 = _ * _), force) : Math.sqrt(distanceMin2); }; force.distanceMax = function(_) { return arguments.length ? ((distanceMax2 = _ * _), force) : Math.sqrt(distanceMax2); }; force.neighborSize = function(_) { return arguments.length ? ((neighborSize = typeof _ === "function" ? _ : constant(+_)), initialize(), force) : neighborSize; }; force.updateSize = function(_) { return arguments.length ? ((updateSize = typeof _ === "function" ? _ : constant(+_)), initialize(), force) : updateSize; }; force.sampleSize = function(_) { return arguments.length ? ((sampleSize = typeof _ === "function" ? _ : constant(+_)), initialize(), force) : sampleSize; }; force.chargeMultiplier = function(_) { return arguments.length ? ((chargeMultiplier = typeof _ === "function" ? _ : constant(+_)), initialize(), force) : chargeMultiplier; }; force.source = function(_) { return arguments.length ? ((rand = _), force) : rand; }; return force; } return context.canvas; }32:T645,Benchmark = { let height = 250; let pad = 50; var svgRef = DOM.svg(width, height); yield svgRef; var xScale = d3 .scaleLinear() .domain([0, d3.max(timeData, d => d.mean)]) .range([pad, width - margin.right]) .nice(); var yScale = d3 .scaleBand() .domain(timeData.map(d => d.name).reverse()) .range([height, 0]) .padding(0.4); let svg = d3 .select(svgRef) .attr('viewBox', [0, 0, width, height]) .append('g'); // .attr('transform', 'translate(' + margin.left + ',1)'); svg .append('text') .attr('x', width / 2) .attr('y', 20) .attr('text-anchor', 'middle') .attr('font-size', 30) .attr('font-family', 'italic') .text('Mean Runtime (seconds)'); svg .selectAll('rect') .data(timeData) .enter() .append('rect') .attr('class', d => d.name) .attr('width', d => xScale(d.mean)) .attr('height', () => yScale.bandwidth()) .attr('x', d => xScale(0)) .attr('y', d => yScale(d.name)); svg .append('g') .attr('transform', `translate(${0}, ${height - pad / 2})`) .call(d3.axisBottom(xScale)); svg .append('g') .attr('transform', 'translate(0,0)') .call( d3 .axisLeft(yScale) .tickSizeOuter(0) .tickFormat(function(d) { return displayName(d); }) ) .call(g => { g.select('.domain').remove(); g.selectAll('text') .attr('text-anchor', 'start') .attr('transform', `translate(${xScale(0) + 20},${0})`) .style('font-size', '3em') .style('fill', 'white'); }); }33:T70e,function drawNetwork(graph, simType, canvas) { var context = canvas.getContext('2d'); var width = canvas.width; var height = canvas.height; var xScale = d3.scaleLinear().range([radius, width - radius]); var yScale = d3.scaleLinear().range([radius, height - radius]); // Adjust scales xScale.domain([ d3.min(graph.nodes, function(d) { return Math.min(d[simType].x, d[simType].y); }), d3.max(graph.nodes, function(d) { return Math.max(d[simType].x, d[simType].y); }) ]); yScale.domain([ d3.min(graph.nodes, function(d) { return Math.min(d[simType].x, d[simType].y); }), d3.max(graph.nodes, function(d) { return Math.max(d[simType].x, d[simType].y); }) ]); context.clearRect(0, 0, width, height); context.fillStyle = '#ffffff'; context.fillRect(0, 0, width, height); context.font = '12px Arial'; context.fillStyle = '#333'; context.fillText(displayName(simType), 10, 10); // Draw links. context.strokeStyle = 'rgba(90, 90, 90, 0.30)'; context.lineWidth = 1; graph.links.forEach(function(d) { context.beginPath(); var pos = [xScale(d.source[simType].x), yScale(d.source[simType].y)]; context.moveTo(pos[0], pos[1]); pos = [xScale(d.target[simType].x), yScale(d.target[simType].y)]; context.lineTo(pos[0], pos[1]); context.stroke(); }); // Draw nodes. context.fillStyle = '#d30000'; context.globalAlpha = 0.4; if (simType === 'bh') context.fillStyle = '#333'; context.beginPath(); graph.nodes.forEach(function(d) { var pos = [xScale(d[simType].x), yScale(d[simType].y)]; context.moveTo(pos[0], pos[1]); context.fillStyle = turboColorScheme[Math.floor(randomColorIndexer())]; context.arc(pos[0], pos[1], radius, 0, 2 * Math.PI); }); context.fill(); }34:[{"id":"dedd1e0b27dc4a742d5af611a32c062f2eb7e5ebc66b854531422ea9e941407ce6756449422aaef2fa680b7375d62d66f3b6329168374fd9e4df1c46405b0c20","href":"https://static.observableusercontent.com/files/dedd1e0b27dc4a742d5af611a32c062f2eb7e5ebc66b854531422ea9e941407ce6756449422aaef2fa680b7375d62d66f3b6329168374fd9e4df1c46405b0c20","name":"graph_data@1.json","type":"application/json","lastModified":1576001261721.657,"size":166297},{"id":"ea24077f6fcf38afec575188e8044ef663a7d285462dfd81aa202f2ede5ef262541b712846c569a9c7a2cab4ce7951aad97ca8cdf131c3784fc9febb50d8dc28","href":"https://static.observableusercontent.com/files/ea24077f6fcf38afec575188e8044ef663a7d285462dfd81aa202f2ede5ef262541b712846c569a9c7a2cab4ce7951aad97ca8cdf131c3784fc9febb50d8dc28","name":"barnes-hut_vs_random-sample.json","type":"application/json","lastModified":1576000203221.1,"size":1857761}] 2f:{"title":"Force Many Body Sampled ","cells":[{"id":0,"value":"md`

Force Many Body Sampled

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"md`

Barnes-Hut vs Random Sampling

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"View = {\n let view = html`

`;\n\n yield view;\n drawNetwork(\n graph,\n 'sampled',\n d3\n .select(view)\n .select('#sampled')\n .node()\n );\n drawNetwork(\n graph,\n 'bh',\n d3\n .select(view)\n .select('#bh')\n .node()\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":643,"value":"viewof radius = new slider({\n min: 1,\n max: 10,\n value: 1,\n description: \"sets node size\",\n title: \"Node Radius\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":435,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":836,"value":"svg = d3\n .select(DOM.svg(width, height))\n .attr('viewBox', [0, 0, width, height])\n .append('g')\n .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')","pinned":false,"hidden":false,"mode":"ojs"},{"id":838,"value":"xScale = d3\n .scaleLinear()\n .domain([\n 0,\n d3.max(timeData, function(d) {\n return d.mean;\n })\n ])\n .range([0, width])\n .nice()","pinned":true,"hidden":false,"mode":"ojs"},{"id":840,"value":"yScale = d3\n .scaleBand()\n .domain(\n timeData\n .map(function(d) {\n return d.name;\n })\n .reverse()\n )\n .range([height, 0])\n .padding(0.4)","pinned":true,"hidden":false,"mode":"ojs"},{"id":842,"value":"svg\n .selectAll('rect')\n\n .data(timeData)\n .join('rect')\n .attr('class', d => d.name)\n .attr('width', d => xScale(d.mean))\n .attr('height', d => yScale.bandwidth())\n .attr('x', 0)\n .attr('y', d => yScale(d.name))","pinned":true,"hidden":false,"mode":"ojs"},{"id":818,"value":"svg\n .selectAll('.axis-group')\n .data(['_'], d => d)\n .attr('class', 'axis-group')\n .join('g')\n .attr('transform', 'translate(0,' + height - 20 + ')')\n .call(d3.axisBottom(xScale))\n .append(\"text\")\n .attr(\"fill\", \"#000\")\n .attr('transform', 'translate(0,0)')\n .attr(\"y\", 21)\n .attr(\"dy\", \"0.71em\")\n .attr(\"text-anchor\", \"start\")\n .text(\"Mean runtime (seconds)\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":845,"value":"svg\n .append('g')\n .attr('transform', `translate(${0}, ${0})`)\n .call(\n d3\n .axisLeft(yScale)\n .tickSizeOuter(5)\n .tickFormat(function(d) {\n return displayName(d);\n })\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":441,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":868,"value":"randomColorIndexer()","pinned":true,"hidden":false,"mode":"ojs"},{"id":438,"value":"function displayName(dataName) {\n return dataName === 'bh' ? 'Barnes-Hut' : 'Random Vertex Sampling';\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"constant = x => () => x","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"md`---\n## DATA`","pinned":false,"hidden":false,"mode":"ojs"},{"id":593,"value":"graph = {\n let graph = JSON.parse(JSON.stringify(bh_vs_sampled_data));\n yield graph;\n graph.links.forEach(function(l) {\n l.source = graph.nodes[l.source];\n l.target = graph.nodes[l.target];\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":239,"value":"bh_vs_sampled_data = await await FileAttachment(\n 'barnes-hut_vs_random-sample.json'\n).json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"many_body_graph_data = await (await FileAttachment('graph_data@1.json')).json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":478,"value":"timeData = ['sampled', 'bh'].map(function(d) {\n var mean = d3.mean(bh_vs_sampled_data.time[d]);\n return { name: d, mean: mean };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"md`---\n## ANX`","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"height = width / 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"margin = ({ top: 50, right: 50, bottom: 50, left: 50 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":887,"value":"getColor()","pinned":true,"hidden":false,"mode":"ojs"},{"id":873,"value":"getColor =()=> turboColorScheme[Math.floor(randomColorIndexer())]","pinned":true,"hidden":false,"mode":"ojs"},{"id":865,"value":"\nrandomColorIndexer = d3.randomUniform(0, turboColorScheme.length)","pinned":true,"hidden":false,"mode":"ojs"},{"id":862,"value":"import { turboColorScheme } from '@stroked/how-to-slice-a-sphere'","pinned":true,"hidden":false,"mode":"ojs"},{"id":743,"value":"import { slider } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}