upes-open · snigdha510 · Apr 27, 2022 · May 30, 2022 · May 30, 2022
diff --git a/Algo Visualizer/huffman/index.html b/Algo Visualizer/huffman/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Huffman Tree</title>
+</head>
+<body>
+
+
+    <div class="boxes">
+
+        <textarea class="sc" id="paragraph_text" oninput="convert() ,main()" cols="51" rows="15" placeholder="Your Text"></textarea> <div id="text_digit" class="digit">0</div>
+
+        <button id="bin_click">Hide</button>
+        <div class="sc" id="binary"></div> <div id="binary_digit" class="digit">0</div>
+
+        <div id="result">0</div>
+        <button id="code_click">Hide</button>
+        <div class="sc" id="coded"></div> <div id="encoded_digit" class="digit">0</div>
+
+    </div>
+
+    <div class="box graph" id="huffman"></div>
+
+    <button id="freq_btn">Hide</button>
+    <div class="sc" id="freq"></div>
+
+
+    <script src="./js/index.js"></script>
+    <script src="./js/huffman.js" ></script>
+    <script src="./js/draw.js"></script>
+    <script src="./js/graph.js"></script>
+</body>
+
+</html>
diff --git a/Algo Visualizer/huffman/js/draw.js b/Algo Visualizer/huffman/js/draw.js
diff --git a/Algo Visualizer/huffman/js/graph.js b/Algo Visualizer/huffman/js/graph.js
@@ -0,0 +1,122 @@
+//Drawn graph from https://github.com/KhaledMohamedP/huffman.git
+
+function drawGraph(HuffmanTable) {
+    //console.log(HuffmanTable)
+
+    var list = [].concat(HuffmanTable),
+        tableSize = HuffmanTable.length;
+
+    while (list.length > 1) {
+        var y = list.pop();
+        var x = list.pop();
+        var obj = {
+            'freq': x.freq + y.freq,
+            'children': [x, y],
+            'value': x.value
+        }
+        list.push(obj);
+
+        list.sort(function(a,b){
+            return b.freq - a.freq;
+        })
+    }
+
+
+    var margin = {
+            top: 25,
+            right: 5,
+            bottom: 5,
+            left: 5
+        },
+        width = (70 * tableSize) - margin.right - margin.left,
+        height = (70 * tableSize) - margin.top - margin.bottom;
+
+    var i = 0;
+
+    var tree = d3.layout.tree().size([height, width]);
+    var diagonal = d3.svg.diagonal().projection(function(d) {
+        return [d.x, d.y];
+    });
+    var svg = d3.select(".graph").append("svg")
+        .attr("width", width + margin.right + margin.left).attr("height", height + margin.top + margin.bottom)
+        .append("g")
+        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+
+    root = list.pop();
+
+    var nodes = tree.nodes(root),
+        links = tree.links(nodes);
+
+    nodes.forEach(function(d) {
+        d.y = d.depth * 70;
+    });
+
+    var gNode = svg.selectAll("g.node")
+        .data(nodes, function(d) {
+            return d.id || (d.id = ++i);
+        });
+
+    var nodeEnter = gNode.enter().append("g")
+        .attr("class", "node")
+        .attr("transform", function(d) {
+            return "translate(" + d.x + "," + d.y + ")";
+        });
+
+    var circle = nodeEnter.append("circle")
+        .attr("r", 0);
+
+    circle.transition()
+        .delay(function(d, i) {
+            return i * 80;
+        })
+        .attr("r", 25)
+        .style("fill", function(d, i) {
+            return d.children || d._children ? '#FFE066' : '#fff';
+        })
+        .duration(1000)
+        .ease('elastic');
+
+    var charText = nodeEnter.append('text')
+    .attr('y', 5)
+    .attr("text-anchor", "middle")
+
+    charText.transition()
+        .delay(function(d, i) {
+            return i * 90;
+        })
+        .text(function(d) {
+            return d.children || d._children ? d.freq : d.value;
+        });
+
+    //Enter the code
+    var pathText = nodeEnter.append('text')
+    .attr("y", 40)
+    .attr("x", -10)
+    .style('font-size', '10px');
+
+    pathText.transition()
+        .delay(function(d, i) {
+            return i * 85;
+        })
+        .text(function(d) {
+            return d.code ;
+        });
+
+
+
+    //PATH 
+    var path = svg.selectAll("path.link")
+        .data(links, function(d) {
+            return d.target.id;
+        });
+
+    var pathT = path.enter().insert("path", "g")
+        .attr("class", "link");
+
+    pathT.transition()
+        .delay(function(d, i) {
+            return i * 85;
+        })
+        .attr("d", diagonal);
+}
diff --git a/Algo Visualizer/huffman/js/huffman.js b/Algo Visualizer/huffman/js/huffman.js
@@ -0,0 +1,112 @@
+function Node(value,freq,right,left){
+    this.value = value;
+    this.freq = freq;
+    this.right = right;
+    this.left = left;
+    this.code = "";
+}
+
+function createCode(node,s){
+    if(node == null) return;
+    if(node.right == null && node.left == null){
+        node.code = s;
+        return;
+    }
+    node.code = s;
+
+    createCode(node.left,s + '0');
+    createCode(node.right,s + '1');
+
+}
+
+function createTree(arr){
+    var list = [].concat(arr);
+
+    if (list.length == 1) {
+        var x = list.pop();
+        list.push(new Node(x.value, x.freq, null, x))
+    }
+    while (list.length > 1) {
+        var x = list.pop();
+        var y = list.pop();
+        var parent = new Node((x.value + y.value), (x.freq + y.freq), x, y);
+        list.push(parent);
+
+        list.sort(function(a,b){
+            return b.freq - a.freq;
+        })
+    }
+
+    createCode(list[0],"");
+
+    codedOutput(arr);
+
+    try{
+        drawGraph(arr);
+    } catch{
+        console.log("No text");
+    }
+
+}
+
+function createNodes(list){
+    var new_list = [];
+
+    for(var key in list){
+        if(list.hasOwnProperty(key)){
+            if(key == " "){
+                new_list.push(new Node("SC" + ":" + list[key] ,list[key],null,null));
+
+            }else if(key == "\n"){
+                new_list.push(new Node("NL" + ":" + list[key] ,list[key],null,null));
+
+
+            } else{
+                new_list.push(new Node(key + ": " + list[key] ,list[key],null,null));
+            }
+        }
+    }
+
+    new_list.sort(function(a,b){
+        return a.freq - b.freq
+    });
+
+    new_list.reverse();
+    createTree(new_list);
+
+}
+
+function codedOutput(arr){
+    var text = String(document.getElementById("paragraph_text").value);
+    var output = document.getElementById("coded");
+    var encoded_digit = document.getElementById("encoded_digit");
+    output.innerHTML = "\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0Encoded: ";
+    var count = 0;
+    for(var l =0;l<text.length;l++){
+        var cond = text[l];
+
+        for(var t = 0;t<arr.length;t++){
+            var char = (arr[t].value.split(":")[0]);
+
+            if(char == "SC"){
+                char = " ";
+
+            } else if(char == "NL"){
+                char = "\n";
+            }
+            if(char == cond){
+                output.innerHTML += arr[t].code + " ";
+                count += arr[t].code.length; 
+            } else{
+                continue
+            }
+
+        }
+
+    }
+
+    encoded_digit.innerHTML = count;
+
+}
+
+