31:T695, { const width = 400; const height = 200; //Create SVG var svg = d3.select(DOM.svg(width, height)) const g = svg .append("g") var defs = svg.append('defs'); //Append a linearGradient element to the defs and give it a unique id var linearGradient = defs.append("linearGradient") .attr("id", "linear-gradient"); //Append multiple color stops by using D3's data/enter step linearGradient.selectAll("stop") .data([ {offset: "0%", color: "#2c7bb6"}, {offset: "12.5%", color: "#00a6ca"}, {offset: "25%", color: "#00ccbc"}, {offset: "37.5%", color: "#90eb9d"}, {offset: "50%", color: "#ffff8c"}, {offset: "62.5%", color: "#f9d057"}, {offset: "75%", color: "#f29e2e"}, {offset: "87.5%", color: "#e76818"}, {offset: "100%", color: "#d7191c"} ]) .enter().append("stop") .attr("offset", function(d) { return d.offset; }) .attr("stop-color", function(d) { return d.color; }); //A color scale var colorScale = d3.scaleLinear() .range(["#2c7bb6", "#00a6ca","#00ccbc","#90eb9d","#ffff8c", "#f9d057","#f29e2e","#e76818","#d7191c"]); //Append multiple color stops by using D3's data/enter step linearGradient.selectAll("stop") .data( colorScale.range() ) .enter().append("stop") .attr("offset", function(d,i) { return i/(colorScale.range().length-1); }) .attr("stop-color", function(d) { return d; }); g.append("rect") .attr("class","rec") .attr("x",83) .attr("y",100) .attr("width", 320) .attr("height",20) .attr("fill", "url(#linear-gradient)") yield svg.node(); }32:T413, { const width = 400; const height = 200; //Create SVG var svg = d3.select(DOM.svg(width, height)) const g = svg.append("g") var defs = svg.append('defs'); //Append a linearGradient element to the defs and give it a unique id var linearGradient = defs.append("linearGradient") .attr("id", "linear-gradient1") .attr("x1", "0%") .attr("x2", "0%") .attr("y1", "0%") .attr("y2", "30%"); //Append multiple color stops by using D3's data/enter step linearGradient.selectAll("stop") .data([ {offset: "0%", color: "#bddcff"}, {offset: "40%", color: "#3b95fb"}, {offset: "100%", color: "#2239a7"} ]) .enter().append("stop") .attr("offset", function(d) { return d.offset; }) .attr("stop-color", function(d) { return d.color; }); g.append("rect") .attr("class","rec") .attr("x",83) .attr("y",100) .attr("width", 320) .attr("height",240) .attr("fill", "url(#linear-gradient1)") yield svg.node(); }33:T129a,function slider (options) { options = options || {}; const { min = 0, max = 1, width = 300, height = 34, step = 0.01, format = ".2r", fill = 'url(#linear-gradient)', stroke = 'url(#linear-gradient)',//"#000", title = undefined, } = options; const quantize = v => Math.min(max, Math.max(min, Math.round(v / step) * step)); const fmt = d3.format(format); let value = quantize((options.value != undefined) ? options.value : (min + .5 * (max-min))); const W = width; const H = height; //const padx = 2; //const pady = 5; const padx = 2 + 0.01 * H; const pady = 2 + 0.01 * W; const h = .2; function path (bulge) { const dx = bulge * padx; const dy = bulge * pady; return [ "M", 0, 0, "C", h*W, -dy, (1-h)*W, -dy, W, 0, "C", W+dx, h*H, W+dx, (1-h)*H, W, H, "C", (1-h)*W, H+dy, h*W, H+dy, 0, H, "C", -dx, (1-h)*H, -dx, h*H, 0, 0, "Z", ].join(" "); } const svgdim = { left: -padx-1, top: -pady-1, width: W + 2*(padx+1), height: H + 2*(pady+1), }; const instance = new Vue({ el: html`

      
            {{ min }}
            {{ title }}
            {{ max }}
          
            {{ min }}
            {{ title }}
            {{ max }}
          
      {{ fmt(value) }}

`, data () { return { min, max, value, title, bulge_clip: DOM.uid(), fill_clip: DOM.uid(), unfill_clip: DOM.uid(), hovering: false, dragging: false, bulge: 0, fill, stroke, }; }, computed: { active () { return this.hovering || this.dragging; }, }, methods: { path, quantize, fmt, drag () { this.dragging = true; const x = d3.mouse(this.$el)[0]; const p = Math.max(0, Math.min(1, x / (W+2*padx))); this.value = this.min + p * (this.max - this.min); }, observable_notify () { this.$el.value = this.value; this.$el.dispatchEvent(new CustomEvent("input")); }, }, watch: { value: "observable_notify", active (b) { if (this._active_anim) this._active_anim.pause(); this._active_anim = anime({ targets: this.$data, duration: 500, easing: "easeOutElastic", bulge: b ? 1 : 0, }); }, }, mounted () { d3.select(this.$refs.area) .call(d3.drag() .on("start", () => this.drag()) .on("drag", () => this.drag()) .on("end", () => this.dragging = false) ) this.observable_notify(); }, }); return instance.$el; }34:T52f, { const width = 400; const height = 300; //Create SVG var svg = d3.select(DOM.svg(width, height)) const g = svg.append("g") var defs = svg.append('defs'); //Append a linearGradient element to the defs and give it a unique id var linearGradient = defs.append("linearGradient") .attr("id", "linear-gradient-water") .attr("x1", "0%") .attr("x2", "0%") .attr("y1", "0%") .attr("y2", "50%"); //Append multiple color stops by using D3's data/enter step linearGradient.selectAll("stop") .data([ {offset: "10%", color: "#ebf9fb"}, {offset: "30%", color: "#c1e2f0"}, {offset: "50%", color: "#93d1e5"}, {offset: "40%", color: "#92d0e7"}, {offset: "100%", color: "#32abd3"} ]) .enter().append("stop") .attr("offset", function(d) { return d.offset; }) .attr("stop-color", function(d) { return d.color; }); g.append("rect") .attr("class","rec") .attr("x",83) .attr("y",100) .attr("width", 320) .attr("height",240) .attr("fill", "url(#linear-gradient-water)") g.append("circle") .attr("class", "Circle1") .attr("cx", 300) .attr("cy", 200) .attr("r", 20) .style("fill","url(#linear-gradient-oil)") .style('opacity',1) yield svg.node(); }35:T2d92, {//using "d3.event.x - offset.x" to control movements of objects const width = 1000; const height = 400; //Create SVG var svg = d3.select(DOM.svg(width, height)) .style("background-color",'#000000') /* svg.style("background","url('https://user-images.githubusercontent.com/61014414/84419308-6e534480-abe6-11ea-8916-101b7b0cfe48.jpg') no-repeat");*/ const g = svg.append("g") var defs = svg.append('defs'); //Append a linearGradient element to the defs and give it a unique id var linearGradient = defs.append("linearGradient") .attr("id", "linear-gradient-oil") .attr("x1", "10%") .attr("x2", "10%") .attr("y1", "80%") .attr("y2", "30%"); //Append multiple color stops by using D3's data/enter step 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; }) 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','8') .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("circle") .attr("class", "Circle1") .attr("cx", 600) .attr("cy", 210) .attr("r", 20) .style("fill","url(#linear-gradient-oil)") g.append("circle") .attr("class", "Circle2") .attr("cx", 800) .attr("cy", 210) .attr("r", 20) .style("fill","url(#linear-gradient-oil)") var defs = svg.append('defs'); 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); svg.append('text') .text('!!!change the naming of the phases') .attr('x',600) .attr('y',20) .style('fill','white') .attr("font-size", 30) .attr("font-family", "Caveat") svg.append('text') .text('flocculation') .attr('class','flocculation') .attr('x',75) .attr('y',220) .style('fill','grey') .attr("font-size", 30) .attr("font-family", "Caveat") svg.append('line') .attr('class','flocculation_line') .style("stroke", "grey") .style("stroke-width", 2) .attr("x1", 75) .attr("y1", 143) .attr("x2", 75) .attr("y2", 220); /////////////////////////////////////////// svg.append('text') .text('partial coalescence') .attr('class','partialcoalescence') .attr('x',185) .attr('y',75) .style('fill','grey') .attr("font-size", 30) .attr("font-family", "Caveat") svg.append('line') .attr('class','partialcoalescence_line') .style("stroke", "grey") .style("stroke-width", 2) .attr("x1", 185) .attr("y1", 145) .attr("x2", 185) .attr("y2", 63); ///////////////////////////////////////////// svg.append('text') .text('coalescence') .attr('class','coalescence') .attr('x',295) .attr('y',220) .style('fill','grey') .attr("font-size", 30) .attr("font-family", "Caveat") 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); ///////////drag function//////////////////////////////////////////////// let offset = { x: 0, y: 0 }; function dragStart() { // Set the offset values 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) < 75 ) //limit the pointer at y = 144 { d3.select(this).attr('cx', 75) } if((d3.event.x - offset.x) > 175 & (d3.event.x - offset.x) < 195) //180 ~ 190: +-5 makes it stuck at the red pnt { d3.select(this).attr('cx', 185) } 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) >= 400 ) //limit the pointer { d3.select(this).attr('cx', 400) } if((d3.event.x - offset.x) != 0 ) //limit the pointer { d3.select(this).attr('cy', 144) } svg.select('line.line') .attr("x1", d3.event.x - offset.x) .attr("x2", d3.event.x - offset.x) ////testing /* svg.append('text') .text( d3.event.x - offset.x) .attr('x',20) .attr('y',1.5*( d3.event.x - offset.x)) .style('fill','white')*/ ////// if( (d3.event.x - offset.x) <80 ) { svg.select('text.flocculation') .style('fill','white') svg.select('line.flocculation_line') .style('stroke','white') svg.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) >= 80 & (d3.event.x - offset.x) < 175) { svg.select('rect.rec1') .style("opacity",1) svg.select('rect.rec2') .style("opacity",0.6) svg.select('rect.rec3') .style("opacity",0.6) svg.selectAll('text') .style('fill','grey') svg.selectAll('line') .style('stroke','grey') svg.select('circle.pointer') .style('fill','url(#svgGradient1)') .style('stroke','none') svg.select('g').style("filter", "none") svg.select('circle.Circle1') .attr('cx', 600 + (d3.event.x - offset.x)/1.18 - 68) // 80 divide svg.select('circle.Circle2') .attr('cx', 800 - (d3.event.x - offset.x)/1.18 + 68) // 80 divide /* svg.append('line') .style("stroke", "white") .style("stroke-width", 2) .attr("x1", 83) .attr("y1", 140) .attr("x2", 83) .attr("y2", 140 + (d3.event.x - offset.x) - 83); */ } if( (d3.event.x - offset.x) >= 175 & (d3.event.x - offset.x) < 195) { svg.select('rect.rec1') .style("opacity",0.6) svg.select('rect.rec2') .style("opacity",0.6) svg.select('rect.rec3') .style("opacity",0.6) svg.select('text.partialcoalescence') .style('fill','white') svg.select('line.partialcoalescence_line') .style('stroke','white') svg.select('circle.pointer') .style('fill','red') .style('stroke','white') .style('stroke-width',3) svg.select('circle.Circle1') .attr('cx', 680) svg.select('circle.Circle2') .attr('cx', 720) } if( (d3.event.x - offset.x) >= 195 & (d3.event.x - offset.x) < 285) { svg.select('g').style("filter", "none") svg.select('rect.rec1') .style("opacity",0.6) svg.select('rect.rec2') .style("opacity",1) svg.select('rect.rec3') .style("opacity",0.6) svg.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) >= 285 & (d3.event.x - offset.x) < 305) { svg.select('rect.rec1') .style("opacity",0.6) svg.select('rect.rec2') .style("opacity",0.6) svg.select('rect.rec3') .style("opacity",0.6) svg.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("g").style("filter", "url(#gooey)") } if( (d3.event.x - offset.x) >= 305) { svg.select('rect.rec1') .style("opacity",0.6) svg.select('rect.rec2') .style("opacity",0.6) svg.select('rect.rec3') .style("opacity",1) svg.selectAll('text') .style('fill','grey') svg.selectAll('line') .style('stroke','grey') svg.select('circle.pointer') .style('fill','url(#svgGradient1)') .style('stroke','none') } } //////////////////////////////////////////////////////////////////////// svg.append("rect")//flocculation .attr("class","rec1") .attr("x",80) .attr("y",140) .attr("rx",10) .attr("ry",10) .attr("width",100) .attr("height",10) .style("fill","#b0ff00") .style("opacity",0.6) svg.append("rect")//partial coalescence .attr("class","rec2") .attr("x",190) .attr("y",140) .attr("rx",10) .attr("ry",10) .attr("width",100) .attr("height",10) .style("fill","#b0ff00") .style("opacity",0.6) svg.append("rect")//coalescence .attr("class","rec3") .attr("x",300) .attr("y",140) .attr("rx",10) .attr("ry",10) .attr("width",100) .attr("height",10) .style("fill","#b0ff00") .style("opacity",0.6) svg.append("circle") .attr("class","pointer") .attr("cx",75) .attr("cy",144) .attr("r",10) .style("fill","url(#svgGradient1)") .style("opacity",1) .on("mouseover", function MouseOver(){//mouseover d3.select(this) .attr("r", 12) }) .on("mouseout", function MouseOut(){//mouseout d3.select(this) .attr("r", 10) }) .call(d3.drag() .on('start', dragStart) .on('drag', drag) ) yield svg.node(); }36:T4077, {//using "d3.event.x - offset.x" to control movements of objects const width = 1000; const height = 400; //Create SVG var svg = d3.select(DOM.svg(width, height)) .style("background-color",'#000000') /* svg.style("background","url('https://user-images.githubusercontent.com/61014414/84419308-6e534480-abe6-11ea-8916-101b7b0cfe48.jpg') no-repeat");*/ const g = svg.append("g") var defs = svg.append('defs'); //Append a linearGradient element to the defs and give it a unique id var linearGradient = defs.append("linearGradient") .attr("id", "linear-gradient-droplets") .attr("x1", "10%") .attr("x2", "10%") .attr("y1", "70%") .attr("y2", "30%"); //Append multiple color stops by using D3's data/enter step 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; }) 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("class","f1") .attr('in','SourceGraphic') .attr('stdDeviation','8') .attr('result','blur'); filter.append('feColorMatrix') .attr("class","f2") .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("class","f3") .attr('in','SourceGraphic') .attr('in2','gooey') .attr('operator','atop'); g.append("circle") .attr("class", "Circle1") .attr("cx", 600) .attr("cy", 210) .attr("r", 20) .style("fill","url(#linear-gradient-droplets)") g.append("circle") .attr("class", "Circle2") .attr("cx", 800) .attr("cy", 210) .attr("r", 20) .style("fill","url(#linear-gradient-droplets)") var defs = svg.append('defs'); 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); /* svg.append('text') .text('oil droplets gather but still retain') .attr('class','flocculation_def1') .attr('x',55) .attr('y',250)//300 .style('fill','black') .attr("font-size", 30) .attr("font-family", "Caveat") svg.append('text') .text('their original structures') .attr('class','flocculation_def2') .attr('x',55) .attr('y',280)//330 .style('fill','black') .attr("font-size", 30) .attr("font-family", "Caveat") svg.append("rect")////////////////to hide the definitions .attr("class","flocculation_rect") .attr("x",50) .attr("y",225) .attr("width",350) .attr("height",60) .style("fill","#000000")*/ ////////////////technical terms///////////////////////////////////////////////////////////////////////// svg.append('text') .text('dispersed') .attr('class','oildroplets') .attr('x',55) .attr('y',200) .style('fill','grey') .attr("font-size", 30) .attr("font-family", "Caveat") svg.append('text') .text('droplets') .attr('class','oildroplets') .attr('x',55) .attr('y',220) .style('fill','grey') .attr("font-size", 30) .attr("font-family", "Caveat") 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); /////////////////////////////////////////// svg.append('text') .text('flocculation') .attr('class','flocculation') .attr('x',165) .attr('y',75) .style('fill','grey') .attr("font-size", 30) .attr("font-family", "Caveat") 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); ///////////////////////////////////////////// svg.append('text') .text('partial') .attr('class','partialcoalescence') .attr('x',215) .attr('y',200) .style('fill','grey') .attr("font-size", 30) .attr("font-family", "Caveat") svg.append('text') .text('coalescence') .attr('class','partialcoalescence') .attr('x',215) .attr('y',220) .style('fill','grey') .attr("font-size", 30) .attr("font-family", "Caveat") svg.append('line') .attr('class','partialcoalescence_line') .style("stroke", "grey") .style("stroke-width", 2) .attr("x1", 215) .attr("y1", 143) .attr("x2", 215) .attr("y2", 220); /////////////////////////////////////////// svg.append('text') .text('coalescence') .attr('class','coalescence') .attr('x',295) .attr('y',75) .style('fill','grey') .attr("font-size", 30) .attr("font-family", "Caveat") svg.append('line') .attr('class','coalescence_line') .style("stroke", "grey") .style("stroke-width", 2) .attr("x1", 295) .attr("y1", 145) .attr("x2", 295) .attr("y2", 63); /////////////////////////////////////////// svg.append('text') .text('creaming') .attr('class','creaming') .attr('x',415) .attr('y',220) .style('fill','grey') .attr("font-size", 30) .attr("font-family", "Caveat") svg.append('line') .attr('class','creaming_line') .style("stroke", "grey") .style("stroke-width", 2) .attr("x1", 415) .attr("y1", 143) .attr("x2", 415) .attr("y2", 220); ///////////drag function//////////////////////////////////////////////// let offset = { x: 0, y: 0 }; function dragStart() { // Set the offset values 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) > 205 & (d3.event.x - offset.x) < 225) //210 ~ 220: +-5 makes it stuck at the red pnt { d3.select(this).attr('cx', 215) } 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 { svg.selectAll('text.oildroplets') .style('fill','white') svg.select('line.oildroplets_line') .style('stroke','white') svg.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) { svg.select('rect.rec1') .style("opacity",1) svg.select('rect.rec2') .style("opacity",0.6) svg.selectAll('text') .style('fill','grey') svg.selectAll('line') .style('stroke','grey') svg.select('circle.pointer') .style('fill','url(#svgGradient1)') .style('stroke','none') svg.select('g').style("filter", "none") svg.select('circle.Circle1') .attr('cx', 600 + (d3.event.x - offset.x)/1.18 - 51) // 60 divide 1.18 svg.select('circle.Circle2') .attr('cx', 800 - (d3.event.x - offset.x)/1.18 + 51) // 60 divide 1.18 /* svg.select('text.flocculation_def1') .attr('y', 250 + (d3.event.x - offset.x)/1.9 - 32) svg.select('text.flocculation_def2') .attr('y', 280 + (d3.event.x - offset.x)/1.9 - 32) */ } if( (d3.event.x - offset.x) >= 155 & (d3.event.x - offset.x) < 175) //////////////////////// floc { svg.selectAll('rect') .style("opacity",0.6) svg.select('text.flocculation') .style('fill','white') 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', 680) svg.select('circle.Circle2') .attr('cx', 720) } if( (d3.event.x - offset.x) >= 175 & (d3.event.x - offset.x) < 205) { svg.select('g').style("filter", "none") svg.select('rect.rec1') .style("opacity",0.6) svg.select('rect.rec2') .style("opacity",1) svg.select('rect.rec3') .style("opacity",0.6) svg.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) >= 205 & (d3.event.x - offset.x) < 225) //////////////////////////// partial { svg.selectAll('rect') .style("opacity",0.6) svg.selectAll('text.partialcoalescence') .style('fill','white') svg.select('line.partialcoalescence_line') .style('stroke','white') svg.select('circle.pointer') .style('fill','red') .style('stroke','white') .style('stroke-width',3) svg.select("g").style("filter", "url(#gooey)") } if( (d3.event.x - offset.x) >= 225 & (d3.event.x - offset.x) < 285) { svg.select('rect.rec2') .style("opacity",0.6) svg.select('rect.rec3') .style("opacity",1) svg.select('rect.rec4') .style("opacity",0.6) svg.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', 680 + (d3.event.x - offset.x)/3 -75 )//20 .attr('r', 20 + (d3.event.x - offset.x)/5 - 45) // 225 divide 30 svg.select('circle.Circle2') .attr('cx', 720 - (d3.event.x - offset.x)/3 + 75) .attr('r', 20 + (d3.event.x - offset.x)/5 - 45) // 225 divide 30 final r = 32 } if( (d3.event.x - offset.x) >= 285 & (d3.event.x - offset.x) < 305) ////////////////////////// coalescence { svg.selectAll('rect') .style("opacity",0.6) svg.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) } if( (d3.event.x - offset.x) >= 305 & (d3.event.x - offset.x) < 410) { svg.select('rect.rec3') .style("opacity",0.6) svg.select('rect.rec4') .style("opacity",1) svg.selectAll('text') .style('fill','grey') svg.selectAll('line') .style('stroke','grey') svg.select('circle.pointer') .style('fill','url(#svgGradient1)') .style('stroke','none') /* g.append("rect") .attr("class","creaming_rec") .attr("x",600) .attr("y",20) .attr("width",200) .attr("height",50) .style("fill","#000000") .style("opacity",0.6) g.append("rect") .attr("class","creaming_rec") .attr("x",670) .attr("y",70) .attr("width",(d3.event.x - offset.x)/10 ) .attr("height",(d3.event.x - offset.x )/10) .style("fill","yellow") .style("opacity",0.6) */ svg.select('circle.Circle1') .attr('cy', 210 - (d3.event.x - offset.x)/0.66 + 462) svg.select('circle.Circle2') .attr('cy', 210 - (d3.event.x - offset.x)/0.66 + 462) } if( (d3.event.x - offset.x) >= 410) //////////////////////////////////////////////////// creaming { svg.selectAll('rect') .style("opacity",0.6) svg.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) } } //////////////////////////////////////////////////////////////////////// svg.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) svg.append("rect") .attr("class","rec2") .attr("x",170) .attr("y",140) .attr("rx",10) .attr("ry",10) .attr("width",40) .attr("height",10) .style("fill","#40F6FF") .style("opacity",0.6) svg.append("rect") .attr("class","rec3") .attr("x",220) .attr("y",140) .attr("rx",10) .attr("ry",10) .attr("width",70) .attr("height",10) .style("fill","#40F6FF") .style("opacity",0.6) svg.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",65) .attr("cy",144) .attr("r",10) .style("fill","url(#svgGradient1)") .style("opacity",1) .on("mouseover", function MouseOver(){//mouseover d3.select(this) .attr("r", 12) }) .on("mouseout", function MouseOut(){//mouseout d3.select(this) .attr("r", 10) }) .call(d3.drag() .on('start', dragStart) .on('drag', drag) ) yield svg.node(); }37:[] 2f:{"title":"Gradient + Slider","cells":[{"id":0,"value":"md`# Gradient + Slider`","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":" {\n\t\tconst width = 400;\n\t\tconst height = 200;\n\t\n\t//Create SVG\n\tvar svg = d3.select(DOM.svg(width, height))\n\n const g = svg\n\t .append(\"g\")\n\n\tvar defs = svg.append('defs');\n\n var gradient = defs.append(\"linearGradient\")\n .attr(\"id\", \"svgGradient\")\n .attr(\"x1\", \"100%\")\n .attr(\"x2\", \"0%\")\n .attr(\"y1\", \"0%\")\n .attr(\"y2\", \"100%\");\n\ngradient.append(\"stop\")\n .attr('class', 'start')\n .attr(\"offset\", \"0%\")\n .attr(\"stop-color\", \"red\")\n .attr(\"stop-opacity\", 1);\n\ngradient.append(\"stop\")\n .attr('class', 'end')\n .attr(\"offset\", \"100%\")\n .attr(\"stop-color\", \"yellow\")\n .attr(\"stop-opacity\", 1);\n \n g.append(\"rect\")\n .attr(\"class\",\"rec\")\n .attr(\"x\",83)\n .attr(\"y\",100)\n .attr(\"width\", 320)\n .attr(\"height\",20)\n .attr(\"fill\", \"url(#svgGradient)\")\n\n\n \n yield svg.node();\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"viewof s = slider({ title: \"DRAG ME\", value: .32 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":831,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":809,"value":"md`## Prototype`","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":805,"value":"md`## Processes of Food Emulsion`","pinned":false,"hidden":false,"mode":"ojs"},{"id":640,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"md`https://animejs.com/`","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"md` https://www.visualcinnamon.com/2016/05/smooth-color-legend-d3-svg-gradient`","pinned":false,"hidden":false,"mode":"ojs"},{"id":425,"value":"md` https://www.freshconsulting.com/d3-js-gradients-the-easy-way/`","pinned":false,"hidden":false,"mode":"ojs"},{"id":472,"value":"caveatFont = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":224,"value":"md`## slider dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"Vue = require(\"vue\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"anime = require('https://bundle.run/animejs@3.0.1')","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"md` from \"@kelleyvanevert/pretty-anime-js-sliders\"`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}