32:T8a5,ggplot = { const height = 350 const width = 800 const svg = d3.select(DOM.svg(width, height)); const points = []; data.nodes.forEach(function(d,i) { d.points.forEach(function(e,j) { points.push(e); }) }) const x = d3.scaleLinear().rangeRound([50, width-50]).domain(d3.extent(points,function(d) { return d[1]})); const y = d3.scaleLinear().rangeRound([height-50, 50]).domain(d3.extent(points,function(d) { return d[0]})); const scale = d3.scaleOrdinal(d3.schemeCategory10); svg.append("rect") .attr("x",0) .attr("y",0) .attr("width",width) .attr("height",height) .style("fill", "lightgrey") svg.append("g").attr("transform", "translate(0," + (height-50) + ")").call(d3.axisBottom(x)) .append("text") .attr("transform", "translate(" + (width/2) + " ," + (40) + ")") .style("text-anchor", "middle") .style("fill", "#000") .style("font-size", "16") .text("Effect Size"); svg.append("g").attr("transform", "translate(50,0)").call(d3.axisLeft(y)) .append("text") .attr("transform", "rotate(-90)") .attr("y", -50) .attr("x",0 - (height / 2)) .attr("dy", "1.25em") .style("text-anchor", "middle") .style("fill", "#000") .style("font-size", "16") .text("Power"); var gridlinesV = d3.axisTop() .tickFormat("") .tickSize(-(height-95)) .scale(x); svg.append("g").attr("transform", "translate(0," + (50) + ")") .attr("class", "gridV") .call(gridlinesV) var gridlinesH = d3.axisRight() .tickFormat("") .tickSize((width)) .scale(y); svg.append("g").attr("transform", "translate(50,0)") .attr("class", "gridH") .call(gridlinesH); //svg.select("g.gridV").selectAll("g.tick").select("line").style("stroke", "white") //svg.selectAll("line").style("stroke", "white") const node = svg.append("g") .style("stroke", "#fff") .style("stroke-width", 1) .selectAll("circle") .data(points) .enter().append("circle") .attr("class","degree") .attr("r", d => 5) .attr("cx", d => x(d[1])) .attr("cy", d => y(d[0])) .style("fill", function(d,i) { return "black" }) yield svg.node(); }33:Tb38,greyplot = { const height = 350 const width = 800 const svg = d3.select(DOM.svg(width, height)); const points = []; data.nodes.forEach(function(d,i) { d.points.forEach(function(e,j) { points.push(e); }) }) const x = d3.scaleLinear().rangeRound([50, width-50]).domain(d3.extent(points,function(d) { return d[1]})); const y = d3.scaleLinear().rangeRound([height-50, 50]).domain(d3.extent(points,function(d) { return d[0]})); //const scale = d3.scaleOrdinal(d3.schemeCategory10); const color = d3.scaleLinear().range([0,1]).domain([0,89]); const palette = d3.interpolateGreys; svg.append("rect") .attr("x",0) .attr("y",0) .attr("width",width) .attr("height",height) .style("fill", "lightgrey") svg.append("g").attr("transform", "translate(0," + (height-50) + ")").call(d3.axisBottom(x)) .append("text") .attr("transform", "translate(" + (width/2) + " ," + (40) + ")") .style("text-anchor", "middle") .style("fill", "#000") .style("font-size", "16") .text("Effect Size"); svg.append("g").attr("transform", "translate(50,0)").call(d3.axisLeft(y)) .append("text") .attr("transform", "rotate(-90)") .attr("y", -50) .attr("x",0 - (height / 2)) .attr("dy", "1.25em") .style("text-anchor", "middle") .style("fill", "#000") .style("font-size", "16") .text("Power"); var gridlinesV = d3.axisTop() .tickFormat("") .tickSize(-(height-95)) .scale(x); svg.append("g").attr("transform", "translate(0," + (50) + ")") .attr("class", "gridV") .call(gridlinesV) var gridlinesH = d3.axisRight() .tickFormat("") .tickSize((width)) .scale(y); svg.append("g").attr("transform", "translate(50,0)") .attr("class", "gridH") .call(gridlinesH); //svg.select("g.gridV").selectAll("g.tick").select("line").style("stroke", "white") //svg.selectAll("line").style("stroke", "white") const node = svg.selectAll("g.node").data(data.nodes).enter().append("g") .attr("class","node") .style("stroke-width", 1.5) .selectAll("circle").data(function(d) { console.log(d.points); return d.points}) .enter().append("circle") .attr("class","degree") .attr("r", d => 5) .attr("cx", d => x(d[1])) .style("stroke", function(d,i) { return palette(color(i)) }) .attr("cy", d => y(d[0])) .style("fill", function(d,i) { return palette(color(i)) }) svg.append("circle") .attr("r", d => 5) .attr("cx", d => 200) .attr("cy", d => 300) .style("stroke", d => palette(.5)) .style("fill", d => palette(.5)) svg.append("circle") .attr("r", d => 5) .attr("cx", d => 200) .attr("cy", d => 55) .style("stroke", d => palette(.5)) .style("fill", d => palette(.5)) yield svg.node(); }34:Td2d,blueplot = { const height = 350 const width = 800 const svg = d3.select(DOM.svg(width, height)); const points = []; data.nodes.forEach(function(d,i) { d.points.forEach(function(e,j) { points.push(e); }) }) const x = d3.scaleLinear().rangeRound([50, width-50]).domain(d3.extent(points,function(d) { return d[1]})); const y = d3.scaleLinear().rangeRound([height-50, 50]).domain(d3.extent(points,function(d) { return d[0]})); //const scale = d3.scaleOrdinal(d3.schemeCategory10); const color = d3.scaleLinear().range([0,1]).domain([0,89]); const palette = d3.interpolateBlues; svg.append("rect") .attr("x",0) .attr("y",0) .attr("width",width) .attr("height",height) .style("fill", "lightgrey") svg.append("g").attr("transform", "translate(0," + (height-50) + ")").call(d3.axisBottom(x)) .append("text") .attr("transform", "translate(" + (width/2) + " ," + (40) + ")") .style("text-anchor", "middle") .style("fill", "#000") .style("font-size", "16") .text("Effect Size"); svg.append("g").attr("transform", "translate(50,0)").call(d3.axisLeft(y)) .append("text") .attr("transform", "rotate(-90)") .attr("y", -50) .attr("x",0 - (height / 2)) .attr("dy", "1.25em") .style("text-anchor", "middle") .style("fill", "#000") .style("font-size", "16") .text("Power"); var gridlinesV = d3.axisTop() .tickFormat("") .tickSize(-(height-95)) .scale(x); svg.append("g").attr("transform", "translate(0," + (50) + ")") .attr("class", "gridV") .call(gridlinesV) var gridlinesH = d3.axisRight() .tickFormat("") .tickSize((width)) .scale(y); svg.append("g").attr("transform", "translate(50,0)") .attr("class", "gridH") .call(gridlinesH); //svg.select("g.gridV").selectAll("g.tick").select("line").style("stroke", "white") //svg.selectAll("line").style("stroke", "white") const node = svg.selectAll("g.node").data(data.nodes).enter().append("g") .attr("class","node") .style("stroke-width", 1.5) .selectAll("circle").data(function(d) { console.log(d.points); return d.points}) .enter().append("circle") .attr("class","degree") .attr("r", d => 5) .attr("cx", d => x(d[1])) .style("stroke", function(d,i) { return palette(color(i)) }) .attr("cy", d => y(d[0])) .style("fill", function(d,i) { return palette(color(i)) }) const addone = svg.selectAll("g.addone").data([data.nodes[20]]).enter().append("g") .attr("class","addone") .style("stroke-width", 1.5) .selectAll("circle").data(function(d) { console.log(d.points); return d.points}) .enter().append("circle") .attr("class","degree") .attr("r", d => 5) .attr("cx", d => x(d[1])) .style("stroke", d => palette(.5)) .style("fill", d => palette(.5)) //.style("stroke", d => "black") //.style("fill", d => "black") .attr("cy", d => y(d[0])) var counter = 0; while(true){ addone .transition("1") .duration(2000) .delay(function(d,i) { return i * 25; }) .attr("cy", function(d,i) { return (counter) ? y(0.1) : y(d[0]); }) counter = (counter) ? 0 : 1; yield Promises.tick(5000, svg.node()); } yield svg.node(); }35:Taa8,multiplot = { const height = 350 const width = 800 const svg = d3.select(DOM.svg(width, height)); const points = []; data.nodes.forEach(function(d,i) { d.points.forEach(function(e,j) { points.push(e); }) }) const x = d3.scaleLinear().rangeRound([50, width-50]).domain(d3.extent(points,function(d) { return d[1]})); const y = d3.scaleLinear().rangeRound([height-50, 50]).domain(d3.extent(points,function(d) { return d[0]})); //const scale = d3.scaleOrdinal(d3.schemeCategory10); const color = d3.scaleLinear().range([0,1]).domain([0,89]); const palette = d3.interpolateBlues; const scale = d3.scaleOrdinal(d3.schemeCategory10); svg.append("rect") .attr("x",0) .attr("y",0) .attr("width",width) .attr("height",height) .style("fill", "lightgrey") svg.append("g").attr("transform", "translate(0," + (height-50) + ")").call(d3.axisBottom(x)) .append("text") .attr("transform", "translate(" + (width/2) + " ," + (40) + ")") .style("text-anchor", "middle") .style("fill", "#000") .style("font-size", "16") .text("Effect Size"); svg.append("g").attr("transform", "translate(50,0)").call(d3.axisLeft(y)) .append("text") .attr("transform", "rotate(-90)") .attr("y", -50) .attr("x",0 - (height / 2)) .attr("dy", "1.25em") .style("text-anchor", "middle") .style("fill", "#000") .style("font-size", "16") .text("Power"); var gridlinesV = d3.axisTop() .tickFormat("") .tickSize(-(height-95)) .scale(x); svg.append("g").attr("transform", "translate(0," + (50) + ")") .attr("class", "gridV") .call(gridlinesV) var gridlinesH = d3.axisRight() .tickFormat("") .tickSize((width)) .scale(y); svg.append("g").attr("transform", "translate(50,0)") .attr("class", "gridH") .call(gridlinesH); //svg.select("g.gridV").selectAll("g.tick").select("line").style("stroke", "white") //svg.selectAll("line").style("stroke", "white") svg.selectAll("g.node").data(data.nodes.filter(function(d) { return (d.pval==.01)})).enter().append("g") //.attr("transform", function(d,i) { return "translate("+((i*20)-55)+",0)"}) .attr("class","node") .style("stroke", function(d,i) { return scale((Math.round(d.sample / 10)*10)) }) .style("stroke-width", 1.5) .selectAll("path.line").data(function(d,i) { return [d.points] }).enter().append("path") .attr("class", "line") .attr("d", function(d,i) { const line = d3.line() .x(function(e,j) { return x(e[1]) }) .y(function(e,j) { return y(e[0]); }) (d); return line; }) .style("opacity", "1") .style("fill", "none") yield svg.node(); }36:Ta88,dirtyplot = { const height = 350 const width = 800 const svg = d3.select(DOM.svg(width, height)); const points = []; data.nodes.forEach(function(d,i) { d.points.forEach(function(e,j) { points.push(e); }) }) const x = d3.scaleLinear().rangeRound([50, width-50]).domain(d3.extent(points,function(d) { return d[1]})); const y = d3.scaleLinear().rangeRound([height-50, 50]).domain(d3.extent(points,function(d) { return d[0]})); //const scale = d3.scaleOrdinal(d3.schemeCategory10); const color = d3.scaleLinear().range([0,1]).domain([0,89]); const palette = d3.interpolateBlues; const scale = d3.scaleOrdinal(d3.schemeCategory10); svg.append("rect") .attr("x",0) .attr("y",0) .attr("width",width) .attr("height",height) .style("fill", "lightgrey") svg.append("g").attr("transform", "translate(0," + (height-50) + ")").call(d3.axisBottom(x)) .append("text") .attr("transform", "translate(" + (width/2) + " ," + (40) + ")") .style("text-anchor", "middle") .style("fill", "#000") .style("font-size", "16") .text("Effect Size"); svg.append("g").attr("transform", "translate(50,0)").call(d3.axisLeft(y)) .append("text") .attr("transform", "rotate(-90)") .attr("y", -50) .attr("x",0 - (height / 2)) .attr("dy", "1.25em") .style("text-anchor", "middle") .style("fill", "#000") .style("font-size", "16") .text("Power"); var gridlinesV = d3.axisTop() .tickFormat("") .tickSize(-(height-95)) .scale(x); svg.append("g").attr("transform", "translate(0," + (50) + ")") .attr("class", "gridV") .call(gridlinesV) var gridlinesH = d3.axisRight() .tickFormat("") .tickSize((width)) .scale(y); svg.append("g").attr("transform", "translate(50,0)") .attr("class", "gridH") .call(gridlinesH); //svg.select("g.gridV").selectAll("g.tick").select("line").style("stroke", "white") //svg.selectAll("line").style("stroke", "white") svg.selectAll("g.node").data(data.nodes.filter(function(d) { return (d.pval==.01)})).enter().append("g") //.attr("transform", function(d,i) { return "translate("+((i*20)-55)+",0)"}) .attr("class","node") .style("stroke", function(d,i) { return "black" }) .style("stroke-width", 1) .selectAll("path.line").data(function(d,i) { return [d.points] }).enter().append("path") .attr("class", "line") .attr("d", function(d,i) { const line = d3.line() .x(function(e,j) { return x(e[1]) }) .y(function(e,j) { return y(e[0]); }) (d); return line; }) .style("opacity", "1") .style("fill", "none") yield svg.node(); }37:T7cc,clearplot = { const height = 350 const width = 800 const svg = d3.select(DOM.svg(width, height)); const points = []; data.nodes.forEach(function(d,i) { d.points.forEach(function(e,j) { points.push(e); }) }) const x = d3.scaleLinear().rangeRound([50, width-50]).domain(d3.extent(points,function(d) { return d[1]})); const y = d3.scaleLinear().rangeRound([height-50, 50]).domain(d3.extent(points,function(d) { return d[0]})); //const scale = d3.scaleOrdinal(d3.schemeCategory10); const color = d3.scaleLinear().range([0,1]).domain([0,89]); const palette = d3.interpolateBlues; const scale = d3.scaleOrdinal(d3.schemeCategory10); svg.append("g").attr("transform", "translate(0," + (height-50) + ")").call(d3.axisBottom(x)) .append("text") .attr("transform", "translate(" + (width/2) + " ," + (40) + ")") .style("text-anchor", "middle") .style("fill", "#000") .style("font-size", "16") .text("Effect Size"); svg.append("g").attr("transform", "translate(50,0)").call(d3.axisLeft(y)) .append("text") .attr("transform", "rotate(-90)") .attr("y", -50) .attr("x",0 - (height / 2)) .attr("dy", "1.25em") .style("text-anchor", "middle") .style("fill", "#000") .style("font-size", "16") .text("Power"); svg.selectAll("g.node").data(data.nodes.filter(function(d) { return (d.pval==.01)})).enter().append("g") //.attr("transform", function(d,i) { return "translate("+((i*20)-55)+",0)"}) .attr("class","node") .style("stroke", function(d,i) { return "black" }) .style("stroke-width", 1) .selectAll("path.line").data(function(d,i) { return [d.points] }).enter().append("path") .attr("class", "line") .attr("d", function(d,i) { const line = d3.line() .x(function(e,j) { return x(e[1]) }) .y(function(e,j) { return y(e[0]); }) (d); return line; }) .style("opacity", "1") .style("fill", "none") yield svg.node(); }38:Tdaa,sidebyside = { const height = 350 const width = 800 const svg = d3.select(DOM.svg(width, height)); const points = []; data.nodes.forEach(function(d,i) { d.points.forEach(function(e,j) { points.push(e); }) }) const x = d3.scaleLinear().rangeRound([50, (width/2)-50]).domain(d3.extent(points,function(d) { return d[1]})); const x2 = d3.scaleLinear().rangeRound([50, (width/2)-50]).domain(d3.extent(points,function(d) { return d[1]})); const y = d3.scaleLinear().rangeRound([height-50, 50]).domain(d3.extent(points,function(d) { return d[0]})); //const scale = d3.scaleOrdinal(d3.schemeCategory10); const color = d3.scaleLinear().range([0,1]).domain([0,89]); const palette = d3.interpolateBlues; const scale = d3.scaleOrdinal(d3.schemeCategory10); svg.append("g").attr("transform", "translate(0," + ((height)-50) + ")").call(d3.axisBottom(x)) .append("text") .attr("transform", "translate(" + ((width/2)/2) + " ," + (40) + ")") .style("text-anchor", "middle") .style("fill", "#000") .style("font-size", "16") svg.append("g").attr("transform", "translate("+(((width)/2)-90)+"," + ((height)-50) + ")").call(d3.axisBottom(x2)) .append("text") .attr("transform", "translate(" + ((40)) + " ," + (40) + ")") .style("text-anchor", "middle") .style("fill", "#000") .style("font-size", "16") .text("Effect Size"); svg.append("g").attr("transform", "translate(50,0)").call(d3.axisLeft(y)) .append("text") .attr("transform", "rotate(-90)") .attr("y", -50) .attr("x",0 - (height / 2)) .attr("dy", "1.25em") .style("text-anchor", "middle") .style("fill", "#000") .style("font-size", "16") .text("Power"); svg.append("g").attr("transform", "translate("+(((width/2))-40)+",0)").call(d3.axisRight(y)) .append("text") .attr("transform", "rotate(-90)") .attr("y", -50) .attr("x",0 - (height / 2)) .attr("dy", "6.25em") .style("text-anchor", "middle") .style("fill", "#000") .style("font-size", "16") .text("Power"); const firstplot = data.nodes.filter(function(d,i) { return ((d.pval == .01)&&(d.sample == 10)) }) const secondplot = data.nodes.filter(function(d,i) { return ((d.pval == .05)&&(d.sample == 30)) }) const addone = svg.selectAll("g.node").data(firstplot).enter().append("g") .attr("class","addone") .style("stroke-width", 1.5) .selectAll("circle").data(function(d) { console.log(d.points); return d.points}) .enter().append("circle") .attr("class","degree") .attr("r", d => (1-d[0])*10) .attr("cx", d => x(d[1])) .style("stroke", d => "black") .style("fill", d => "black") //.style("stroke", d => "black") //.style("fill", d => "black") .attr("cy", d => y(d[0])) const addtwo = svg.selectAll("g.node").data(secondplot).enter().append("g") .attr("transform", "translate("+(((width/2))-90)+",0)") .attr("class","addtwo") .style("stroke-width", 1.5) .selectAll("circle").data(function(d) { console.log(d.points); return d.points}) .enter().append("circle") .attr("class","degree") .attr("r", d => (1-d[0])*10) .attr("cx", d => x(d[1])) .style("stroke", d => "black") .style("fill", d => "black") //.style("stroke", d => "black") //.style("fill", d => "black") .attr("cy", d => y(d[0])) yield svg.node(); }39:Tcb1,twoplot = { const height = 350 const width = 800 const svg = d3.select(DOM.svg(width, height)); const points = []; data.nodes.forEach(function(d,i) { d.points.forEach(function(e,j) { points.push(e); }) }) const x = d3.scaleLinear().rangeRound([50, width-50]).domain(d3.extent(points,function(d) { return d[1]})); const y = d3.scaleLinear().rangeRound([height-50, 50]).domain(d3.extent(points,function(d) { return d[0]})); //const scale = d3.scaleOrdinal(d3.schemeCategory10); const color = d3.scaleLinear().range([0,1]).domain([0,89]); const palette = d3.interpolateBlues; const scale = d3.scaleOrdinal(d3.schemeCategory10); svg.append("g").attr("transform", "translate(0," + (height-50) + ")").call(d3.axisBottom(x)) .append("text") .attr("transform", "translate(" + (width/2) + " ," + (40) + ")") .style("text-anchor", "middle") .style("fill", "#000") .style("font-size", "16") .text("Effect Size"); svg.append("g").attr("transform", "translate(50,0)").call(d3.axisLeft(y)) .append("text") .attr("transform", "rotate(-90)") .attr("y", -50) .attr("x",0 - (height / 2)) .attr("dy", "1.25em") .style("text-anchor", "middle") .style("fill", "#000") .style("font-size", "16") .text("Power"); const firstplot = data.nodes.filter(function(d,i) { return ((d.pval == .01)&&(d.sample == 10)) }) const secondplot = data.nodes.filter(function(d,i) { return ((d.pval == .05)&&(d.sample == 30)) }) const addone = svg.selectAll("g.node").data(firstplot).enter().append("g") //.attr("transform", function(d,i) { return "translate("+((i*20)-55)+",0)"}) .attr("class","node") .style("stroke", function(d,i) { return "black" }) .style("stroke-width", 1) .selectAll("cirle.line").data(function(d,i) { return [d.points] }).enter().append("path") .attr("class", "line") .attr("d", function(d,i) { const line = d3.line() .x(function(e,j) { return x(e[1]) }) .y(function(e,j) { return y(e[0]); }) (d); return line; }) .style("opacity", "1") .style("fill", "none") var counter = 0; while(true){ svg.selectAll("g.node").remove(); if (counter == 0) var dataset=firstplot; if (counter == 1) var dataset=secondplot; if (counter == 2) var dataset = []; //var dataset = (counter) ? firstplot : secondplot; svg.selectAll("g.node").data(dataset).enter().append("g") .attr("class","node") .style("stroke", function(d,i) { return "black" }) .style("stroke-width", 1) .selectAll("path.line").data(function(d,i) { return [d.points] }).enter().append("path") .attr("d", function(d,i) { const line = d3.line() .x(function(e,j) { return x(e[1]) }) .y(function(e,j) { return y(e[0]); }) (d); return line; }) .style("opacity", "1") .style("fill", "none") console.log(counter); if (counter == 0) counter++; else if (counter == 1) counter++; else if (counter == 2) counter=0; // counter = (counter) ? 0 : 1; yield Promises.tick(1000, svg.node()); } yield svg.node(); }3a:T9af,animation = { const height = 350 const width = 800 const svg = d3.select(DOM.svg(width, height)); const points = []; data.nodes.forEach(function(d,i) { d.points.forEach(function(e,j) { points.push(e); }) }) const x = d3.scaleLinear().rangeRound([50, width-50]).domain(d3.extent(points,function(d) { return d[1]})); const y = d3.scaleLinear().rangeRound([height-50, 50]).domain(d3.extent(points,function(d) { return d[0]})); //const scale = d3.scaleOrdinal(d3.schemeCategory10); const color = d3.scaleLinear().range([0,1]).domain([0,89]); const palette = d3.interpolateBlues; const scale = d3.scaleOrdinal(d3.schemeCategory10); svg.append("g").attr("transform", "translate(0," + (height-50) + ")").call(d3.axisBottom(x)) .append("text") .attr("transform", "translate(" + (width/2) + " ," + (40) + ")") .style("text-anchor", "middle") .style("fill", "#000") .style("font-size", "16") .text("Effect Size"); svg.append("g").attr("transform", "translate(50,0)").call(d3.axisLeft(y)) .append("text") .attr("transform", "rotate(-90)") .attr("y", -50) .attr("x",0 - (height / 2)) .attr("dy", "1.25em") .style("text-anchor", "middle") .style("fill", "#000") .style("font-size", "16") .text("Power"); const firstplot = data.nodes.filter(function(d,i) { return ((d.pval == .01)&&(d.sample == 10)) }) const secondplot = data.nodes.filter(function(d,i) { return ((d.pval == .05)&&(d.sample == 30)) }) const node = svg.selectAll("g.node").data(firstplot).enter().append("g") .attr("class","node") .style("stroke-width", 1.5) .selectAll("circle").data(function(d) { return d.points}) .enter().append("circle") .attr("class","degree") .attr("r", d => 5) .attr("cx", d => x(d[1])) .attr("cy", d => y(d[0])) .style("stroke", function(d,i) { return "black" }) .style("fill", function(d,i) { return "black" }) var counter = 1; while(true){ var dataset = (counter) ? firstplot : secondplot; svg.selectAll("g.node").data(dataset).selectAll("circle").data(function(d) { return d.points}) .transition() .duration(2000) //.delay(function(d,i) { return i * 25; }) .attr("cx", d => x(d[1])) .attr("cy", d => y(d[0])) counter = (counter) ? 0 : 1; yield Promises.tick(6000, svg.node()); } yield svg.node(); } 3b:T9ae,animation2 = { const height = 350 const width = 800 const svg = d3.select(DOM.svg(width, height)); const points = []; data.nodes.forEach(function(d,i) { d.points.forEach(function(e,j) { points.push(e); }) }) const x = d3.scaleLinear().rangeRound([50, width-50]).domain(d3.extent(points,function(d) { return d[1]})); const y = d3.scaleLinear().rangeRound([height-50, 50]).domain(d3.extent(points,function(d) { return d[0]})); //const scale = d3.scaleOrdinal(d3.schemeCategory10); const color = d3.scaleLinear().range([0,1]).domain([0,89]); const palette = d3.interpolateBlues; const scale = d3.scaleOrdinal(d3.schemeCategory10); svg.append("g").attr("transform", "translate(0," + (height-50) + ")").call(d3.axisBottom(x)) .append("text") .attr("transform", "translate(" + (width/2) + " ," + (40) + ")") .style("text-anchor", "middle") .style("fill", "#000") .style("font-size", "16") .text("Effect Size"); svg.append("g").attr("transform", "translate(50,0)").call(d3.axisLeft(y)) .append("text") .attr("transform", "rotate(-90)") .attr("y", -50) .attr("x",0 - (height / 2)) .attr("dy", "1.25em") .style("text-anchor", "middle") .style("fill", "#000") .style("font-size", "16") .text("Power"); const firstplot = data.nodes.filter(function(d,i) { return ((d.pval == .01)&&(d.sample == 10)) }) const secondplot = data.nodes.filter(function(d,i) { return ((d.pval == .05)&&(d.sample == 30)) }) const node = svg.selectAll("g.node").data(firstplot).enter().append("g") .attr("class","node") .style("stroke-width", 1.5) .selectAll("circle").data(function(d) { return d.points}) .enter().append("circle") .attr("class","degree") .attr("r", d => 5) .attr("cx", d => x(d[1])) .attr("cy", d => y(d[0])) .style("stroke", function(d,i) { return "black" }) .style("fill", function(d,i) { return "black" }) var counter = 1; while(true){ var dataset = (counter) ? firstplot : secondplot; svg.selectAll("g.node").data(dataset).selectAll("circle").data(function(d) { return d.points}) .transition() .duration(2000) .delay(function(d,i) { return i * 25; }) .attr("cx", d => x(d[1])) .attr("cy", d => y(d[0])) counter = (counter) ? 0 : 1; yield Promises.tick(6000, svg.node()); } yield svg.node(); } 3c:Td73,animation3 = { const height = 350 const width = 800 const svg = d3.select(DOM.svg(width, height)); const points = []; data.nodes.forEach(function(d,i) { d.points.forEach(function(e,j) { points.push(e); }) }) const x = d3.scaleLinear().rangeRound([50, width-50]).domain(d3.extent(points,function(d) { return d[1]})); const y = d3.scaleLinear().rangeRound([height-50, 50]).domain(d3.extent(points,function(d) { return d[0]})); //const scale = d3.scaleOrdinal(d3.schemeCategory10); const color = d3.scaleLinear().range([0,1]).domain([0,89]); const palette = d3.interpolateBlues; const scale = d3.scaleOrdinal(d3.schemeCategory10); svg.append("g").attr("transform", "translate(0," + (height-50) + ")").call(d3.axisBottom(x)) .append("text") .attr("transform", "translate(" + (width/2) + " ," + (40) + ")") .style("text-anchor", "middle") .style("fill", "#000") .style("font-size", "16") .text("Effect Size"); svg.append("g").attr("transform", "translate(50,0)").call(d3.axisLeft(y)) .append("text") .attr("transform", "rotate(-90)") .attr("y", -50) .attr("x",0 - (height / 2)) .attr("dy", "1.25em") .style("text-anchor", "middle") .style("fill", "#000") .style("font-size", "16") .text("Power"); const firstplot = data.nodes.filter(function(d,i) { return ((d.pval == .01)&&(d.sample == 10)) }) const secondplot = data.nodes.filter(function(d,i) { return ((d.pval == .05)&&(d.sample == 30)) }) const node = svg.selectAll("g.node").data(firstplot).enter().append("g") .attr("class","node") .style("stroke-width", 1.5) .selectAll("circle").data(function(d) { return d.points}) .enter().append("circle") .attr("class","degree") .attr("r", d => 5) .attr("cx", d => x(d[1])) .attr("cy", d => y(d[0])) .style("stroke", function(d,i) { return "black" }) .style("fill", function(d,i) { return "black" }) svg.selectAll("g.links").data(firstplot).enter().append("g") .attr("class","links") .selectAll("line.area").data(function(d) { return d.points}).enter().append("line") .attr("class", "area") .attr("x1", function(d,i) { return x(d[1]); }) .attr("y1", function(d,i) { return y(d[0]); }) .attr("x2", function(d,i) { return x(d[1]); }) .attr("y2", function(d,i) { return y(d[0]); }) .style("stroke", "steelblue") .style("stroke-width", "1px") var counter = 1; while(true){ var dataset = (counter) ? firstplot : secondplot; svg.selectAll("g.node").data(dataset).selectAll("circle").data(function(d) { return d.points}) .transition("2") .duration(1000) .delay(function(d,i) { return i * 25; }) .attr("cx", d => x(d[1])) .attr("cy", d => y(d[0])) svg.selectAll("g.links").data(dataset) .selectAll("line.area").data(function(d) { return d.points }) .transition("area").duration(1000) .delay(function(d,i) { return i * 25; }) .attr("x1", function(d,i) { return d3.select(this).attr("x1"); }) .attr("y1", function(d,i) { return d3.select(this).attr("y1"); }) .attr("x2", function(d,i) { return x(d[1]); }) .attr("y2", function(d,i) { return y(d[0]); }) counter = (counter) ? 0 : 1; yield Promises.tick(6000, svg.node()); } yield svg.node(); } 3d:[] 30:{"title":"Graph of Power and Effect Size (h) for Sample Size (n)","cells":[{"id":0,"value":"md`# Graph of Power and Effect Size (h) for Sample Size (n)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":418,"value":"md`Idea for this project is credited to Dr. Vivek Kapur & Bipin Rimal`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"data = {\nconst input = await (await fetch(\"https://gist.githubusercontent.com/dudaspm/12bc2de84e6d70084ee786b56ba84743/raw/7fb71cb6787c05061b3f4539898f0946f8f3baae/pwr.json\")).json()\n console.log(); \n const data = {}\n data.nodes = input.nodes.map(function(d) { return {\"sample\":+d.sample,pval:+d.pval,points:d.points}})\n return data\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"html`\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Sample Size	p-val	points
${data.nodes[0].sample}	${data.nodes[0].pval}	${data.nodes[0].points[0][0]}, ${data.nodes[0].points[0][1]} ... ${data.nodes[0].points[89][0]}, ${data.nodes[0].points[89][1]}
${data.nodes[1].sample}	${data.nodes[1].pval}	${data.nodes[1].points[0][0]}, ${data.nodes[1].points[0][1]} ... ${data.nodes[1].points[89][0]}, ${data.nodes[1].points[89][1]}
${data.nodes[2].sample}	${data.nodes[2].pval}	${data.nodes[2].points[0][0]}, ${data.nodes[2].points[0][1]} ... ${data.nodes[2].points[89][0]}, ${data.nodes[2].points[89][1]}
${data.nodes[3].sample}	${data.nodes[3].pval}	${data.nodes[3].points[0][0]}, ${data.nodes[3].points[0][1]} ... ${data.nodes[3].points[89][0]}, ${data.nodes[3].points[89][1]}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"md`Greyscale`","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":274,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"md`Change Blindness`","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"md`Selective Attention`","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":380,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require('d3', 'd3-scale-chromatic')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3d","stdlib":"1","titling":"auto"}