-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
106 lines (106 loc) · 3.64 KB
/
index.html
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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Visualization of Huffman coding">
<link rel="stylesheet" href="/src/styles.scss">
<title>Huffman Visualization</title>
</head>
<body>
<main id="app">
<section id="input-section">
<div id="input-howto">
<h1>Input data</h1>
<p id="links">
<a href="#" id="show-howto">How to use this</a> •
<a href="https://github.com/190n/huffman-visualization" target="_blank">Source code</a>
</p>
</div>
<textarea id="input" spellcheck="false">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
</section>
<section id="histogram-section">
<h1>Histogram</h1>
<table>
<thead>
<tr>
<th>Character</th>
<th>Occurrences</th>
</tr>
</thead>
<tbody id="histogram">
</tbody>
</table>
<!-- draws a vertical border between the columns even after the last row -->
<div role="presentation" id="dummy-border"></div>
</section>
<!-- <section id="pq-section"></section> -->
<section id="huffman-section">
<h1>Huffman tree</h1>
<div id="huffman-canvas-container">
<canvas id="huffman" width="450" height="300"></canvas>
</div>
<div id="controls-container">
<input type="range" min="0" max="1" value="1" step="1" id="scrubber">
<p id="legend">
<span id="legend-left">
Initial state (every node on its own)
</span>
<span id="legend-middle">
<a href="#" id="to-start">
◀◀
</a>
<a href="#" id="step-back">
◀
</a>
<a href="#" id="step-forward">
▶
</a>
<a href="#" id="to-end">
▶▶
</a>
</span>
<span id="legend-right">
Final tree
</span>
</p>
</div>
</section>
</main>
<div id="howto-container">
<article id="howto">
<h1>Usage</h1>
<ul>
<li>
Type or paste data into the box on the left.
</li>
<li>
“Histogram” shows how many times each character in the input
occurs. You can hover over a row of this table to highlight the
corresponding node in the tree. The <code>0x00</code> and <code>0xff</code>
entries are only added to ensure that there are at least two entries in the
histogram, as the main loop while building the tree has to be able to
dequeue two nodes.
</li>
<li>
“Huffman tree” shows the Huffman tree that was created from the
histogram. Intermediate nodes display only the number of occurrences (summed
from their children). Leaf nodes display the character and the number of
occurrences.
</li>
<li>
The slider below the tree lets you view states from as the tree was being
built (when there were multiple trees or some nodes that weren’t in
any tree yet). The display of multiple trees is a work-in-progress.
</li>
</ul>
<p id="buttons">
<button id="close">Close</button>
<button id="dont-show">Don’t show again</button>
</p>
</article>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>