All the things

jamieparkinson · May 4, 2016 · 6cd1418 · 6cd1418
1 parent 431a064
commit 6cd1418
Show file tree

Hide file tree

Showing 8 changed files with 958 additions and 124 deletions.
diff --git a/css/grover-figures.css b/css/grover-figures.css
@@ -26,13 +26,83 @@ div.svg-fig svg#fig1 #tooltip text {
 	font-size: 13.5px;
 }
 
-.graph-rect {
+div.svg-fig svg#fig2 .graph-rect {
 	fill: black;
 	opacity: 0.85;
 }
 
-.mean-line {
+div.svg-fig svg#fig2 .mean-line {
 	stroke-width: 0.85;
 	stroke: red;
 	stroke-dasharray: 3, 1;
+}
+
+.info-div {
+	text-align: right;
+	background-color: #F0F0F0;
+	display: inline-block;
+	float: right;
+	padding: 3px 5px;
+	border-radius: 2px;
+	pointer-events: none;
+}
+
+#steps-list {
+	float: left;
+	width: 600px;
+	display: block;
+	padding: 0;
+	padding-left: 35px;
+}
+
+#steps-container {
+	width: 110%;
+	position: relative;
+	overflow: hidden;
+	display: block;
+	padding: 0;
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+#fig2-container {
+	float: left;
+	width: 580px;
+	margin-left: 45px;
+	padding: 0;
+	opacity: 0;
+}
+
+#fig2-container.graph-scroll-fixed {
+	position: fixed;
+	display: block;
+	top: 30%;
+	left: calc(600px - 150px + 45px + 35px + 12.5%);
+}
+
+#fig2-container.graph-scroll-below {
+	position: absolute;
+	bottom: 0px;
+	margin-left: calc(600px - 150px + 35px + 32px + 12.5%);
+}
+
+.play-icon {
+	margin: 0 0 -0.6rem 0;
+	opacity: 0.6;
+	width: 1.85rem;
+	display: inline-block;
+}
+
+a.play-icon.in-list {
+	float: right;
+	margin-right: 15px;
+}
+
+a.play-icon.in-list:hover {
+	opacity: 0.8;
+}
+
+a.play-icon.in-list:active {
+	width: 2.1rem;
+	margin-right: 12px;
 }
diff --git a/css/tufte.css b/css/tufte.css
@@ -8,7 +8,8 @@ body { width: 87.5%;
        font-family: 'Computer Modern Serif';
        padding-bottom: 20rem;
        color: #000; /* Changed to black */
-       max-width: 1200px; }
+       max-width: 1200px;
+       overflow-x: hidden; }
 
 h1 {  font-family: 'Computer Modern Serif';
       font-weight: bold;

diff --git a/fig2work.html b/fig2work.html
@@ -33,7 +33,7 @@
   <!-- Global D3 variables etc -->
   <script type="text/javascript"> 
     var n_bits = 4; // Number of qubits
-    var needle_idx = -1; // Haven't chosen a needle yet
+    var needle_idx = 7; // Haven't chosen a needle yet
 
     function myLine(svgHandle, startCoord, endCoord) {
       return svgHandle.append("line")
@@ -57,6 +57,8 @@ <h1>Figure 2</h1>
 <input type="button" value="Oracle" onclick="doOracle()" />
 <input type="button" value="Mean" onclick="doMean()" />
 
+<div id="prob-div" style="opacity: 0;">\(P(x_0) \approx \)&nbsp;<span id="prob-val"></span></div>
+
 <script type="text/javascript">
 var h_algplot = 200; // SVG canvas size
 var w_algplot = 580;
@@ -75,7 +77,7 @@ <h1>Figure 2</h1>
 
 var bar_padding = 12; // Padding between bars
 
-var svg = d3.select("body").append("svg").attr("width", w_algplot).attr("height", h_algplot); // Create SVG object
+var svg = d3.select("body").append("svg").attr("width", w_algplot).attr("height", h_algplot).attr("id", "fig2"); // Create SVG object
 
 var noise = function() { return noiseOn ? d3.random.normal(0.0, noiseSigma)() : 0 }; // Noise function gives normally distributed noise if turned on
 bar_heights = bar_heights.map(function(clean) { return clean + noise(); }); // Apply noise to the amplitudes
@@ -105,6 +107,11 @@ <h1>Figure 2</h1>
 
 var needle_idx = 15;
 
+// Gets probability of measuring the needle to 2 dp
+function probMeasure() {
+  return Math.min(1.00, Math.pow(bar_heights[needle_idx], 2).toFixed(2));
+}
+
 var rect_width = (w_algplot / n_bars) - bar_padding; // Caulculate width of each bar
 rects.attr("width", rect_width) // "Draw" bars but with zero height now
      .each(function(h) { d3.select(this).attr(makeBar(0)); })
@@ -131,6 +138,11 @@ <h1>Figure 2</h1>
        .attr("x", function(h, i) { // Space the bars out correctly
           return i * (w_algplot / n_bars) + 0.5*bar_padding;
        });
+
+  d3.select("#prob-val").html(probMeasure()) // Update the probability
+  d3.select("#prob-div").transition()
+                        .duration(150)
+                        .style("opacity", 1);
 }
 
 // Draw a red dot to symbolize the action of the oracle
@@ -192,7 +204,7 @@ <h1>Figure 2</h1>
               .attr("x", needle_idx * (w_algplot / n_bars) + 0.5*bar_padding)
               .attr(makeBar(h + thisNoise))
             .transition("flip") // Flip it down to 0
-              .delay(250 + 20 + 250 + 600)
+              .delay(250 + 20 + 250 + 300)
               .duration(300)
               .ease("cubic-in")
               .attr(makeBar(0))
@@ -230,6 +242,8 @@ <h1>Figure 2</h1>
        .attr("y", function(h) { return makeBar(h)["y"]; })
        .attr("height", function(h) { return makeBar(h)["height"]; });
 
+  setTimeout(function(){ d3.select("#prob-val").html(probMeasure()); }, 750+300+1200); // Update the measurement probability
+
   meanLine.transition("disappearLine") // Remove the mean marker
     .duration(750)
     .delay(750 + 300 + 1200 + 200)