30:T459,out = { const padding = 10 const width = 500 - 2* padding //width of svg const height = 150 - 2 * padding //height of svg //Another direct method to create svg is DOM.svg(specific to Observables) const svg = d3.select(DOM.svg(width + 2*padding, height + 2 * padding)) const canvas = svg.append('g').attr('transform', `translate(${padding}, ${padding})`) // const arr = [11, 6, 3, 5] let xScale = d3.scaleBand().domain(arr).range([0, width]).paddingInner(0.05) canvas.selectAll("rect") .data(arr) .enter() .append('rect') .attr('x', xScale) .attr('y', 0) .attr('width', xScale.bandwidth()) .attr('height', height) .style('stroke', '#000000') .style('fill', 'none') canvas.selectAll("label") .data(arr) .enter() .append('text') .text(d => d) .attr('text-anchor', 'middle') .attr('alignment-baseline', 'middle') .attr('x', d => xScale.bandwidth() / 2 + xScale(d)) .attr('y', height / 2) .style('fill', '#000000') .style('stroke', 'none') .style('font-size', 48) return svg.node() }31:T9c1,random_arr = { let pairs = [] for (let i = 0; i < arr.length; i++) { for (let j = i + 1; j < arr.length; j++) { let temp = new Array(arr.length).fill(null) temp[i] = arr[i]; temp[j] = arr[j] pairs.push(temp) } } console.log(pairs) const padding = 10 const width = 850 - 2* padding //width of svg const height = 150 - 2 * padding //height of svg //Another direct method to create svg is DOM.svg(specific to Observables) const svg = d3.select(DOM.svg(width + 2*padding, height + 2 * padding)) const canvas = svg.append('g').attr('transform', `translate(${padding}, ${padding})`) let xScale = d3.scaleBand().domain(pairs).range([0, width]).paddingInner(0.2) let innerXScale = d3.scaleBand().domain(arr).range([0, xScale.bandwidth()]).paddingInner(0.05) let gs = canvas.selectAll('g') .data(pairs) .enter() .append('g') .attr('transform', pair => `translate(${xScale(pair)}, 0)`) gs.append('text') .text((d, i) => i < pairs.length - 1 ? "," : "") .attr('dx', xScale.bandwidth()) .attr('dy', 20 + height / 2) .style('fill', '#000000') .style('stroke', 'none') .style('font-size', 40) gs.selectAll('.innerRect') .data(d => d) .enter() .append('rect') .attr('x', (d, i) => innerXScale(arr[i])) .attr('y', height / 2 - 20) .attr('width', d => innerXScale.bandwidth(d)) .attr('height', d => 40) .style('stroke', d => d === null ? '#BBBBBB' : '#000000') .style('fill', 'none') gs.selectAll('.innerLabel') .data(d => d) .enter() .append('text') .text((d, i) => arr[i]) .attr('text-anchor', 'middle') .attr('alignment-baseline', 'middle') .attr('x', (d, i) => innerXScale(arr[i])) .attr('y', height / 2 - 20) .attr('dx', innerXScale.bandwidth() / 2) .attr('dy', 20) .attr('visibility', d => d === null ? 'hidden' : 'visible') .style('stroke', 'none') .style('fill', d => d === null ? '#BBBBBB' : '#000000') .style('font-size', (innerXScale.bandwidth())) // canvas.selectAll("label") // .data(arr) // .enter() // .append('text') // .text(d => d) // .attr('text-anchor', 'middle') // .attr('alignment-baseline', 'middle') // .attr('x', d => xScale.bandwidth() / 2 + xScale(d)) // .attr('y', height / 2) // .style('fill', '#000000') // .style('stroke', 'none') // .style('font-size', 48) return svg.node() }32:T92f,light_pairs = { let pairs = [] for (let i = 0; i < arr.length; i++) { for (let j = i + 1; j < arr.length; j++) { let temp = new Array(arr.length).fill(null) temp[i] = arr[i]; temp[j] = arr[j] pairs.push(temp) } } console.log(pairs) const padding = 10 const width = 850 - 2* padding //width of svg const height = 300 - 2 * padding //height of svg //Another direct method to create svg is DOM.svg(specific to Observables) const svg = d3.select(DOM.svg(width + 2*padding, height + 2 * padding)) const canvas = svg.append('g').attr('transform', `translate(${padding}, ${padding})`) const groupedPairs = d3.group(pairs, pair => pair.findIndex(e => e !== null)) console.log(groupedPairs.entries) let xScale = d3.scaleBand().domain([...Array(arr.length - 1).keys()]).range([0, width]).paddingInner(0.2) let yScale = d3.scaleBand().domain([...Array(arr.length - 1).keys()]).range([0, height]).paddingInner(0.1).paddingOuter(0.2) let innerXScale = d3.scaleBand().domain(arr).range([0, xScale.bandwidth()]).paddingInner(0.05) let gs = canvas.selectAll('g') .data(groupedPairs) .enter() .append('g') .attr('transform', (_, i) => `translate(${xScale(i)}, 0)`) .selectAll('.innerRect') .data(function (d) { console.log(d); return d[1]; }) .enter() .append('g') .attr('transform', (d, i) => `translate(0, ${yScale(i)})`) gs.selectAll('.innerinner') .data(d => d) .enter() .append('rect') .attr('x', (d, i) => innerXScale(arr[i])) .attr('y', 0) .attr('width', d => innerXScale.bandwidth(d)) .attr('height', yScale.bandwidth) .style('stroke', d => d === null ? '#CCCCCC' : '#000000') .style('fill', 'none') gs.selectAll('.innerLabel') .data(d => d) .enter() .append('text') .text((d, i) => arr[i]) .attr('text-anchor', 'middle') .attr('alignment-baseline', 'middle') .attr('x', (d, i) => innerXScale(arr[i])) .attr('y', 0) .attr('dx', innerXScale.bandwidth() / 2) .attr('dy', yScale.bandwidth() / 2) .attr('visibility', d => d === null ? 'hidden' : 'visible') .style('stroke', 'none') .style('fill', d => d === null ? '#CCCCCC' : '#000000') .style('font-size', (innerXScale.bandwidth())) return svg.node() }33:T9de,darkmode = { let pairs = [] for (let i = 0; i < arr.length; i++) { for (let j = i + 1; j < arr.length; j++) { let temp = new Array(arr.length).fill(null) temp[i] = arr[i]; temp[j] = arr[j] pairs.push(temp) } } console.log(pairs) const padding = 10 const width = 850 - 2* padding //width of svg const height = 300 - 2 * padding //height of svg //Another direct method to create svg is DOM.svg(specific to Observables) const svg = d3.select(DOM.svg(width + 2*padding, height + 2 * padding)).style('background', '#333333') const canvas = svg.append('g').attr('transform', `translate(${padding}, ${padding})`) const groupedPairs = d3.group(pairs, pair => pair.findIndex(e => e !== null)) console.log(groupedPairs.entries) let xScale = d3.scaleBand().domain([...Array(arr.length - 1).keys()]).range([0, width]).paddingInner(0.2) let yScale = d3.scaleBand().domain([...Array(arr.length - 1).keys()]).range([0, height]).paddingInner(0.1).paddingOuter(0.2) let innerXScale = d3.scaleBand().domain(arr).range([0, xScale.bandwidth()]).paddingInner(0.05) let gs = canvas.selectAll('g') .data(groupedPairs) .enter() .append('g') .attr('transform', (_, i) => `translate(${xScale(i)}, 0)`) .selectAll('.innerRect') .data(function (d) { console.log(d); return d[1]; }) .enter() .append('g') .attr('transform', (d, i) => `translate(0, ${yScale(i)})`) gs.selectAll('.innerinner') .data(d => d) .enter() .append('rect') .attr('x', (d, i) => innerXScale(arr[i])) .attr('y', 0) .attr('width', d => innerXScale.bandwidth(d)) .attr('height', yScale.bandwidth) .style('stroke', d => d === null ? '#666666' : '#FFFFFF') .style('fill', 'none') gs.selectAll('.innerLabel') .data(d => d) .enter() .append('text') .text((d, i) => i) .attr('text-anchor', 'middle') .attr('alignment-baseline', 'middle') .attr('x', (d, i) => innerXScale(arr[i])) .attr('y', 0) .attr('dx', innerXScale.bandwidth() / 2) .attr('dy', yScale.bandwidth() / 2) .attr('visibility', d => d === null ? 'hidden' : 'visible') .style('stroke', 'none') .style('fill', d => d === null ? '#666666' : '#FFFFFF') .style('font-size', (innerXScale.bandwidth())) svg.append('text').text("indices").attr('x', width - (40 * "indices".length)).attr('y', height - 40).style('font-size', 40).style('fill', 'white') return svg.node() }34:Td4d,{ const padding = 10 let i = 0; let j = i + 1; const width = 500 - 2* padding //width of svg const height = 300 - 2 * padding //height of svg //Another direct method to create svg is DOM.svg(specific to Observables) const svg = d3.select(DOM.svg(width + 2*padding, height + 2 * padding)) const canvas = svg.append('g').attr('transform', `translate(${padding}, ${padding})`) // const arr = [11, 6, 3, 5] let xScale = d3.scaleBand().domain(arr).range([0, width]).paddingInner(0.05) let rects = canvas.selectAll("rect") .data(arr) .enter() .append('rect') .attr('x', xScale) .attr('y', 0) .attr('width', xScale.bandwidth()) .attr('height', height / 2) .style('stroke', '#000000') .style('fill', 'none') canvas.selectAll("label") .data(arr) .enter() .append('text') .text(d => d) .attr('text-anchor', 'middle') .attr('alignment-baseline', 'middle') .attr('x', d => xScale.bandwidth() / 2 + xScale(d)) .attr('y', height / 4) .style('fill', '#000000') .style('stroke', 'none') .style('font-size', 48) let labelXScale = d3.scaleBand().domain([...Array(arr.length).keys()]).range([0, width]).paddingInner(0.05) let iLabel = canvas .append('text') .text(`i = ${i}`) .attr('x', labelXScale(i)) .attr('y', 0.7 * height) .style('fill', '#000000') .style('stroke', 'none') .style('font-size', height / 10) .attr('text-anchor', 'right') .attr('alignment-baseline', 'middle') let jLabel = canvas .append('text') .text(`j = ${j}`) .attr('text-anchor', 'middle') .attr('alignment-baseline', 'middle') .attr('x', labelXScale(j)) .attr('y', 0.9 * height) .style('fill', '#000000') .style('stroke', 'none') .style('font-size', height / 10) .attr('text-anchor', 'right') .attr('alignment-baseline', 'middle') async function parallel() { const task1 = iLabel .transition() .delay(800) // try uncommenting the transitions below to see how they effect the animation .ease(d3.easeLinear) // .ease(d3.easePoly.exponent(5)) .duration(400) .text(`i = ${i}`) .attr('x', labelXScale(i)) .transition() .end(); const task2 = jLabel .transition() .delay(800) // try uncommenting the transitions below to see how they effect the animation .ease(d3.easeLinear) // .ease(d3.easePoly.exponent(5)) .duration(400) .text(`j = ${j}`) .attr('x', labelXScale(j)) .transition() .end(); const task3 = rects .transition() .delay(1200) // try uncommenting the transitions below to see how they effect the animation .ease(d3.easeLinear) // .ease(d3.easePoly.exponent(5)) .duration(600) .style('fill', function(_, idx) { if (idx == i) return 'lightblue' else if (idx == j) return 'lightpink' else return 'white' }) .transition() .end() return { result1: await task1, result2: await task2, result3: await task3, } } while (true) { yield svg.node() await parallel() if (j == arr.length - 1) { i = (i + 1) % (arr.length - 1); j = i + 1 } else { j = j + 1 } } }35:T710,tracking_closest_pair = { return md `## Tracking the Closest Pair Now that we have a procedure for examining every pair of entries in our array, let's dig into what "examining" the pairs entails. We'll need to keep track of the closest pair that we've seen _so far_ and also how close they were. This way, whenever we find a new pair that has a smaller difference, we'll simply keep track of this new closer pair instead. **After we've examined all pairs of numbers, the closest pair that we've seen _so far_ will by definition be the closest pair _in all_.** \`\`\`java int[] closestPair = {numbers[0], numbers[1]}; int closestDifference = Math.abs(numbers[0] - numbers[1]); \`\`\` When we declare these "bookkeeping" variables, we'll initialize them with an arbitrarily chosen pair and their difference. It's OK to do this arbitrarily (I picked the first pair) because we'll look at them all eventually. To compute the difference, we calculate the _absolute value_ of the difference between the numbers in the pair. This is because we're only interested in the magnitude of their difference, and whether we think of the pair as (6, 11) or (11, 6) shouldn't matter. They both have a difference of 5 if we use \`Math.abs()\`. When we examine each pair, we'll want to update our bookkeeping variables whenever we find a new closest pair. This calls for a conditional: \`\`\`java for (int i = 0; i < numbers.length; i++) { for (int j = i + 1; j < numbers.length; j++) { int newDifference = Math.abs(numbers[i] - numbers[j]); if (newDifference < closestDifference) { closestPair[0] = numbers[i]; closestPair[1] = numbers[j]; closestDifference = newDifference; } } } System.out.println("Our closest pair is: (" + closestPair[0] + ", " + closestPair[1] + ")"); \`\`\` ` }36:T123d,final = { const padding = 10 let i = 0; let j = i + 1; const width = 800 - 2* padding //width of svg const height = 300 - 2 * padding //height of svg //Another direct method to create svg is DOM.svg(specific to Observables) const svg = d3.select(DOM.svg(width + 2*padding, height + 2 * padding)) const canvas = svg.append('g').attr('transform', `translate(${padding}, ${padding})`) // const arr = [11, 6, 3, 5] let closestPair = [arr[0], arr[1]] let closestDifference = Math.abs(arr[0] - arr[1]) let xScale = d3.scaleBand().domain(arr).range([0, width * 5 / 8]).paddingInner(0.05) let labelXScale = d3.scaleBand().domain([...Array(arr.length).keys()]).range([0, width * 5 / 8]).paddingInner(0.05) let rects = canvas.selectAll("rect") .data(arr) .enter() .append('rect') .attr('x', xScale) .attr('y', 0) .attr('width', xScale.bandwidth()) .attr('height', height / 2) .style('stroke', '#000000') .style('fill', 'none') canvas.selectAll("label") .data(arr) .enter() .append('text') .text(d => d) .attr('text-anchor', 'middle') .attr('alignment-baseline', 'middle') .attr('x', d => xScale.bandwidth() / 2 + xScale(d)) .attr('y', height / 4) .style('fill', '#000000') .style('stroke', 'none') .style('font-size', 48) let iLabel = canvas .append('text') .text(`i = ${i}`) .attr('x', labelXScale(i)) .attr('y', 0.7 * height) .style('fill', '#000000') .style('stroke', 'none') .style('font-size', height / 10) .attr('text-anchor', 'right') .attr('alignment-baseline', 'middle') let jLabel = canvas .append('text') .text(`j = ${j}`) .attr('text-anchor', 'middle') .attr('alignment-baseline', 'middle') .attr('x', labelXScale(j)) .attr('y', 0.9 * height) .style('fill', '#000000') .style('stroke', 'none') .style('font-size', height / 10) .attr('text-anchor', 'right') .attr('alignment-baseline', 'middle') let summary = canvas.append('g').attr('transform', `translate(${width * 6 / 8}, ${height / 5})`).append('text').text(`Closest pair so far: (${closestPair})`) let done = canvas.append('g').attr('transform', `translate(${width * 6 / 8}, ${height * 3 / 5})`).append('text').text("DONE!").attr('visibility', 'hidden'); async function parallel() { const task1 = iLabel .transition() .delay(800) // try uncommenting the transitions below to see how they effect the animation .ease(d3.easeLinear) // .ease(d3.easePoly.exponent(5)) .duration(400) .text(`i = ${i}`) .attr('x', labelXScale(i)) .transition() .end(); const task2 = jLabel .transition() .delay(800) // try uncommenting the transitions below to see how they effect the animation .ease(d3.easeLinear) // .ease(d3.easePoly.exponent(5)) .duration(400) .text(`j = ${j}`) .attr('x', labelXScale(j)) .transition() .end(); const task3 = rects .transition() .delay(1200) // try uncommenting the transitions below to see how they effect the animation .ease(d3.easeLinear) // .ease(d3.easePoly.exponent(5)) .duration(600) .style('fill', function(_, idx) { if (idx == i) return 'lightblue' else if (idx == j) return 'lightpink' else return 'white' }) .transition() .end() const task4 = summary .transition() .delay(1200) // try uncommenting the transitions below to see how they effect the animation .ease(d3.easeLinear) // .ease(d3.easePoly.exponent(5)) .duration(600) .text(`Closest pair so far: (${closestPair})`) .transition() .end() return { result1: await task1, result2: await task2, result3: await task3, result4: await task4 } } while (true) { yield svg.node() if (Math.abs(arr[i] - arr[j]) < closestDifference) { closestDifference = Math.abs(arr[i] - arr[j]) closestPair = [arr[i], arr[j]] } await parallel() if (j == arr.length - 1) { i = (i + 1) % (arr.length - 1); j = i + 1 } else { j = j + 1 } if ((j === arr.length - 1) && (i === arr.length - 2)) { done.attr('visibility', 'visible'); } else { done.attr('visibility', 'hidden'); } if ((j === 1) && (i === 0)) { closestPair = [arr[0], arr[1]] closestDifference = Math.abs(arr[0] - arr[1]) } } }37:[] 2e:{"title":"ClosestTwo.java","cells":[{"id":0,"value":"header = md`# ClosestTwo.java\nGiven an array containing only \\`ints\\`, find the two \\`ints\\` in the array that have the smallest difference.\n\\`\\`\\`java\nint[] numbers = {${(arr.join(', '))}};\n\\`\\`\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"intro = md`We can visualize an array as a sequence of cells, each containing some value. Here's a visualization of the example array.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"expl = md`In order to figure out which two numbers are closest, we'll have to examine every _pair_ of numbers in the array. After all, we can't know which pair has the smallest difference until we've seen each and every one of them.\n\nThis means that our problem has two central steps: \n\n1. find a way to examine all pairs of numbers in the array\n2. keep track of which pair had the smallest difference between them (so far) and what that difference was`","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"md`## Examining all pairs\n\nBefore we decide how to examine all the pairs of \\`ints\\`, let's take a second to look at what all of the pairs actually are. Below, we visualize all of the \\`int\\` pairs as hightlighted selections from the array \\`numbers\\` they are stored inside of.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"short = md \n`\nBecause \\`numbers.length == ${arr.length}\\`, there are a total of \\`${pairs.length}\\` pairs of numbers to test. I'll make one change to the way I present this list of pairs:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"rearrange = { return md\n`\nWith this rearrangement, we discover an easy way to look at all pairs of numbers.\n- First, we make every pair that includes 11 by pairing 11 with 6, 3, 5, and 8\n- Then, we finish making every pair that includes 6 by pairing 6 with 3, 5, and 8.\n - We already paired 6 and 11 in the previous step!\n- Next, finish making every pair that includes 3 by pairing 3 with 5 and 8.\n - (3, 11) and (3, 6) are already done!\n- Finally, finish making every pair that includes 5 by pairing 5 with 8.\n- This means that we already have every pair that includes 8, too!\n\nNow that we have a procedure in mind to access all pairs of numbers in the array, we can start to think about how to write the actual code. Let's look at this arrangement of pairs from the perspective of the array indices that we're accessing for each pair. Note that this version is displayed in \"dark mode\" to remind you that we're looking at the array _indices_ rather than the _values_:\n`\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"gen_all_pairs = { return md\n`\nTo generate all pairs, we first fix a lefthand index. We'll call this index \\`i\\`. Then, we let a separate index named \\`j\\` range from _greater than_ \\`i\\` up to \\`numbers.length - 1\\`. After we've looked at all values of \\`j\\` in our range for our fixed value of \\`i\\`, we increment \\`i\\` by one and repeat the range of \\`j\\` from \\`i+1\\` up to \\`numbers.length - 1\\`. Rinse and repeat until we've done this step with \\`i == numbers.length - 2\\`; after that, we've looked at all pairs!\n\n\nHere's how we can express this using nested for loops:\n\\`\\`\\`java\nfor (int i = 0; i < numbers.length; i++) {\n for (int j = i + 1; j < numbers.length; j++) {\n //evaluate the pair (numbers[i], numbers[j])\n }\n}\n\\`\\`\\`\n`\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":395,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"arr = [11, 6, 3, 5]","pinned":false,"hidden":false,"mode":"ojs"},{"id":427,"value":"pairs = {\n let pairs = []\n for (let i = 0; i < arr.length; i++) {\n for (let j = i + 1; j < arr.length; j++) {\n let temp = new Array(arr.length).fill(null)\n temp[i] = arr[i];\n temp[j] = arr[j]\n pairs.push(temp)\n }\n }\n return pairs\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}