2b:Tb43,pvalue1 = { 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(d3.extent(data.nodes,function(d) { return d.sample})); const palette = d3.interpolateMagma; const scale = d3.scaleOrdinal(d3.schemeCategory10); svg.append("rect") .attr("x",0) .attr("y",0) .attr("width",width) .attr("height",height) .style("fill", "white") 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("rect.legend").data(data.nodes.filter(function(d) { return (d.pval==.01)})).enter().append("rect") .style("fill", function(d,i) { return palette(color(d.sample)) }) .attr("class","legend") .attr("x",(d,i)=> (width - 300)+(d.sample*2)) .attr("y", height - 100) .attr("width", 2) .attr("height", 20) svg.append("text") .attr("x",width - 235) .attr("y", height - 60) .text("# of Samples") 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 palette(color(d.sample)) }) .style("stroke-width", 3) .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().curve(d3.curveMonotoneX) .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") .on("mouseover", function() { d3.select(this).style("stroke-width",5) }) .on("mouseout", function() { d3.select(this).style("stroke-width",3) }) svg.selectAll("g.node") .append("title") .text(d=>"Number of samples: "+d.sample) yield svg.node(); }2c:Tb6b,pvalue5 = { 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(d3.extent(data.nodes,function(d) { return d.sample})); const palette = d3.interpolateMagma; const scale = d3.scaleOrdinal(d3.schemeCategory10); svg.append("rect") .attr("x",0) .attr("y",0) .attr("width",width) .attr("height",height) .style("fill", "white") 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("rect.legend").data(data.nodes.filter(function(d) { return (d.pval==.01)})).enter().append("rect") .style("fill", function(d,i) { return palette(color(d.sample)) }) .attr("class","legend") .attr("x",(d,i)=> (width - 300)+(d.sample*2)) .attr("y", height - 100) .attr("width", 2) .attr("height", 20) svg.append("text") .attr("x",width - 235) .attr("y", height - 60) .text("# of Samples") svg.selectAll("g.node").data(data.nodes.filter(function(d) { return (d.pval==.05)})).enter().append("g") //.attr("transform", function(d,i) { return "translate("+((i*20)-55)+",0)"}) .attr("class","node") .style("stroke", function(d,i) { return palette(color(d.sample)) }) .style("stroke-width", 3) .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().curve(d3.curveMonotoneX) .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") .on("mouseover", function() { d3.select(this).style("stroke-width",5) }) .on("mouseout", function() { d3.select(this).style("stroke-width",3) }) svg.selectAll("g.node") .append("title") .text(d=>"Number of samples: "+d.sample) yield svg.node(); }2d:Td71,sample10 = { 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 == 10)) }) 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(); } 2e:Td74,sample100 = { 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 == 100)) }) const secondplot = data.nodes.filter(function(d,i) { return ((d.pval == .05)&&(d.sample == 100)) }) 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(); } 2f:[] 2a:{"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":44,"value":"md`Idea for this project is credited to Dr. Vivek Kapur & Bipin Rimal`","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"html`\n\nTo generate these plots, you will need to install \nR-pwr`","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"md`\nReference: \n\nCohen, J. (1988). *Statistical power analysis for the behavioral sciences* (2nd ed.). Hillsdale, NJ: Lawrence Erlbaum.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"html`\nR-Code\n\nlibrary(pwr)\nno.of.samples=seq(10,100,1)\npvals = c(.01,.05)\neffect_size_2_temp = {}\neffect_size_2 = {}\npvalues = c()\nsamples = c()\nfunctions = c()\npower = c()\npowerExp = seq(from=0.1, to = .99, by = 0.01)\nfor (pv in pvals) {\n for (x in no.of.samples){\n\n for (pe in powerExp) {\n effect_size_2_temp = (pwr.2p.test(n=x, sig.level = pv, power = pe))$h\n functions = c(functions,effect_size_2_temp)\n pvalues = c(pvalues,pv)\n samples = c(samples,x)\n power = c(power,pe)\n }\n\n }\n}\npowerData <- data.frame(samples,functions,pvalues,power)\nwrite.table(powerData, file = \"table.tsv\", sep = \"\\\\t\",row.names=FALSE)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"md`When comparing two proportions use\n\npwr.2p.test(h = , n = , sig.level =, power = )\n\nwhere h is the effect size and n is the common sample size in each group.\n\nCohen suggests that h values of 0.2, 0.5, and 0.8 represent small, medium, and large effect sizes respectively.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"tex`h=2 \\arcsin(\\sqrt{p_1})-2\\arcsin(\\sqrt{p_2})`","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"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":59,"value":"md`Here is a sample dataset:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"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":64,"value":"md`For p-value = .01`","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"md`For p-value = .05`","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"md`Switching between p-value = 01 and .05 for sample 10`","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"md`Switching between p-value = 01 and .05 for sample 100`","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"d3 = require('d3', 'd3-scale-chromatic')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W2f","stdlib":"1","titling":"auto"}