31:T6814, { const width = 1000 const height = 500 var svg = d3.select(DOM.svg(width, height)) .style("background-color",'#000000') svg.append("image") .attr("href",'https://user-images.githubusercontent.com/61014414/85144388-184f5400-b219-11ea-9849-9ffc45c707f8.gif') .attr("x",550) .attr("y",-300) .attr("height",800) const g = svg.append("g") const g1 = svg.append("g") const g2 = svg.append("g") const g3 = svg.append("g") var defs = svg.append('defs') function red_pointer(){ svg.select('circle.pointer') .style('fill','red') .style('stroke','white') .style('stroke-width',3) } //////////////////////////////////////////// pronunciation /////////////////////////////////////////// var audio = new Audio(); audio.src = LinkToSound; function pronounce() { svg.select('text.coalescence') .style('fill','white')} var myVar function speak() { myVar = setTimeout(pronounce,4000) } var audio_flocculation = new Audio(); audio_flocculation.src = Flocculation_speak; function pronounce_flocculation() { svg.select('text.flocculation') .style('fill','white')} var myVar_flocculation function speak_flocculation() { myVar_flocculation = setTimeout(pronounce_flocculation,3500)} g3.append('text') .text('In a dispersion, discrete particles of one phase are dispersed') .attr('class', 'text0') .attr('x',53) .attr('y',325) .style('fill','white') .attr("font-size",17) .attr('opacity',0) g3.append('text') .attr('class', 'text0') .text('throughout a second continuous phase. For example, in an oil- ') .attr('x',53) .attr('y',350) .style('fill','white') .attr("font-size", 17) .attr('opacity',0) g3.append('text') .attr('class', 'text0') .text('in-water emulsion, the oil exists as discrete, spherical droplets.') .attr('x',53) .attr('y',375) .style('fill','white') .attr("font-size", 17) .attr('opacity',0) g3.append('text') .text('Flocculation is a process where two or more droplets stick ') .attr('class', 'text1') .attr('x',53) .attr('y',325) .style('fill','white') .attr("font-size",17) .attr('opacity',0) g3.append('text') .attr('class', 'text1') .text('together (i.e. a floc) while retaining their individual integrity.') .attr('x',53) .attr('y',350) .style('fill','white') .attr("font-size", 17) .attr('opacity',0) g3.append('text') .attr('class', 'text1') .text(' Flocculation does not impact the number or size of droplets. ') .attr('x',53) .attr('y',375) .style('fill','white') .attr("font-size",17) .attr('opacity',0) g3.append('text') .attr('class', 'text4') .text('Coalescence is a process where two or more droplets merge') .attr('x',53) .attr('y',325) .style('fill','white') .attr("font-size", 17) .attr('opacity',0) .style('visibility','hidden') g3.append('text') .attr('class', 'text4') .text('together to form a single larger droplet. Coalescence reduces') .attr('x',53) .attr('y',350) .style('fill','white') .attr("font-size", 17) .attr('opacity',0) .style('visibility','hidden') g3.append('text') .attr('class', 'text4') .text(' the number of droplets and increases the size of droplets.') .attr('x',53) .attr('y',375) .style('fill','white') .attr("font-size", 17) .attr('opacity',0) .style('visibility','hidden') g3.append('text') .attr('class', 'text5') .text('Creaming is the upward movement of the dispersed droplets') .attr('x',53) .attr('y',325) .style('fill','white') .attr("font-size", 17) .attr('opacity',0) .style('visibility','hidden') g3.append('text') .attr('class', 'text5') .text('(oil) due to the fact that they have a lower density than ') .attr('x',53) .attr('y',350) .style('fill','white') .attr("font-size", 17) .attr('opacity',0) .style('visibility','hidden') g3.append('text') .attr('class', 'text5') .text('the continuous phase (water).') .attr('x',53) .attr('y',375) .style('fill','white') .attr("font-size", 17) .attr('opacity',0) .style('visibility','hidden') //////****CREATE GRADIENT COLOR***///////////////////////////////////////////////////////////////////// var linearGradient = defs.append("linearGradient") .attr("id", "linear-gradient-droplets") .attr("x1", "10%") .attr("x2", "10%") .attr("y1", "70%") .attr("y2", "30%") linearGradient.selectAll("stop") .data([ {offset: "0%", color: "#c7bf07"}, {offset: "40%", color: "#dfd60e"}, {offset: "100%", color: "#f0ff00"} ]) .enter().append("stop") .attr("offset", function(d) { return d.offset; }) .attr("stop-color", function(d) { return d.color; }) var linearGradient = defs.append("linearGradient") .attr("id", "linear-gradient-oil-rec") .attr("x1", "10%") .attr("x2", "10%") .attr("y1", "80%") .attr("y2", "30%"); linearGradient.selectAll("stop") .data([ {offset: "0%", color: "#f0ff00"}, {offset: "60%", color: "#dfd60e"}, {offset: "100%", color: "#c7bf07"} ]) .enter().append("stop") .attr("offset", function(d) { return d.offset; }) .attr("stop-color", function(d) { return d.color; }) //////***Set the filter on the container svg***////////////////////////////////////////////////////////// g.style("filter", "url(#gooey)") 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'); //Code from http://tympanus.net/codrops/2015/03/10/creative-gooey-effects/ svg.select('g').style("filter", "none") //////***APPEND ELEMENTS***//////////////////////////////////////////////////////////////////////////////// g.append("circle") .attr("class", "Circle1") .attr("cx", 680) .attr("cy", 250) .attr("r", 25) .style("fill","url(#linear-gradient-droplets)") g.append("circle") .attr("class", "Circle2") .attr("cx", 880) .attr("cy", 250) .attr("r", 25) .style("fill","url(#linear-gradient-droplets)") g.append("rect") .attr("class", "rect_oil") .attr("x",725) .attr("y", 78) .attr("rx",5) .attr("ry",5) .attr("width",123) .attr("height",0) .style("fill","url(#linear-gradient-oil-rec)") //////***POINTER GRADIENT***//////////////////////////////////////////////////////////////////////////////// var gradient = defs.append("linearGradient") .attr("id", "svgGradient1") .attr("x1", "90%") .attr("x2", "60%") .attr("y1", "50%") .attr("y2", "120%"); gradient.append("stop") .attr('class', 'start') .attr("offset", "0%") .attr("stop-color", "#f0ebce") .attr("stop-opacity", 1); gradient.append("stop") .attr('class', 'end') .attr("offset", "100%") .attr("stop-color", "#b0a984") .attr("stop-opacity", 1); /////***TECHNICAL TERMS***//////////////////////////////////////////////////////////////////////////////// g2.append('text') .text('dispersed') .attr('class','oildroplets') .attr('x',55) .attr('y',200) .style('fill','grey') .attr("font-size", 30) .attr("font-family", "Caveat") g2.append('text') .text('droplets') .attr('class','oildroplets') .attr('x',55) .attr('y',220) .style('fill','grey') .attr("font-size", 30) .attr("font-family", "Caveat") g2.selectAll('text.oildroplets') .style('cursor','pointer') .on("click", function click_oildroplets(){ svg.select('g').style("filter", "none") red_pointer() svg.select('circle.pointer') .attr('cx', 55) g3.selectAll('text') .style('visibility','hidden') g3.selectAll('text.text0') .style('visibility','visible') .style('opacity',1) g1.selectAll('rect') .style("opacity",0.6) g2.selectAll('text') .style('fill','grey') g2.selectAll('text.oildroplets') .style('fill','white') svg.selectAll('line') .style("stroke", "grey") svg.select('line.oildroplets_line') .style("stroke", "white") svg.select('circle.Circle1') .attr('r',25) .attr('cx', 680) .attr('cy', 250) svg.select('circle.Circle2') .attr('r',25) .attr('cx', 880) .attr('cy', 250) svg.select('rect.rect_oil') .style('visibility','hidden') }) svg.append('line') .attr('class','oildroplets_line') .style("stroke", "grey") .style("stroke-width", 2) .attr("x1", 55) .attr("y1", 143) .attr("x2", 55) .attr("y2", 220); /////////////////////////////////////////// function click_flocculation(){ svg.select('g').style("filter", "none") red_pointer() svg.select('circle.pointer') .attr('cx', 165) g3.selectAll('text') .style('visibility','hidden') g3.selectAll('text.text1') .style('visibility','visible') .style('opacity',1) g1.selectAll('rect') .style("opacity",0.6) g2.selectAll('text') .style('fill','grey') g2.select('text.flocculation') .style('fill','white') svg.selectAll('line') .style("stroke", "grey") svg.select('line.flocculation_line') .style("stroke", "white") svg.select('circle.Circle1') .attr('r',25) .attr('cx', 755) .attr('cy', 250) svg.select('circle.Circle2') .attr('r',25) .attr('cx', 805) .attr('cy', 250) svg.select('rect.rect_oil') .style('visibility','hidden') } svg.append("image") .attr("href", "https://img.icons8.com/officexs/15/000000/speaker.png") .attr("x",287) .attr("y",62) .style('cursor','pointer') .on("click", function click(){ audio_flocculation.play(); speak_flocculation(); click_flocculation(); svg.select('text.flocculation') .style('fill','#64a0fa') }) g2.append('text') .text('flocculation') .attr('class','flocculation') .attr('x',165) .attr('y',75) .style('fill','grey') .attr("font-size", 30) .attr("font-family", "Caveat") .style('cursor','pointer') .on("click", click_flocculation) svg.append('line') .attr('class','flocculation_line') .style("stroke", "grey") .style("stroke-width", 2) .attr("x1", 165) .attr("y1", 145) .attr("x2", 165) .attr("y2", 63); /////////////////////////////////////////// function click_coalescence(){ svg.select('g').style("filter", "url(#gooey)") red_pointer() svg.select('circle.pointer') .attr('cx', 295) g3.selectAll('text') .style('visibility','hidden') g3.selectAll('text.text4') .style('visibility','visible') .style('opacity',1) g1.selectAll('rect') .style("opacity",0.6) g2.selectAll('text') .style('fill','grey') g2.select('text.coalescence') .style('fill','white') svg.selectAll('line') .style("stroke", "grey") svg.select('line.coalescence_line') .style("stroke", "white") svg.select('circle.Circle1') .attr('r',37) .attr('cx', 780) .attr('cy', 250) svg.select('circle.Circle2') .attr('r',37) .attr('cx', 780) .attr('cy', 250) svg.select('rect.rect_oil') .style('visibility','hidden') } svg.append("image") .attr("href", "https://img.icons8.com/officexs/15/000000/speaker.png") .attr("x",420) .attr("y",207) .style('cursor','pointer') .on("click", function click(){ audio.play(); speak(); click_coalescence(); svg.select('text.coalescence') .style('fill','#64a0fa') }) g2.append('text') .text('coalescence') .attr('class','coalescence') .attr('x',295) .attr('y',220) .style('fill','grey') .attr("font-size", 30) .attr("font-family", "Caveat") .style('cursor','pointer') .on("click", click_coalescence) svg.append('line') .attr('class','coalescence_line') .style("stroke", "grey") .style("stroke-width", 2) .attr("x1", 295) .attr("y1", 143) .attr("x2", 295) .attr("y2", 220); /////////////////////////////////////////// g2.append('text') .text('creaming') .attr('class','creaming') .attr('x',415) .attr('y',75) .style('fill','grey') .attr("font-size", 30) .attr("font-family", "Caveat") .style('cursor','pointer') .on("click", function click_creaming(){ svg.select('g').style("filter", "url(#gooey)") red_pointer() svg.select('circle.pointer') .attr('cx', 415) g3.selectAll('text') .style('visibility','hidden') g3.selectAll('text.text5') .style('visibility','visible') .style('opacity',1) g1.selectAll('rect') .style("opacity",0.6) g2.selectAll('text') .style('fill','grey') g2.selectAll('text.creaming') .style('fill','white') svg.selectAll('line') .style("stroke", "grey") svg.select('line.creaming_line') .style("stroke", "white") svg.select('circle.Circle1') .attr('r',0.42) .attr('cx', 780) .attr('cy', 110) svg.select('circle.Circle2') .attr('r',0.42) .attr('cx', 780) .attr('cy', 110) svg.select('rect.rect_oil') .style('visibility','visible') .attr('height',31.7) }) svg.append('line') .attr('class','creaming_line') .style("stroke", "grey") .style("stroke-width", 2) .attr("x1", 415) .attr("y1", 145) .attr("x2", 415) .attr("y2", 63); //////***drag function***/////////////////////////////////////////////////////////////////////////////// let offset = { x: 0, y: 0 }; function dragStart() { offset.x = d3.event.x - d3.select(this).attr('cx'); offset.y = d3.event.y - d3.select(this).attr('cy'); } function drag() { d3.select(this) .attr('cx', d3.event.x - offset.x) .attr('cy', d3.event.y - offset.y) if((d3.event.x - offset.x) < 60 ) //limit the pointer at y = 144 { d3.select(this).attr('cx', 55) } if((d3.event.x - offset.x) > 155 & (d3.event.x - offset.x) < 175) //160 ~ 170: +-5 makes it stuck at the red pnt { d3.select(this).attr('cx', 165) } if((d3.event.x - offset.x) > 285 & (d3.event.x - offset.x) < 305) //290 ~ 300: +-5 makes it stuck at the red pnt { d3.select(this).attr('cx', 295) } if((d3.event.x - offset.x) > 410 ) //limit the pointer { d3.select(this).attr('cx', 415) } if((d3.event.x - offset.x) != 0 ) //limit the pointer at certain y { d3.select(this).attr('cy', 144) } if( (d3.event.x - offset.x) <60 )//oil droplets { g3.selectAll('text.text0') .style('visibility','visible') .style('opacity', 1) g2.selectAll('text.oildroplets') .style('fill','white') svg.select('line.oildroplets_line') .style('stroke','white') g1.selectAll('rect') .style('opacity',0.6) svg.select('circle.pointer') .style('fill','red') .style('stroke','white') .style('stroke-width',3) } if( (d3.event.x - offset.x) >= 60 & (d3.event.x - offset.x) < 155) { g3.selectAll('text.text0') .style('visibility','hidden') g3.selectAll('text.text1') .style('visibility','visible') .style('opacity', (d3.event.x - offset.x)/95 - 0.63) svg.select('rect.rec1') .style("opacity",1) g2.selectAll('text') .style('fill','grey') svg.selectAll('line') .style('stroke','grey') svg.select('circle.pointer') .style('fill','url(#svgGradient1)') .style('stroke','none') svg.select('circle.Circle1') .attr("r", 25) .attr('cx', 680 + (d3.event.x - offset.x)/1.25 - 48) // 680 + (d3.event.x - offset.x)/1.24 - 48 svg.select('circle.Circle2') .attr("r", 25) .attr('cx', 880 - (d3.event.x - offset.x)/1.25 + 48) // 880 - (d3.event.x - offset.x)/1.24 + 48 } if( (d3.event.x - offset.x) >= 155 & (d3.event.x - offset.x) < 175) //////////////////////// flocculation { svg.select('g').style("filter", "none") g2.select('text.flocculation') .style('fill','white') g3.selectAll('text.text1') .style('visibility','visible') .attr('opacity', 1) g3.selectAll('text.text4') .style('visibility','hidden') g1.selectAll('rect') .style("opacity",0.6) svg.select('line.flocculation_line') .style('stroke','white') svg.select('circle.pointer') .style('fill','red') .style('stroke','white') .style('stroke-width',3) svg.select('circle.Circle1') .attr('cx', 755) svg.select('circle.Circle2') .attr('cx', 805) } if( (d3.event.x - offset.x) >= 175 & (d3.event.x - offset.x) < 225) { svg.select("g").style("filter", "url(#gooey)") g3.selectAll('text.text1') .style('visibility','hidden') g3.selectAll('text.text4') .style('visibility','visible') .style('opacity',(d3.event.x - offset.x)/100 - 1.75) svg.select('rect.rec1') .style("opacity",0.6) svg.select('rect.rec2') .style("opacity",1) g2.selectAll('text') .style('fill','grey') svg.selectAll('line') .style('stroke','grey') svg.select('circle.pointer') .style('fill','url(#svgGradient1)') .style('stroke','none') } if( (d3.event.x - offset.x) >= 225 & (d3.event.x - offset.x) < 285) { g3.selectAll('text.text4') .style('opacity',(d3.event.x - offset.x)/130 - 1.23) svg.select('rect.rec2') .style("opacity",1) svg.select('rect.rec4') .style("opacity",0.6) g2.selectAll('text') .style('fill','grey') svg.selectAll('line') .style('stroke','grey') svg.select('circle.pointer') .style('fill','url(#svgGradient1)') .style('stroke','none') svg.select('circle.Circle1') .attr('cx', 760 + (d3.event.x - offset.x)/3 -75 )//20 .attr('r', 25 + (d3.event.x - offset.x)/5 - 45) svg.select('circle.Circle2') .attr('cx', 800 - (d3.event.x - offset.x)/3 + 75) .attr('r', 25 + (d3.event.x - offset.x)/5 - 45) } if( (d3.event.x - offset.x) >= 285 & (d3.event.x - offset.x) < 305) ////////////////////////// coalescence { g1.selectAll('rect') .style("opacity",0.6) g3.selectAll('text.text4') .style('visibility','visible') .attr('opacity',1) g3.selectAll('text.text5') .style('visibility','hidden') g2.select('text.coalescence') .style('fill','white') svg.select('line.coalescence_line') .style('stroke','white') svg.select('circle.pointer') .style('fill','red') .style('stroke','white') .style('stroke-width',3) svg.select('circle.Circle1') .attr('r', 37) svg.select('circle.Circle2') .attr('r', 37) } if( (d3.event.x - offset.x) >= 305 & (d3.event.x - offset.x) < 375)//////////////////droplet goes up { g3.selectAll('text.text4') .style('visibility','hidden') g3.selectAll('text.text4') .style('visibility','hidden') g3.selectAll('text.text5') .style('visibility','visible') .style('opacity', (d3.event.x - offset.x)/70 - 4.36) svg.select('rect.rec4') .style("opacity",1) g2.selectAll('text') .style('fill','grey') svg.selectAll('line') .style('stroke','grey') svg.select('circle.pointer') .style('fill','url(#svgGradient1)') .style('stroke','none') svg.select('circle.Circle1') .attr('cy', 250 - (d3.event.x - offset.x)/0.5 + 610) svg.select('circle.Circle2') .attr('cy', 250 - (d3.event.x - offset.x)/0.5 + 610) svg.select('rect.rect_oil') .attr("height",0) } if( (d3.event.x - offset.x) >= 375 & (d3.event.x - offset.x) < 410)//////////droplet becomes a layer { svg.select('rect.rect_oil') .style('visibility','visible') .attr("height",(d3.event.x - offset.x)/1.1 - 341) svg.select('circle.Circle1') .attr('r', 37 - (d3.event.x - offset.x)/0.95 + 395) svg.select('circle.Circle2') .attr('r', 37 - (d3.event.x - offset.x)/0.95 + 395) } if( (d3.event.x - offset.x) >= 410) //////////////////////////////////////////////////// creaming { g1.selectAll('rect') .style("opacity",0.6) g2.select('text.creaming') .style('fill','white') svg.select('line.creaming_line') .style('stroke','white') svg.select('circle.pointer') .style('fill','red') .style('stroke','white') .style('stroke-width',3) } } //////////////////////////////////////////////////////////////////////// g1.append("rect") .attr("class","rec1") .attr("x",60) .attr("y",140) .attr("rx",10) .attr("ry",10) .attr("width",100) .attr("height",10) .style("fill","#40F6FF") .style("opacity",1) g1.append("rect") .attr("class","rec2") .attr("x",170) .attr("y",140) .attr("rx",10) .attr("ry",10) .attr("width",120) .attr("height",10) .style("fill","#40F6FF") .style("opacity",0.6) g1.append("rect") .attr("class","rec4") .attr("x",300) .attr("y",140) .attr("rx",10) .attr("ry",10) .attr("width",110) .attr("height",10) .style("fill","#40F6FF") .style("opacity",0.6) svg.append("circle") .attr("class","pointer") .attr("cx",60) .attr("cy",144) .attr("r",10) .style("fill","url(#svgGradient1)") .style("opacity",1) .style('cursor','pointer') .on("mouseover", function MouseOver(){ d3.select(this) .attr("r", 12) }) .on("mouseout", function MouseOut(){ d3.select(this) .attr("r", 10) }) .call(d3.drag() .on('start', dragStart) .on('drag', drag) ) yield svg.node(); }32:T4b6,function select(config = {}) { let { value: formValue, title, description, disabled, submit, multiple, size, options } = 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` ` }); form.output.remove(); return form; }33:T906,function input(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = 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](); } while (form.childNodes.length) { wrapper.appendChild(form.childNodes[0]); } form.append(wrapper); return form; }34:[{"id":"be49950b204a06a92026a718c84d80c2d43f0943e8c41fb6bc57058f9fdc12629e386cd417e349c7853ceeb4a69c08053ebcde7b79021a26851b0acb37fc4b0f","href":"https://static.observableusercontent.com/files/be49950b204a06a92026a718c84d80c2d43f0943e8c41fb6bc57058f9fdc12629e386cd417e349c7853ceeb4a69c08053ebcde7b79021a26851b0acb37fc4b0f","name":"Coalescence.m4a","type":"audio/x-m4a","lastModified":1596463949876.63,"size":37629},{"id":"edf7b80d7fb5b3abd2c1ec5ce070ecee29408fe96304aed9709a4b3841b35fc2045975efe6db102b82feff2e9757a92afa0051efe4f396d213f079975141b15b","href":"https://static.observableusercontent.com/files/edf7b80d7fb5b3abd2c1ec5ce070ecee29408fe96304aed9709a4b3841b35fc2045975efe6db102b82feff2e9757a92afa0051efe4f396d213f079975141b15b","name":"Flocculation.m4a","type":"audio/x-m4a","lastModified":1596463949878.081,"size":33123}] 2f:{"title":"The Formation and Breakdown of an Emulsion","cells":[{"id":0,"value":"md`# The Formation and Breakdown of an Emulsion `","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"html`\n