D3 Examples - Character Combinations

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
        
    // I guess the number 1 would never work?!
    const keypad = {
      2: ["A","B","C"],
      3: ["D","E","F"],
      4: ["G","H","I"],
      5: ["J","K","L"],
      6: ["M","N","O"],
      7: ["P","Q","R", "S"],
      8: ["T","U","V"],
      9: ["W","X","Y","Z"],
      
    }
    // sample input 23 needs to return all possible combinations
    // ["AD","AE","AF","BD","BE","BF","CD","CE","CF"]
    
    const testInput = 93;
    
    const getCombinations = (input) => {
      
      const combinations = [];
      const numbers = String(input).split("");
      
      let count = 0;
      const totalNumbers = numbers.length;
      
      for (let i =0; i < totalNumbers - 1; i++){
        
        const firstNumber = numbers[i];
        const secondNumber = numbers[i+1];
        const firstLetters = keypad[firstNumber];
        const secondLetters = keypad[secondNumber];
         
        const jmax = keypad[firstNumber].length;
   
        for (let j =0; j < jmax; j++){
          const parentLetter = firstLetters[j];
​
          const kmax = keypad[secondNumber].length;
​
          for (let k =0; k < kmax; k++){
            
            const childLetter = secondLetters[k];
            const combination = parentLetter + childLetter;
 
            combinations.push(combination);
          }       
        }
      }
         
      return combinations;
    }
    
    const svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 1000)
    
    svg.append("text")
      .text("(1) Character Combinations")
        .attr("id","title")
      .attr("y", 50)
      .attr("x", 20)
      .attr("font-size", 28)
        .attr("font-weight", 500)
        .attr("fill", "teal")
      .attr("font-family", "monospace")
    
    svg.append("text")
      .text("")
        .attr("id","perf")
      .attr("y", 80)
      .attr("x", 20)
      .attr("fill","grey")
      .attr("font-size", 18)
      .attr("font-family", "monospace")
    
    const updateResult = ( id, result) => {
      d3.select(`#${id}`).text(result)
    }
    
    const t0 = performance.now();
    const combinations = getCombinations(testInput);
    const t1 = performance.now();
    
    const perf = `${testInput} took ${(t1 - t0).toFixed(4)} milliseconds.`
    
    updateResult("perf", String(perf));
    
    let startY = 90;
    const delay1Sec = 500;
    combinations.forEach( combination => {
     
      svg.append("text")
      .text(combination)
        .attr("id","result")
      .attr("y", startY)
      .attr("x", 40)
      .attr("font-size", 20)
      .attr("font-family", "monospace")
      .attr("opacity",0)
      .transition()
        .attr("opacity",1)
        .attr("transform",`translate(0, ${30})`)
        .delay(startY + delay1Sec)
​
      startY += 20;
      
    })
    
    const testCombinations23 = ["AD","AE","AF","BD","BE","BF","CD","CE","CF"];
    const testCombinations93 = ["WD","WE","WF","XD","XE","XF","YD","YE","YF","ZD","ZE","ZF"];
    
    const test = testInput === 23 ? testCombinations23 : testCombinations93;
    
    // credit stackoverflow 
    // https://stackoverflow.com/questions/3115982/how-to-check-if-two-arrays-are-equal-with-javascript
    function arraysEqual(a1,a2) {
        return JSON.stringify(a1)==JSON.stringify(a2);
        }
    
    const testResult = arraysEqual(combinations, test)
    const testFill = testResult ? "teal" : "darkred";
    const testText = testResult ? "Success 😅" : "Fail 😔";
    
    svg.append("text")
      .text(testText)
        .attr("fill", testFill)
        .attr("id","result")
      .attr("y", startY + 20)
      .attr("x", 40)
      .attr("font-size", 28)
      .attr("font-family", "monospace")
      .attr("opacity",0)
      .transition()
        .attr("opacity",1)
        .attr("transform",`translate(0, ${30})`)
        .delay(startY + delay1Sec)
    
    
  </script>
</body>
​
    