D3 Examples - golds

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jssha/2.3.1/sha.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js"></script>
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <style>
    
    :root {
        --gry-color: #b7b7b7;
    }
        
    body {  font-family: "Helvetica Neue";
                color: var(--gry-color);
                margin:0;
            position:fixed;
            top:0;
            right:0;
            bottom:0;
            left:0; }
    
    #page {
      margin: 20px;
      max-width: 600px;
      height: 600px;
      overflow: hidden;
      overflow-y: auto;
      margin: 10px;
      padding: 10px;
      border: 1px solid #eee;
    }
    
    p {
            color: var(--gry-color);
      
      margin: 0px;
      margin-bottom: 10px;
    }
    
    a {
      color: #666;
      text-decoration: none;
    }
    
    div {
            margin-bottom: 20px;
      
    }
    
    
  </style>
</head>
​
<body>
    <div id="page">
    <h1>Golds</h1>
    <div id="viz"></div>
    <p>Hashed data is secure because <a href="https://stackoverflow.com/questions/35899323/how-to-decrypt-sha-512-hashed-data">it is impossible to reverse engineer a hash</a>. In this example, I have hashed several goals. Only I should be aware of this original text but obviously in this demo I've shared the secret sauce.</p>
    <p>If wanted to encrypt data then be able to decrypt it, I would need a different approach. If I can't use hashes, how can I encrypt then decrypt this data?</p>
    <p>If we understand that <a href="https://library.ahima.org/doc?oid=104090#.W5PaepNKgmI">encryption is always reverseable</a>, what can we do protect the data?</p>
    <h4>Hashed Secret Key</h2>
    <div id="secret_hash"></div>
    <h4>Encrypted Goal</h2>
    <div id="goal_encrypted"></div>
    <h4>Encrypted Major Bonus</h2>
    <div id="major_encrypted"></div>
    <h4>Encrypted Minor Bonus</h2>
    <div id="minor_encrypted"></div>
    <h4>Encrypted Sidequest Bonus</h2>
    <div id="sidequest_encrypted"></div>
    <h4>Decrypted Sidequest Bonus</h2>
    <div id="sidequest_decrypted"></div>
    <div>
     SHA512 will generate 128 characters of lowercase HEX characters (0 to f) so that when we create the database table we can choose char(128) over varchar(255) since we know the hash will be fixed length of 128 each time.   
    </div>
    <h4>Further Reading</h4>
    <p><a href="https://en.wikipedia.org/wiki/Pigeonhole_principle">Pigeon Principle</a></p>
      <p><a href="https://stackoverflow.com/questions/4948322/fundamental-difference-between-hashing-and-encryption-algorithms">Hashing vs Encryption</a></p>
    <p><a href="https://stackoverflow.com/questions/18279141/javascript-string-encryption-and-decryption">Encrypting and Decrypting with Javascript</a></p>
        <p><a href="https://www.pkc.io/blog/emscripten-clojurescript-and-cryptography/">Clojure and ClojureScript encryption with NaCL</a></p>
     <p>
       <p><a href="https://medium.com/@sirsean/using-libsodium-in-lambda-with-clojure-839da6f9d45e">Clojure & Libsodium</a></p>
       <a href="https://pypi.org/project/PyNaCl/">Python also talks to NaCL</a></p>
    
      
      
 </div>
  
  <script>
    
    // hash
    // https://github.com/Caligatio/jsSHA
    const shaObj = new jsSHA("SHA-512", "TEXT");
​
    // State
    const gry = "#b7b7b7";
    const goal_plaintext = "I didn't buy snacks or beer this week";
    const minorBonus_plaintext = "I didn't consume snacks";
    const majorBonus_plaintext = "I didn't consume beer";
    const sideQuestBonus_plaintext = "I went on a run";
    
    // hashed state 
    shaObj.update("hoth");
    const hoth_hash = shaObj.getHash("HEX");
    
    // encrypted state
    const cryptographic_key = hoth_hash;
    //const goal_ciphertext = goal_plaintext;
    
     const goal_ciphertext = CryptoJS.AES.encrypt(goal_plaintext, cryptographic_key);
    
       const majorBonus_ciphertext = CryptoJS.AES.encrypt(majorBonus_plaintext, cryptographic_key);
    
          const minorBonus_ciphertext = CryptoJS.AES.encrypt(minorBonus_plaintext, cryptographic_key);
    
       const sidequestBonus_ciphertext = CryptoJS.AES.encrypt(sideQuestBonus_plaintext, cryptographic_key);
    
    const sidequestBonus_decrypted_bytes = CryptoJS.AES.decrypt(sidequestBonus_ciphertext, cryptographic_key);
   
      document.getElementById("secret_hash").innerHTML = hoth_hash;
    
    document.getElementById("goal_encrypted").innerHTML = goal_ciphertext;
    
        document.getElementById("major_encrypted").innerHTML = majorBonus_ciphertext;
    
    document.getElementById("minor_encrypted").innerHTML = minorBonus_ciphertext;
    
    document.getElementById("sidequest_encrypted").innerHTML = sidequestBonus_ciphertext;
    
    
document.getElementById("sidequest_decrypted").innerHTML = sidequestBonus_decrypted_bytes.toString(CryptoJS.enc.Utf8);
    
    const weeks = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16];
    
    const log = [
      {week: 1, 
       date: new Date("2018-9-8"),
       minorBonus: false, 
       majorBonus: true, 
       sideQuestBonus: false,
       goal: true},
    {week: 2, 
       date: new Date("2018-16-8"),
       minorBonus: false, 
       majorBonus: true, 
       sideQuestBonus: false,
       goal: true},
    {week: 3, 
       date: new Date("2018-23-8"),
       minorBonus: false, 
       majorBonus: true, 
       sideQuestBonus: true,
       goal: true},
    {week: 4, 
       date: new Date("2018-29-8"),
       minorBonus: false, 
       majorBonus: true, 
       sideQuestBonus: true,
       goal: true},  
    {week: 5, 
       date: new Date("2018-6-9"),
       minorBonus: false, 
       majorBonus: true, 
       sideQuestBonus: true,
       goal: true}]
    
    const goldsData = weeks.map((week,id) => {return {id: week, ...log[id]}})
    
    const svg = d3.select("#viz").append("svg")
      .attr("width", 960)
      .attr("height", 80)
    
    const world = svg.append("g")
        .attr("id","world");
    
    const golds = world.append("g")
        .attr("id","golds");
    
    const gold = golds.selectAll("g").data(goldsData);
    
    const goldWidth = 20;
    const goldHeight = 60;
    const spacer = 2;
    
    const getTrans = (d,i) => {
        return "translate (" + (i * goldWidth + spacer + (spacer * i)) + "," + spacer + ")"}
       
    gold
      .enter()
            .append("g")
                .attr("class","gold")
                .attr("transform", getTrans)
        .append("rect")
            .attr("width", goldWidth)
            .attr("height", goldHeight)
            .style("fill", gry)
          .transition()
            .duration(1000)
              .style("fill", d => {return (d.goal && d.goal == true) ? "gold" : gry});
    
    gold
      .merge(gold)
    
    gold
        .exit()
          .remove();
    
    /*
    svg.append("text")
      .text("Edit the code below to change me!")
      .attr("y", 200)
      .attr("x", 120)
      .attr("font-size", 36)
      .attr("font-family", "monospace")
      */
​
  </script>
</body>
​
    