D3 Examples - Gr4y5kull

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>
    
    // l33t challenge
    
    const createL33t = (str) => {
      
      let l33t = [];
      const arr = str.split("");
    
      const hashMap = {
        "a":4,
        "e":3,
        "i":1,
        "o":0,
        "s":5,
        "t":7
      }
       
     arr.map( s => {
       let found = false;
       for (ix in hashMap) {
         if (s.toLowerCase() === ix) {
                l33t.push(hashMap[ix] )
            found = true;
         }
       }
       
       if (!found) {
         l33t.push(s)
       }
     })
      
      return l33t.join("");
    }
    
​
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)
    
    const sheraSays = createL33t("By the powEr of GrAyskull!"); 
    
    const goodtimes = createL33t("Let's hAvE some fun. ");
    
    // String letter counting problem
    
    const countLetters = (str) => { 
      
      const arr = str.split("");
      const sequence = [];
      
      let prevVal = "";
      let keepIdx = 0;
      const counter = arr.reduce((acc, curVal, idx) => {
        
        if (prevVal === curVal){
  
          acc[keepIdx].count++;
           
        } else {
          acc[idx] = {letter: curVal, count: 1}
          keepIdx = idx;
        }
       
        prevVal = curVal; 
        
        return acc;
        
      }, []);
      
      console.log("counter: ", counter)
      
      for (let ix in counter){
        sequence.push(counter[ix].letter);
        sequence.push(counter[ix].count)
      }
      
      return sequence.join("");
    }
    
    const countSeq = countLetters('aabbaa');
    const countSeq2 = countLetters('aaabbdcccccf');
​
    svg.append("text")
      .text(sheraSays)
      .attr("y", 200)
      .attr("x", 120)
      .attr("font-size", 36)
      .attr("font-family", "monospace")
    
    svg.append("text")
      .text(goodtimes)
      .attr("y", 240)
      .attr("x", 120)
      .attr("font-size", 36)
      .attr("font-family", "monospace")
    
    svg.append("text")
      .text(countSeq)
      .attr("y", 336)
      .attr("x", 140)
      .attr("font-size", 36)
      .attr("font-family", "monospace")
    
    svg.append("text")
      .text(countSeq2)
      .attr("y", 299)
      .attr("x", 140)
      .attr("font-size", 36)
      .attr("font-family", "monospace")
​
  </script>
</body>
​
    