littlec/dataGraph.html at main · OnStarPrograms/littlec · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Data Graph Representation</title>
    <script src="./graph_data.js" type="text/javascript"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
    <link rel="stylesheet" href="dataGraph.css">
</head>
<body>
    <h1>
        Data Graph Representation of Each Operations' Memory
    </h1>
    <h2>Project 3 Submission by Aiden Thomas, Stepan Pechenkin, and Grecia Ocando</h2>
    <p>GitHub Link: <a href="https://github.com/OnStarPrograms/littlec" style="color:#ff00ab">https://github.com/OnStarPrograms/littlec</a></p>
    <hr>
    <div style="display:flex; width:100%">
        <canvas id="trie_graph" style="width:38%; padding-left:10%; padding-right:2%; padding-top:2%; max-width:600px"></canvas>
        <canvas id="splay_graph" style="width:38%; padding-right:10%; padding-left:2%; padding-top:2%; max-width:600px;"></canvas>
    </div>
    <div>
        <p style="padding:3% 5% 3% 5%">
            The graphs above show how many levels had to be travelled in order to reach their intended place in
            each respective tree during each operation. A large dataset (1000-10000 items) shows the overall efficiency of each tree type.<br><br>
            As you can (hopefully) see from the graphs above, the trees work in logarithmic time.
            The current implementation of the Trie tree seems to be more efficient in storing data overall, but has
            points in which it may spike in inefficiency. The Splay tree is less efficient, but is overall more consistent.
        </p>
    </div>


<script>
    // fuuuuck I hate NO idea how to write in js
    const TrieXValues = TrieGraphX;
    const TrieYValues = TrieGraphY;
    const SplayXValues = SplayGraphX;
    const SplayYValues = SplayGraphY;
    const TrieSize = TrieGraphY.length;
    const SplaySize = SplayGraphY.length;
    const barColors = ["red", "green","blue","orange","brown"];

    function indexOfMax(arr) {
        if (arr.length === 0) {
            return -1;
        }

        var max = arr[0];
        var maxIndex = 0;

        for (var i = 1; i < arr.length; i++) {
            if (arr[i] > max) {
                maxIndex = i;
                max = arr[i];
            }
        }

        return maxIndex;
    }

    //const trieMax =

    new Chart("trie_graph", {
        type: "bar",
        data: {
            labels: TrieXValues,
            datasets: [{
                backgroundColor: "red",
                data: TrieYValues,
            }],
        },
        options: {
            legend: {display: false},
            maintainAspectRatio : false,

            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            },

            title: {
                display: true,
                text: "Depth Traversed From Trie Memory Operations"
            }
        }
    });

    new Chart("splay_graph", {
        type: "bar",
        data: {
            labels: SplayXValues,
            datasets: [{
                backgroundColor: "blue",
                data: SplayYValues
            }]
        },
        options: {
            legend: {display: false},
            maintainAspectRatio: false,
            //height: 20* SplaySize,
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            },

            title: {
                display: true,
                text: "Depth Traversed From Splay Memory Operations"
            }
        }
    });

</script>

</body>

</html>