31:Td5f,drawRadialPlot = function(myOutput) { // default parameters ------------------------------------------------------ const height = width; const dc = DOM.context2d(width, height); const canvas = dc.canvas dc.clearRect(0,0,width,height); let mousedown = false; // The main circle parameter ------------------------------------------------------ var lg_rad = (width/2) * 0.85; var lg_circ = 2*Math.PI*lg_rad; var cx = width/2; var cy = height/2; // Orbiting circle parameter ------------------------------------------------------ let nbr_circles = myOutput.MLE.content['0'].length; var sm_rad = (lg_circ / nbr_circles) / 2; // Filling in default circle (background) ------------------------------------------------------ dc.beginPath(); dc.arc(cx, cy, lg_rad, -Math.PI/2, 3*Math.PI/2, false); dc.fillStyle = backgroundColor; dc.fill(); // Stroking main circles ------------------------------------------------------ var circleSizeIncrement = poi.map(d=>fixedCircleOrder.indexOf(d)*0.10); circleSizeIncrement.forEach( increment => { dc.beginPath(); dc.arc(cx, cy, lg_rad*(1-increment), -Math.PI/2, 3*Math.PI/2, false); dc.strokeStyle = defaultColor; dc.stroke(); }) // Angle-sensitive for (let i = 0; i < nbr_circles; ++i) { var angle = i*(2*Math.PI)/nbr_circles - Math.PI/2; var x = cx + Math.cos(angle) * lg_rad; var y = cy + Math.sin(angle) * lg_rad; /// Helper line every 10 codons ------------------------------------------------------ if (i%10==0) { //// Inner tickmark dc.beginPath(); dc.strokeStyle = helperColor; dc.moveTo(width/2, height/2); dc.lineTo(x, y); dc.stroke(); //// Outer Circular Text; help parameter index get +1 because it is displayed on the plot in 1-index. Internally, everything else should be 0-indexed in this function. var xh = cx + Math.cos(angle) * (lg_rad*1.05); var yh = cy + Math.sin(angle) * (lg_rad*1.05); dc.beginPath(); dc.font = '${Math.floor(width/60)}px sans-serif'; dc.fillStyle = defaultColor; dc.textAlign = 'center'; dc.fillText(`${i+1}`, xh, yh); // var xh2 = cx + Math.cos(angle) * (lg_rad*1.10); var yh2 = cy + Math.sin(angle) * (lg_rad*1.10); dc.beginPath(); dc.font = '${Math.floor(width/60)}px sans-serif'; dc.fillStyle = defaultColor; dc.textAlign = 'center'; dc.fillText(`${(i+1)*3-2}`, xh2, yh2); // } /// PRIME-significant Helper line var curColors = checkBoxPInd.map( pInd => summaryColors[pInd][i]); if (curColors.filter(c => c!=defaultColor).length>0) { dc.beginPath(); dc.strokeStyle = atLeastOneSigColor; dc.moveTo(width/2, height/2); dc.lineTo(x, y); dc.stroke(); } /// Draw PRIME-significant orbiting circles ------------------------------------------------------ for (let cbInd=0; cbInd htl.html`

${x.toLocaleString(\"en\")}`,\n genomic: pvalHighlightFormat(),\n pvalue: pvalHighlightFormat(sigColor), \n p1: pvalHighlightFormat(sigColor),\n p2: pvalHighlightFormat(sigColor),\n p3: pvalHighlightFormat(sigColor),\n p4: pvalHighlightFormat(sigColor),\n p5: pvalHighlightFormat(sigColor)\n }});","pinned":false,"hidden":false,"mode":"ojs"},{"id":1368,"value":"md`There are a total of **${filteredTable.length}** unique significant sites by the p-value cutoff of **${cutoff}** using **${poi.length}** selected properties.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1606,"value":"drawRadialPlot(primeOutput)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1584,"value":"md`---\n## Implementation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1514,"value":"width = 1000","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"primeOutput = fetch(\"https://raw.githubusercontent.com/hannahkimincompbio/PRIME_reboot_git/main/adh.nex_Atchley.PRIME.json\")\n .then(function(response){\n return response.json();\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1231,"value":"forTable = primeOutput.MLE.content[\"0\"]\n.map( \n ([alpha, beta, FELalpha, FELbeta, totalBL, numSub, numUniqAA, PRIMELogL, FELLogL, pvalue, lambda1, p1, logL1, lambda2, p2, logL2, lambda3, p3, logL3, lambda4, p4, logL4, lambda5, p5, logL5], codon) => \n ({codon, alpha, beta, FELalpha, FELbeta, totalBL, numSub, numUniqAA, PRIMELogL, FELLogL, pvalue, lambda1, p1, logL1, lambda2, p2, logL2, lambda3, p3, logL3, lambda4, p4, logL4, lambda5, p5, logL5}))\n.map( d => {return {...d, codon: d.codon+1, genomic: (d.codon+1)*3-2}} );","pinned":false,"hidden":false,"mode":"ojs"},{"id":695,"value":"pIndex = function() {\n var pIndex = {};\n for (let i=0; ipIndex[d]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1044,"value":"summary = {\n var summary = {};\n // for each checkbox input\n for (let ind=0; ind {return { 'coor':i+1, 'value':d[pInd], 'lambda':NaN, 'logL':NaN, 'index':i }} );\n } else {\n summary[pInd] = primeOutput.MLE.content['0'].map( (d,i)=> {return { 'coor':i+1, 'value':d[pInd], 'lambda':d[pInd-1], 'logL':d[pInd+1], 'index':i }} );\n }\n }\n return summary\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":320,"value":"cutoff = 0.05;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1056,"value":"summaryColors = {\n var summaryColors = {};\n // for each checkbox input\n for (let ind=0; ind d.value<=cutoff ? sigColor:defaultColor );\n } else {\n let prop = summary[pInd];\n let propSig = Array(prop.length).fill(defaultColor);\n for (let i=0; i 0){\n propSig[i] = conservedSigColor; // conserved\n } // else neutral\n }\n }\n summaryColors[pInd] = propSig;\n }\n }\n return summaryColors\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1718,"value":"backgroundColor = 'gainsboro';","pinned":false,"hidden":false,"mode":"ojs"},{"id":1721,"value":"helperColor = \"white\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":509,"value":"defaultColor = \"grey\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":1121,"value":"sigColor = \"firebrick\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1125,"value":"changeSigColor = \"magenta\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1127,"value":"conservedSigColor = \"cyan\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1272,"value":"atLeastOneSigColor = \"lightslategrey\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1316,"value":"filteredTable = {\n let chosen = [];\n for (let i=0; i {\n if (primeOutput.MLE.content[\"0\"][i][pInd] {\n filteredTable.push(forTable[pInd]);\n }\n )\n if (filteredTable.length==0) {\n return forTable\n }\n return filteredTable\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1617,"value":"pvalHighlightFormat = function(curSigColor) {\n return x => htl.html`

${x.toLocaleString(\"en\")}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":658,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"md`---\n## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":561,"value":"_ = require(\"underscore\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":1591,"value":"md`\n---\n## References\n- https://observablehq.com/@jbum/circles-spirals-and-sunflowers\n- https://codepen.io/tbleckert/pen/neEdQR\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1762,"value":"md`---\n## Developer Comments\n- **PRIME VIZ 1.0**: The visualization was developed specifically for >=HYPHY v2.5.40, >=PRIME v0.1.0 outputs. The orbiting viz is **a circular stacked 1-D plot** in nature.`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}