31:T101b, { const width = 400; const height = 400; var svg = d3.select(DOM.svg(width, height)) .style("background-color", 'black') const g = svg .append("g") //SVG filter for the gooey effect //Code taken from http://tympanus.net/codrops/2015/03/10/creative-gooey-effects/ var defs = svg.append('defs'); var filter = defs.append('filter').attr('id','gooey'); filter.append('feGaussianBlur') .attr('in','SourceGraphic') .attr('stdDeviation','10') .attr('result','blur'); filter.append('feColorMatrix') .attr('in','blur') .attr('mode','matrix') .attr('values','1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7') .attr('result','gooey'); filter.append('feComposite') .attr('in','SourceGraphic') .attr('in2','gooey') .attr('operator','atop'); g.append("text") .attr("class","text1") .text("Hover over this oil droplet to see") .attr("y", 38) .attr("x", 75) .attr("font-size", 16) .attr("font-family", "verdana") .attr("fill", "white"); g.append("text") .attr("class","text2") .text("how lecithin stabilizes the system") .attr("y", 58) .attr("x", 75) .attr("font-size", 16) .attr("font-family", "verdana") .attr("fill", "white"); //Append circle at center var steps = 15; g.append("circle") .attr("class", "Circle") .attr("cx", 100) .attr("cy", 150) .attr("r", 20) .style("fill", "#fced42") g.append("circle") .attr("class", "Circle1") .attr("cx", 70) .attr("cy", 250) .attr("r", 20) .style("fill", "#fced42"); g.append("circle") .attr("class", "Circle2") .attr("cx", 200) .attr("cy", 170) .attr("r", 20) .style("fill", "#fced42"); g.append("circle") .attr("class", "Circle3") .attr("cx", 285) .attr("cy", 340) .attr("r", 20) .style("fill", "#fced42"); g.append("circle") .attr("class", "Circle4") .attr("cx", 350) .attr("cy", 150) .attr("r", 20) .style("fill", "#fced42"); g.append("circle") .attr("class", "Circle5") .attr("cx", 100) .attr("cy", 350) .attr("r", 20) .style("fill", "#fced42"); g.append("circle") .attr("class", "Circle6") .attr("cx", 230) .attr("cy", 350) .attr("r", 20) .style("fill", "#fced42"); g.append("circle") .attr("class", "Circle8") .attr("cx", 30) .attr("cy", 170) .attr("r", 20) .style("fill", "#fced42") /* g.append("circle") .attr("class", "Circle9") .attr("cx", 380) .attr("cy", 50) .attr("r", 20) .style("fill", "#fced42")*/ g.append("circle") .attr("class", "Circle10") .attr("cx", 300) .attr("cy", 230) .attr("r", 20) .style("fill", "#fced42") g.append("circle") .attr("class", "Circle12") .attr("cx", 40) .attr("cy", 40) .attr("r", 20) .style("fill", "#fced42") .style("stroke", "white") .style("stroke-width", "3") .style('cursor','pointer') .on("mouseover", function handleMouseOver1(){ d3.select(this) .attr("cx", 40) .attr("cy", 40) .attr("r", 20) .style("fill", "#777007") g.append("image") .attr("href",'https://user-images.githubusercontent.com/61014414/83879584-dc41cc80-a70b-11ea-981a-a1d09709c773.PNG') .attr("x",70) .attr("y",70) .attr("height",320) .attr("width",320) g.select("text.text1") .attr("fill", "#90929a"); g.select("text.text2") .attr("fill", "#90929a"); }) .on("mouseout", function handleMouseOut1(){ d3.select(this) .attr("cx", 40) .attr("cy", 40) .attr("r", 20) .style("fill", "#fced42") g.select("image").remove() g.select("text.text1") .attr("fill", "white"); g.select("text.text2") .attr("fill", "white"); }) yield svg.node(); } 32:T107c, { const width = 400; const height = 400; //Create SVG var svg = d3.select(DOM.svg(width, height)) .style("background-color", 'black') const g = svg .append("g") // .style("filter", "url(#gooey)") //Set the filter on the container svg //SVG filter for the gooey effect //Code taken from http://tympanus.net/codrops/2015/03/10/creative-gooey-effects/ var defs = svg.append('defs'); var filter = defs.append('filter').attr('id','gooey'); filter.append('feGaussianBlur') .attr('in','SourceGraphic') .attr('stdDeviation','10') .attr('result','blur'); filter.append('feColorMatrix') .attr('in','blur') .attr('mode','matrix') .attr('values','1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7') .attr('result','gooey'); filter.append('feComposite') .attr('in','SourceGraphic') .attr('in2','gooey') .attr('operator','atop'); g.append("text") .attr("class","text1") .text("Hover over this oil droplet to see how") .attr("y", 38) .attr("x", 75) .attr("font-size", 16) .attr("font-family", "verdana") .attr("fill", "white"); g.append("text") .attr("class","text2") .text("egg white protein stabilizes the system") .attr("y", 58) .attr("x", 75) .attr("font-size", 16) .attr("font-family", "verdana") .attr("fill", "white"); //Append circle at center var steps = 15; g.append("circle") .attr("class", "Circle") .attr("cx", 100) .attr("cy", 150) .attr("r", 20) .style("fill", "#fced42") g.append("circle") .attr("class", "Circle1") .attr("cx", 70) .attr("cy", 250) .attr("r", 20) .style("fill", "#fced42"); g.append("circle") .attr("class", "Circle2") .attr("cx", 200) .attr("cy", 170) .attr("r", 20) .style("fill", "#fced42"); g.append("circle") .attr("class", "Circle3") .attr("cx", 285) .attr("cy", 340) .attr("r", 20) .style("fill", "#fced42"); g.append("circle") .attr("class", "Circle4") .attr("cx", 350) .attr("cy", 150) .attr("r", 20) .style("fill", "#fced42"); g.append("circle") .attr("class", "Circle5") .attr("cx", 100) .attr("cy", 350) .attr("r", 20) .style("fill", "#fced42"); g.append("circle") .attr("class", "Circle6") .attr("cx", 230) .attr("cy", 350) .attr("r", 20) .style("fill", "#fced42"); g.append("circle") .attr("class", "Circle8") .attr("cx", 30) .attr("cy", 170) .attr("r", 20) .style("fill", "#fced42") /* g.append("circle") .attr("class", "Circle9") .attr("cx", 380) .attr("cy", 50) .attr("r", 20) .style("fill", "#fced42")*/ g.append("circle") .attr("class", "Circle10") .attr("cx", 300) .attr("cy", 230) .attr("r", 20) .style("fill", "#fced42") g.append("circle") .attr("class", "Circle12") .attr("cx", 40) .attr("cy", 40) .attr("r", 20) .style("fill", "#fced42") .style("stroke", "white") .style("stroke-width", "3") .style('cursor','pointer') .on("mouseover", function handleMouseOver1(){ d3.select(this) .attr("cx", 40) .attr("cy", 40) .attr("r", 20) .style("fill", "#777007") g.append("image") .attr("href", 'https://user-images.githubusercontent.com/61014414/83881430-a0f4cd00-a70e-11ea-85cf-b9a8537feba1.png') .attr("x",70) .attr("y",70) .attr("height",320) .attr("width",320) g.select("text.text1") .attr("fill", "#90929a"); g.select("text.text2") .attr("fill", "#90929a"); }) .on("mouseout", function handleMouseOut1(){ d3.select(this) .attr("cx", 40) .attr("cy", 40) .attr("r", 20) .style("fill", "#fced42") g.select("image").remove() g.select("text.text1") .attr("fill", "white"); g.select("text.text2") .attr("fill", "white"); }) yield svg.node(); } 33:T1075, { const width = 400; const height = 400; //Create SVG var svg = d3.select(DOM.svg(width, height)) .style("background-color", 'black') const g = svg .append("g") // .style("filter", "url(#gooey)") //Set the filter on the container svg //SVG filter for the gooey effect //Code taken from http://tympanus.net/codrops/2015/03/10/creative-gooey-effects/ var defs = svg.append('defs'); var filter = defs.append('filter').attr('id','gooey'); filter.append('feGaussianBlur') .attr('in','SourceGraphic') .attr('stdDeviation','10') .attr('result','blur'); filter.append('feColorMatrix') .attr('in','blur') .attr('mode','matrix') .attr('values','1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7') .attr('result','gooey'); filter.append('feComposite') .attr('in','SourceGraphic') .attr('in2','gooey') .attr('operator','atop'); g.append("text") .attr("class","text1") .text("Hover over this oil droplet to see") .attr("y", 38) .attr("x", 75) .attr("font-size", 16) .attr("font-family", "verdana") .attr("fill", "white"); g.append("text") .attr("class","text2") .text("how pea protein stabilizes the system") .attr("y", 58) .attr("x", 75) .attr("font-size", 16) .attr("font-family", "verdana") .attr("fill", "white"); //Append circle at center var steps = 15; g.append("circle") .attr("class", "Circle") .attr("cx", 100) .attr("cy", 150) .attr("r", 20) .style("fill", "#fced42") g.append("circle") .attr("class", "Circle1") .attr("cx", 70) .attr("cy", 250) .attr("r", 20) .style("fill", "#fced42"); g.append("circle") .attr("class", "Circle2") .attr("cx", 200) .attr("cy", 170) .attr("r", 20) .style("fill", "#fced42"); g.append("circle") .attr("class", "Circle3") .attr("cx", 285) .attr("cy", 340) .attr("r", 20) .style("fill", "#fced42"); g.append("circle") .attr("class", "Circle4") .attr("cx", 350) .attr("cy", 150) .attr("r", 20) .style("fill", "#fced42"); g.append("circle") .attr("class", "Circle5") .attr("cx", 100) .attr("cy", 350) .attr("r", 20) .style("fill", "#fced42"); g.append("circle") .attr("class", "Circle6") .attr("cx", 230) .attr("cy", 350) .attr("r", 20) .style("fill", "#fced42"); g.append("circle") .attr("class", "Circle8") .attr("cx", 30) .attr("cy", 170) .attr("r", 20) .style("fill", "#fced42") /* g.append("circle") .attr("class", "Circle9") .attr("cx", 380) .attr("cy", 50) .attr("r", 20) .style("fill", "#fced42")*/ g.append("circle") .attr("class", "Circle10") .attr("cx", 300) .attr("cy", 230) .attr("r", 20) .style("fill", "#fced42") g.append("circle") .attr("class", "Circle12") .attr("cx", 40) .attr("cy", 40) .attr("r", 20) .style("fill", "#fced42") .style("stroke", "white") .style("stroke-width", "3") .style('cursor','pointer') .on("mouseover", function handleMouseOver1(){ d3.select(this) .attr("cx", 40) .attr("cy", 40) .attr("r", 20) .style("fill", "#777007") g.append("image") .attr("href",'https://user-images.githubusercontent.com/61014414/83882073-938c1280-a70f-11ea-90a5-65a4a40f8407.png') .attr("x",70) .attr("y",70) .attr("height",320) .attr("width",320) g.select("text.text1") .attr("fill", "#90929a"); g.select("text.text2") .attr("fill", "#90929a"); }) .on("mouseout", function handleMouseOut1(){ d3.select(this) .attr("cx", 40) .attr("cy", 40) .attr("r", 20) .style("fill", "#fced42") g.select("image").remove() g.select("text.text1") .attr("fill", "white"); g.select("text.text2") .attr("fill", "white"); }) yield svg.node(); } 34:T4c6,function select(config = {}) { let { value: formValue, title, description, disabled, submit, multiple, size, options, t1 } = Array.isArray(config) ? { options: config } : config; options = options.map(o => typeof o === "object" ? o : { value: o, label: o } ); const form = input({ type: "select", title, description, submit, attributes: { disabled }, getValue: input => { const selected = Array.prototype.filter .call(input.options, i => i.selected) .map(i => i.value); return multiple ? selected : selected[0]; }, form: html` `, t1 }); form.output.remove(); return form; }35:T987,function input(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options, t1 } = config; const wrapper = html`

`; if (!form) form = html``; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) form.input.setAttribute(key, val); }); if (submit) form.append( html`` ); form.append( html`` ); if (title) form.prepend( html`

${title}

` ); if (description) form.append( html`

${description}

` ); if (format) format = typeof format === "function" ? format : d3format.format(format); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = e => { e && e.preventDefault(); const value = getValue ? getValue(form.input) : form.input.value; if (form.output) { const out = display ? display(value) : format ? format(value) : value; if (out instanceof window.Element) { while (form.output.hasChildNodes()) { form.output.removeChild(form.output.lastChild); } form.output.append(out); } else { form.output.value = out; } } form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") wrapper.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = e => e && e.preventDefault(); form[verb](); if (t1) form.append( html`

${t1}

` ); } while (form.childNodes.length) { wrapper.appendChild(form.childNodes[0]); } form.append(wrapper); return form; }36:[{"id":"d11e0e5434dcf880c5042fc533d6b943fdfb77e0a8b1ba6751ef700212f1f1483003e1936723047d2964522b459f682739d63c0f9a36c29e93c2368e8ad29173","href":"https://static.observableusercontent.com/files/d11e0e5434dcf880c5042fc533d6b943fdfb77e0a8b1ba6751ef700212f1f1483003e1936723047d2964522b459f682739d63c0f9a36c29e93c2368e8ad29173","name":"Emulsifier.m4a","type":"audio/x-m4a","lastModified":1596718988181.475,"size":35782},{"id":"f1032f0df554a04a6515e54e969d991094bb2b1403137ab97fc29b828a35c41fd4f5b261ead13a7181f8ea0b4cd040fb74b33d01177132cc6988d50076198430","href":"https://static.observableusercontent.com/files/f1032f0df554a04a6515e54e969d991094bb2b1403137ab97fc29b828a35c41fd4f5b261ead13a7181f8ea0b4cd040fb74b33d01177132cc6988d50076198430","name":"Lecithin.m4a","type":"audio/x-m4a","lastModified":1596718988307.74,"size":31270}] 2f:{"title":"Emulsifier","cells":[{"id":0,"value":"md`# Emulsifier`","pinned":false,"hidden":false,"mode":"ojs"},{"id":822,"value":"html`\n

How to pronounce \"Emulsifier\"

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"md`\nAn **emulsifier** is a surface-active ingredient that stabilizes the system, so the oil does not separate out from oil-water mixture. An emulsifier has **hydrophilic** (water loving) and **hydrophobic** (water hating) regions that stablize oil droplets. The hydrophilic region is polar and it aligns with the polar water; the hydrophobic region is non-polar, which aligns with the non-polar oil.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":772,"value":"md`![emulsifier](https://user-images.githubusercontent.com/61014414/83902510-7dd81680-a72a-11ea-9e02-7c2f2b0d308c.png)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":710,"value":"md`In **stable systems**, such as protein mayonnaise and lecithin mayonnaise, oil stays in droplet form. Oil does not separate out into a layer because of the emulsifiers between the surface of oil droplets and water.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":629,"value":"md`## Lecithin as an Emulsifier`","pinned":false,"hidden":false,"mode":"ojs"},{"id":830,"value":"html`\n

How to pronounce \"Lecithin\"

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":644,"value":"md`Lecithin is a good emulsifier. It is a small molecule with a hydrophilic head and hydrophobic tail which aligns at the water and oil surface to stabilize the oil droplets. \n\nWhen the water-oil mixture is added with lecithin, the system becomes stable because these molecules are small and highly effective at emulsifying.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":657,"value":"md`**Egg yolk** contains egg lecithin. By having these emulsifiers, we have made the oil droplets more stable in the water allowing them to stay as discrete droplets which gives us our solid structure. Mayonnaise made with egg yolks is, therefore, more stable. In other words, the water-oil mixture is less likely to separate.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":633,"value":"md`## Egg Protein as an Emulsifier`","pinned":false,"hidden":false,"mode":"ojs"},{"id":661,"value":"md`**Egg white** contains egg protein. The long chain of hydrophilic and hydrophobic segments align at the water and oil surface to stabilize the oil droplets. This system is less stable than the system with lecithin.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":624,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":742,"value":"md`## Pea Protein as an Emulsifier`","pinned":false,"hidden":false,"mode":"ojs"},{"id":745,"value":"md`**Pea protein** functions in the same manner as the egg protein. However, its structure is different, as not all proteins are the same. Less hydrophobic regions and larger hydrophilic regions result in poor surface coverage of the oil droplet, making this protein source less effective. This system is not as stable as the egg white.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":758,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":872,"value":"md`## Q&A`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1059,"value":"md`From the **longest to shortest**, rank the time it will take for creaming to happen in an oil-in-water emulsion with each the following emulsifiers: none, egg white, egg yolk, and pea protein.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":861,"value":"viewof q1 = {\n const q1 = select({\n title:'Longest time for creaming to happen',\n options: [\n { label: \"none\", value: 0 }, \n { label: \"egg white \", value: 0 }, \n { label: \"egg yolk\", value: 1 },\n { label: \"pea protein\", value: 0}\n ]\n });\n q1.input.style.fontSize = \"20px\";\n q1.input.style.marginTop = \"8px\";\n return q1;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":878,"value":"viewof q2 = {\n const q2 = select({\n options: [\n { label: \"none\", value: 0 }, \n { label: \"egg white \", value: 1 }, \n { label: \"egg yolk\", value: 0 },\n { label: \"pea protein\", value: 0}\n\n ], Title:'Longest'\n });\n q2.input.style.fontSize = \"20px\";\n q2.input.style.marginTop = \"8px\";\n return q2;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":883,"value":"viewof q3 = {\n const q3 = select({\n options: [\n { label: \"none\", value: 0 }, \n { label: \"egg white \", value: 0 }, \n { label: \"egg yolk\", value: 0},\n { label: \"pea protein\", value: 1}\n\n ], Title:'Longest'\n });\n q3.input.style.fontSize = \"20px\";\n q3.input.style.marginTop = \"8px\";\n return q3;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1014,"value":"viewof q4 = {\n const q4 = select({\n\n options: [\n { label: \"none\", value: 1 }, \n { label: \"egg white \", value: 0 }, \n { label: \"egg yolk\", value: 0 },\n { label: \"pea protein\", value: 0}\n ], t1:'Shortest time for creaming to happen'\n });\n q4.input.style.fontSize = \"20px\";\n q4.input.style.marginTop = \"8px\";\n return q4;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":886,"value":"{\n if(q1 == 1 & q2==1 & q3==1 & q4==1)\n {return \"You got it!\"}\n else\n {return \"Something is wrong with your answer! A more stable system means that it will take a longer time for creaming to happen.\"}\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1099,"value":"viewof b = button()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1098,"value":"{\n b\n var q= !this\n \n if(q == false)\n {return \"Egg yolk as an emulsifier makes the system stable because it contains lecithin.\"}\n \n else\n return 'Click to see the hint';\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1140,"value":"viewof b2 = button2()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1145,"value":"{\n b2\n var q= !this\n \n if(q == false)\n {return \"Egg white contains egg protein, which makes the system less stable than that containing lecithin.\"}\n \n else\n return 'Click to see the hint';\n \n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1155,"value":"viewof b3 = button3()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1158,"value":"{\n b3\n var q= !this\n \n if(q == false)\n {return \"Pea protein has less hydrophobic regions and larger hydrophilic regions, making this protein source even less stable.\"}\n \n else\n return 'Click to see the hint';\n \n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":818,"value":"md`## Imports and References`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1177,"value":"md`Pronunciation provided by Andrew Elder`","pinned":false,"hidden":false,"mode":"ojs"},{"id":850,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1107,"value":"function button(config = {}) {\n var {\n value = \"Hint 1\", title, description, disabled\n } = typeof config === \"string\" ? {value: config} : config;\n const form = input({\n type: \"button\", title, description,\n attributes: {disabled, value}\n });\n form.output.remove();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1136,"value":"function button2(config = {}) {\n var {\n value = \"Hint 2\", title, description, disabled\n } = typeof config === \"string\" ? {value: config} : config;\n const form = input({\n type: \"button\", title, description,\n attributes: {disabled, value}\n });\n form.output.remove();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1152,"value":"function button3(config = {}) {\n var {\n value = \"Hint 3\", title, description, disabled\n } = typeof config === \"string\" ? {value: config} : config;\n const form = input({\n type: \"button\", title, description,\n attributes: {disabled, value}\n });\n form.output.remove();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":847,"value":"md`Hydrophobic/ hydrophilic reference: https://qph.fs.quoracdn.net/main-qimg-39fd8afa2152a3cf2e8037f1fe890ab4 `","pinned":false,"hidden":false,"mode":"ojs"},{"id":802,"value":"sound1 = FileAttachment(\"Lecithin.m4a\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":832,"value":"Lecithin_speak = sound1.url()","pinned":false,"hidden":false,"mode":"ojs"},{"id":806,"value":"sound2 = FileAttachment(\"Emulsifier.m4a\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":825,"value":"Emulsifier_speak = sound2.url()","pinned":false,"hidden":false,"mode":"ojs"},{"id":863,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":865,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":867,"value":"d3format = require(\"d3-format@1\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}