Semi- merge

rcmiller · Aug 13, 2013 · b9e3865 · b9e3865
1 parent 1a2ea88
commit b9e3865
Show file tree

Hide file tree

Showing 5 changed files with 354 additions and 264 deletions.
diff --git a/drawSaved.js b/drawSaved.js
@@ -69,8 +69,8 @@ var drawFinished=function(myMeatType,myMaxTemps,instructions,startingtemp,side,t
 		var dropdown=$('<select id="steakHist"></select>');
 		dropdown.append($('<option>Current</option>'));
 		//$(".span6").append(dropdown);
-		var svgContainer = d3.select(".dropdown").append("svg")
-                                   .attr("width", '50%')
+		var svgContainer = d3.select(".span12").append("svg")
+                                   .attr("width", '42%')
                                    .attr("class", 'finalsteak')
 									.append("g")
 	.attr("class",'savedInfo')
@@ -79,7 +79,7 @@ var drawFinished=function(myMeatType,myMaxTemps,instructions,startingtemp,side,t
 
 		var legend = svgContainer.selectAll('g')
 
-        .data(function(){return mode=='C'? CtempScale[myMeatType]:FtempScale[myMmeatType]})
+        .data(function(){return mode=='C'? CtempScale[myMeatType]:FtempScale[myMeatType]})
 
         .enter()
       .append('g')
@@ -89,7 +89,7 @@ var drawFinished=function(myMeatType,myMaxTemps,instructions,startingtemp,side,t
 
 
     legend.append('rect')
-        .attr('x', function(d,i){return (-10+(1-side)*90)+'%'})
+        .attr('x', function(d,i){return (5+(1-side)*72)+'%'})
         .attr('y', function(d, i){ return -125+i*10 })
         .attr('width', 8)
         .attr('height', 8)
@@ -100,7 +100,7 @@ var drawFinished=function(myMeatType,myMaxTemps,instructions,startingtemp,side,t
 
     legend.append('text')
 	.data(myMaxs)
-        .attr('x', function(d,i){return (-5+(1-side)*80)+'%'})
+        .attr('x', function(d,i){return (0+(1-side)*80)+'%'})
         .attr('y', function(d, i){ return  -125+8+i*10})
 		.style('font-size','6pt')
         .text(function(d){ return (100*d/(myMaxTemps.length)).toFixed(0) +"%"; });	
@@ -109,7 +109,7 @@ var drawFinished=function(myMeatType,myMaxTemps,instructions,startingtemp,side,t
 var rectangle = svgContainer.selectAll("rect")
     .data([0,0,0,0,0,0,0].concat(myMaxTemps.reverse()))
   .enter().append("rect")
-           .attr("x", (8+(1-side)*50)+'%')
+           .attr("x", (20+(1-side)*30)+'%')
            .attr("y", function(d,i){return -160+i*4})
            .attr("width", '10%')
            .attr("height", '4px')
@@ -118,7 +118,7 @@ var rectangle = svgContainer.selectAll("rect")
 var texts=svgContainer.selectAll("text")
   .data([0,1,2,3,4,5,6].concat(directions))
 .enter().append("text")
-.attr("x", ((side)*20)+'%')
+.attr("x", ((side)*40)+'%')
 .attr("width", '90%')
 .attr("y", function(d,i){return -120+(i-7)*10})
 .text(function(d){return d})

diff --git a/graph.js b/graph.js
@@ -164,7 +164,7 @@ if(meatType!='False'){
 		.attr('class','percents')
         .attr('x', width/3-30)
         .attr('y', function(d, i){ return (i *  15+200+8);})
-        .text(function(d,i){return "0%"});
+        .text(function(d,i){return (100*(parseFloat(dat[59][(6-i)])+parseFloat(dat[59][12-(6-i)]))/m).toFixed(0)+ "% "});
 }
 
 var ttip = d3.select(".span9").append("div")   
@@ -204,9 +204,9 @@ var rect = layer.selectAll("rect")
 		for(var i=0;i<7;i++)
 		{
 		var text=d3.selectAll('.percents')[0][boundaries[meatType].length-i];
-		var line=parseInt((event.pageX-parseFloat($("body").css('margin-left'))-margin.left)/(x.rangeBand()+1)-4.0);	
+		var line=parseInt((d3.event.pageX-margin.left)/(x.rangeBand()+1.2)-35);
 		var info=mode=='C'? CtempScale[meatType][boundaries[meatType].length-i]['info']:FtempScale[meatType][boundaries[meatType].length-i]['info'];
-		$(text).text((100*(parseFloat(dat[line][i])+parseFloat(dat[line][12-i]))/m).toFixed(0)+ "% ");
+		$(text).text((100*(parseFloat(dat[line][(i)])+parseFloat(dat[line][12-(i)]))/m).toFixed(0)+ "% ");
 
 		}
 		}
@@ -264,7 +264,7 @@ console.log(line);
 var imgstop = svg.selectAll("image").data(flame);
             imgstop.enter()
             .append("svg:image")
-			.attr("xlink:href", function(d){return d[1]==0? "flamedown.png":"flame.png"})
+			.attr("xlink:href", function(d){return d[1]==1? "flamedown.png":"flame.png"})
 			.attr("width", Math.min(x.rangeBand(),30))
             .attr("height", Math.min(x.rangeBand(),30))
 			.attr("x", function(d){return (d[0]+1.5)*(x.rangeBand()+1)})
@@ -316,7 +316,7 @@ svg.append("text")
  	.attr("transform", "rotate(-90)")
     .text("Meat Thickness (cm)");
 
-/*svg.append("text")
+svg.append("text")
     .attr("class", "y label1")
     .attr("text-anchor", "end")
     .attr("y", 6)
@@ -326,12 +326,12 @@ svg.append("text")
 svg.append("text")
     .attr("class", "y label2")
     .attr("text-anchor", "end")
-    .attr("y", 0)
+    .attr("y", 13)
     .attr("x",-height+margin.bottom/3)
     .attr("transform", "rotate(-90)")
     .text("Side 1");	
 
-*/		
+
 /*
  svg.append("g")         
         .attr("class", "grid")

diff --git a/home-screen.html b/home-screen.html
@@ -63,10 +63,11 @@ <h3 id="myModalLabel">How to Use Cook My Meat</h3>
     <div id="aboutModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
         <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-        <h3 id="myModalLabel">About this Applet</h3>
+        <h3 id="myModalLabel">About</h3>
         </div>
         <div class="modal-body">
-            <p>This visualization was created by MIT students Kate Roe, Laura Breiman, and Marissa Stephens for the 2013 edX course <a href='https://www.edx.org/course/harvard-university/spu27x/science-cooking-haute-cuisine/639' target="_newtab">Science & Cooking: From Haute Cuisine to Soft Matter Science</a> taught by Harvard professor Michael Brenner. It demonstrates the heat diffusion through meat over time.</p>
+            <p>This visualization was created by MIT students Kate Roe, Laura Breiman, and Marissa Stephens for the 2013 edX course <a href='https://www.edx.org/course/harvard-university/spu27x/science-cooking-haute-cuisine/639' target="_newtab">Science & Cooking: From Haute Cuisine to Soft Matter Science</a>. It demonstrates the heat diffusion through meat over time.</p>
+			<p>The temperatures for the different stages of protein denaturization come from Harold McGee's <i>>On Food and Cooking: The Science and Lore of the Kitchen</i> </p>
         </div>
         <div class="modal-footer">
         <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>

diff --git a/perfectSteak.css b/perfectSteak.css
@@ -48,21 +48,21 @@ input[type="radio"].toggle + label {
 }
 .switch{
 	position: absolute;
-	left:40%;
-	top:350px;
+	left:80%;
+	top:80px;
 	height:40px;
 	width:200px;
 
 }
 #Steak{
-	margin:2px;
+	margin:1px;
 }
 #Tuna{
-	margin:2px;
+	margin:1px;
 }
 #Turkey{
-	margin:2px;
-	padding:1px;
+	margin-right:1px;
+
 }
 input[type="radio"].toggle:checked + label.btn:hover {
   background-color: inherit;
@@ -82,13 +82,18 @@ input[type="radio"].toggle-right + label {
 }
 .dropdown{
     overflow:auto;
-	height:200px;
+	height:50px;
 }
 
 .btn{
-	font-size:8pt;
+	font-size:12pt;
 	padding:2px;
 }
+#Cook{
+	font-size:20pt;
+	padding:2px;
+	width:66%;
+}
 
 .selectName{
 	position: absolute;
@@ -108,11 +113,12 @@ height:260px;
 
 
 th{
-	font-size: 8px;
+	font-size: 12px;
+	line-height:90%!important;
 }
 
 td{
-
+	width:32% !important;
 	margin:0!important;
 	padding:1px!important;
 }
@@ -126,12 +132,14 @@ td{
 .closeRow{
 	margin-right:10px;
 }
-
+.span12{
+	margin-top:40px;
+}
 .steakHist
 {
 	width:40%;
 	height:20px;
-	margin-left:5%;
+	margin-left:0%;
 	margin-right:5%;
 	margin-top:0%;
 	margin-bottom:0%;
@@ -140,8 +148,8 @@ td{
 #meatInp{
 	position:relative;
 	padding: 0px;
-	font-size:10px; 
-	margin-left:15px;
+	font-size:12px; 
+	margin-left:7px!important;
 }
 
 input[type="text"] {
@@ -161,7 +169,7 @@ input[type="text"] {
 
 #thickInpDiv, #tempInpDiv, #meatTypeDiv{
 	padding: 5px;
-	margin:5px;
+	margin:0px;
 	width:80px;!important;
 	  font-size: 12px;
 }