-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfig1work.html
159 lines (139 loc) · 4.43 KB
/
fig1work.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
<!DOCTYPE html>
<head>
<title>Developing Figures in D3</title>
<link rel="stylesheet" href="css/grover-figures.css"/>
<link rel="stylesheet" href="css/Serif/cmun-serif.css"/>
<link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
showMathMenu: false,
"HTML-CSS": {
scale: 90
},
TeX: {
Macros: {
braket: ['{\\langle #1 \\rangle}', 1],
Abs: ['\\left\\lvert #2 \\right\\rvert_{\\text{#1}}', 2, ""],
bra: ['{\\left\\langle #1\\right|}',1],
ket: ['{\\left| #1\\right\\rangle}',1],
}}
});
</script>
<script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<h1>Hello World</h1>
<script type="text/javascript">
var h_stack = 110;
var w_stack = 700;
var y_origin = 55;
var n_bits = 3;
var w_tip = 35;
var h_tip = 17;
var n_circs = Math.pow(2, n_bits);
var circ_dat = new Array(n_circs).fill(0);
var circ_r = 20;
function myLine(svgHandle, startCoord, endCoord) {
return svgHandle.append("line")
.attr("x1", startCoord[0]).attr("y1", startCoord[1])
.attr("x2", endCoord[0]).attr("y2", endCoord[1]);
}
function drawMyAxis(w, origin, svgHandle) {
myLine(svgHandle, [0.5, origin], [w - 0.5, origin]).style("opacity", 0.25).style("stroke", "gray");
myLine(svgHandle, [0.5, y_origin + 4], [0.5, origin - 4]).style("opacity", 0.25).style("stroke", "gray");
myLine(svgHandle, [w - 0.5, origin + 4], [w - 0.5, origin - 4]).style("opacity", 0.25).style("stroke", "gray");
}
function gpos(x, y) {
return "translate(" + x + "," + y + ")";
}
var svg = d3.select("body").append("svg").attr("width", w_stack).attr("height", h_stack);
drawMyAxis(w_stack, y_origin, svg);
var circs = svg.append("g").attr("id", "circs").selectAll("circle").data(circ_dat).enter().append("circle");
var labels = svg.append("g").attr("id", "circ-labels").selectAll("text")
.data(circ_dat).enter().append("text").attr("class", "circ-label");
var tooltip = svg.append("g").attr("id", "tooltip")
.style("opacity", 0)
.attr("transform", gpos(-w_tip - 1, y_origin + 1.5*h_tip));
tooltip.append("rect")
.attr("width", w_tip)
.attr("height", h_tip)
.attr("rx", 3)
.attr("ry", 3)
.style("fill", "lightgrey")
tooltip.append("text")
.text("000")
.attr("text-anchor", "middle")
.attr("x", (w_tip / 2.0) - 0.5)
.attr("y", h_tip - 3.5);
function dec2bin(dec) {
var bitstring = "";
var pad = new Array(n_bits).fill(0).join('');
while (dec > 0) {
var bit = dec % 2;
var quot = Math.floor(dec / 2);
bitstring = bit.toString() + bitstring;
dec = quot;
}
return pad.substring(0, n_bits - bitstring.length) + bitstring;
}
function circX(i) {
var spacing = (w_stack - 3*circ_r) / (n_circs - 1);
return i*spacing + 1.5*circ_r;
}
circs.attr("cx", function(val, i) { return circX(i); })
.attr("cy", y_origin)
.attr("r", circ_r)
.attr("fill", "black")
.attr("opacity", 0.85)
.on("mouseover", function(val, i) {
d3.select(this)
.transition()
.duration(100)
.attr("cy", y_origin - 8)
.attr("r", circ_r + 3);
d3.select(labels[0][i])
.transition()
.duration(100)
.attr("y", y_origin - 3);
d3.select("#tooltip text").html(dec2bin(i));
d3.select("#tooltip")
.attr("transform", gpos(circX(i) - 0.5*w_tip, y_origin + 1.5*h_tip))
.transition()
.duration(100)
.style("opacity", 1);
})
.on("mouseout", function(val, i) {
d3.select(this)
.transition()
.duration(200)
.attr("cy", y_origin)
.attr("r", circ_r);
d3.select(labels[0][i])
.transition()
.duration(200)
.attr("y", y_origin + 5);
d3.select("#tooltip")
.transition()
.duration(200)
.style("opacity", 0);
})
.on("click", function(val, i) {
d3.select(".chosen-circ")
.transition()
.duration(100)
.attr("class", "")
.style("fill", "black");
d3.select(this)
.transition()
.duration(100)
.attr("class", "chosen-circ")
.style("fill", "gray");
});
labels.text(function(val, i) { return i; })
.attr("text-anchor", "middle")
.attr("x", function(val, i) { return circX(i); })
.attr("y", y_origin + 5);
</script>
</body>
</html>