-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
173 lines (156 loc) · 10.1 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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<meta charset="utf-8"/>
<html>
<head>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://unpkg.com/d3-simple-slider"></script>
<script src="expect.js/index.js"></script>
<script src="d3tip.js"></script>
<script src="posit.js"></script>
<script src="float16.js"></script>
<script src="viz.js"></script>
<script src="viz_utils.js"></script>
<script src="d3.svg.circularbrush.js"></script>
<script src="brush.js"></script>
<script src="histogram.js"></script>
<title>CSE512 | Well Rounded</title>
<!-- Stylesheet from CSE512 faculty -->
<link rel=StyleSheet HREF="cse512.css" TYPE="text/css" MEDIA="all" >
</head>
<body>
<div class="content">
<section class="title">
<a href="/">Well Rounded: Visualizing Floating Point Representations</a>
</section>
<section>
<p>
<strong>Team Members</strong>: Mara Kirdani-Ryan, Katie Lim, Gus Smith, Dan Petrisko
</p>
</section>
<section>
<h2>Links</h2>
<ul>
<li><a target="_blank" href="https://github.com/gussmith23/posit-bisection-viz/blob/master/final/poster.pdf">Poster</a> (or <a href="https://github.com/gussmith23/posit-bisection-viz/raw/master/final/poster.pdf">direct download</a>)</li>
<li><a target="_blank" href="https://github.com/gussmith23/posit-bisection-viz/blob/master/final/paper.pdf">Paper</a> (or <a href="https://github.com/gussmith23/posit-bisection-viz/raw/master/final/paper.pdf">direct download</a>)</li>
</ul>
<h2>Background</h2>
<p>
Numerical datatypes—how real numbers are represented in computer hardware—are absolutely foundational to the design of every computer in the world. It is surprising, then, that these datatypes have been largely unchanged for decades! For the most part, all computers rely on the IEEE 754 floating point specification, which gives us the <tt>float</tt> and <tt>double</tt> types that computer programmers may be familiar with. Today, though, these datatypes are finally coming under the microscope, as computer architects seek to squeeze every ounce of performance out of their hardware.
</p>
<p>
This visualization seeks to educate the user on numerical datatypes. Specifically, we present the <tt>posit</tt>, an interesting new numerical datatype.
</p>
<p>
<a href="http://www.johngustafson.net/pdfs/BeatingFloatingPoint.pdf"><i>Posits</i></a> are a new numerical datatype developed to compete with the standard IEEE 754 format. Posits add a number of very interesting features over IEEE floating point, but the most interesting at a high level are (1) the addition of the <tt>es</tt> parameter, and (2) the addition of the <i>regime</i> bitfield.
</p>
<p>
IEEE floating point numbers have only one parameter, <tt>n</tt>, which describes their length (generally 32 or 64). In addition to <tt>n</tt>, posits have another parameter <tt>es</tt>. <tt>es</tt> determines two things:
<ul>
<li>The maximum length of the exponent field, and</li>
<li>The value of a constant <tt>useed</tt> that is used in calculating the value of the posit, where <tt>useed</tt> is <tt>2^2^es</tt>.</li>
</ul>
</p>
<p>
The <i>regime</i> bitfield is a varying-length, unary-encoded field which comes just after the posit's sign field. The field is encoded as a number of 0s ending with a 1, or a number of 1s ending with a 0: <tt>001</tt> or <tt>1110</tt>, for example. The number of 1s or 0s translates to the sign and value of <tt>k</tt>, a number used to calculate the value of the posit.
</p>
<p>
The final posit is calculated as <tt>sign * useed^k * 2^exponent * 1.fraction</tt>.
</p>
<p>
In this project, we present an interactive version of the visualization shown on page 2 of <a href="http://www.johngustafson.net/pdfs/BeatingFloatingPoint.pdf">John Gustafson's original posit paper</a> and page 16 of <a href="https://posithub.org/conga/2019/docs/13/1000-PeterLindstrom.pdf">Peter Lindstrom's CoNGA 2019 slides</a>. This visualization shows the posits laid out on the <i>projectively-extended real number line</i>, which is actually a circle, rather than a line. This is the number line we're used to, but with both infinities being represented by the same point. This makes sense for posits, as posits only have one representation for infinity. The process of filling out the values on this circle is often called <i>posit bisection</i>, hence the original title of our A3 project: <i>Posit Bisection</i>.
</p>
</section>
<section>
<h2>Interaction</h2>
<p>
To illustrate the effect that the <tt>n</tt> and <tt>es</tt> parameters have on the posit representation, we provide sliders that allow the user to change these values.
This affects the visualization in a variety of ways. The two main ways are that changing <tt>n</tt> affects the number of dots on the circle and changing <tt>es</tt> affects the coloring
of the bitstrings if there are bits available for the exponent field.
</p>
<p>
The bitstrings in the posit representation are colored to differentiate between fields in the posit representation. Details on demand about how the posit value is calculated is available
via tooltip by mousing over the associated dot. The top dropdown menu in the center of the circle also offers the ability to see fractional values as labels instead of bitstrings.
</p>
<p>
To focus on certain regions of the circle, we provide brushing capabilities. The selected region is shown on the numberline in the middle of the circle. The numberline also shows rounding
tie-points between posits with small arrowheads to show in which direction the tie is broken.
</p>
<p>
To better illustrate the distribution of numbers represented in the posit, the lower dropdown menu in the middle of the circle provides three options that control how dots are spaced
along the circle: ordinal, linear, and logarithmic. These viewing modes can be used in conjuction with the <tt>n</tt> and <tt>es</tt> sliders to determine how these parameters affect
the distribution of the posits.
</p>
<p>
We also provide a histogram representation that represents the number of values clustered in that region of the circle arc to better
illustrate distribution of values. Tooltips avaiable by mousing over a histogram bar also provide details about the total number of values in that region.
</p>
</section>
<div id="circle-viz" class="visualization" style="text-align:center;">
<select class="scaleSelection"></select>
<select class="formatSelection"></select>
</div>
<div class="footer">
<a href="https://courses.cs.washington.edu/courses/cse512/19sp/">CSE 512 Data Visualization</a>
<a href="http://www.washington.edu">University of Washington</a>
</div>
</div>
</body>
<script type="text/javascript">
// Posit parameters
var n = 5; var es = 1;
var displayFormat = label_format.BITSTRING;
var scaleFormat = scale_format.ORDINAL;
const nLowerBound = 4; const nUpperBound = 8;
const esLowerBound = 0;
const sliderLowerBound = esLowerBound;
const esUpperBound = 7;
const sliderUpperBound = nUpperBound;
const es_slider_width = 200;
const n_slider_width = 200;
var width = 1000; var height = 1000;
// An assumption I'm making.
console.assert(width === height);
var margin = {left : 50, top : 50, right : 50, bottom : 50};
var svg_viz_container = d3.select("#circle-viz").append('svg')
.attr('width', margin.left + width + margin.right)
.attr('height', margin.top + height + margin.bottom)
// A trick to make a margin without needing the drawing logic to reason about it.
// See https://bl.ocks.org/mbostock/3019563.
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
var numberLine = svg_viz_container.append('g')
.attr('transform', 'translate(210, 350)');
var sliderES = d3
.sliderBottom()
.domain([sliderLowerBound, esUpperBound])
.step(1)
.ticks(esUpperBound - sliderLowerBound)
.width(es_slider_width)
.default(es)
.displayFormat(d3.format('d'))
.tickFormat(d3.format('d'))
.on('onchange', val => {
es = val;
update(width, height, n, es);
});
var sliderN = d3
.sliderBottom()
.domain([nLowerBound, sliderUpperBound])
.step(1)
.ticks(sliderUpperBound - nLowerBound)
.width(n_slider_width)
.default(n)
.displayFormat(d3.format('d'))
.tickFormat(d3.format('d'))
.on('onchange', val => {
if (val < nLowerBound) {
sliderN.silentValue(Math.max(nLowerBound, es+1));
} else {
n = val;
}
update(width, height, n, es);
});
update(width, height, n, es);
drawControls(width);
// https://bl.ocks.org/johnwalley/e1d256b81e51da68f7feb632a53c3518
</script>
</html>