31:T11fb,myChart = { const svg = d3.select(DOM.svg(width, height+(margin*2))); const containerWidth = width-(margin*2); const containerHeight = height-(margin*2); const container = svg.append('g') .attr("width", containerWidth) .attr("height", containerHeight) .attr('transform', `translate(${(width/2)+margin}, ${(height/2)+margin})`); var axisGrid = container.append("g") .attr("class", "axisWrapper"); axisGrid.selectAll(".levels") .data(d3.range(1,(axisCircles+1)).reverse()) .enter() .append("circle") .attr("class", "gridCircle") .attr("r", (d, i) => radius/axisCircles*d) .style("fill", "#CDCDCD") .style("stroke", "#CDCDCD") .style("fill-opacity", 0.1); const axis = axisGrid.selectAll(".axis") .data(axesDomain) .enter() .append("g") .attr("class", "axis"); axis.append("line") .attr("x1", 0) .attr("y1", 0) .attr("x2", (d, i) => rScale(maxValue*1.1) * Math.cos(angleSlice*i - Math.PI/2)) .attr("y2", (d, i) => rScale(maxValue*1.1) * Math.sin(angleSlice*i - Math.PI/2)) .attr("class", "line") .style("stroke", "white") .style("stroke-width", "2px"); axis.append("text") .attr("class", "legend") .style("font-size", "12px") .attr("text-anchor", "middle") .attr("font-family", "monospace") .attr("dy", "0.35em") .attr("x", (d, i) => rScale(maxValue * axisLabelFactor) * Math.cos(angleSlice*i - Math.PI/2)) .attr("y", (d, i) => rScale(maxValue * axisLabelFactor) * Math.sin(angleSlice*i - Math.PI/2)) .text(d => d); for (let cInd=0;cInd rScale(maxValue * axisLabelFactor) * Math.cos(angleSlice*i - Math.PI/2)) .attr("y", (d, i) => rScale(maxValue * axisLabelFactor) * Math.sin(angleSlice*i - Math.PI/2)+20+15*(cInd)) .text((d, i) => `${singleSubClosestThree[cInd][i]}`); } // Top-left Text svg.append("text") .style("font-size", "18px") .attr("font-family", "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif") .attr("font-weight", "bold") .attr("fill", "#666") .text(`${primeOutput.analysis['0']} Min-Max Normalized Summary for: ${currentAA}`) .attr("x", 20) .attr("y", 30); svg.append("text") .style("font-size", "12px") .attr("font-family", "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif") .attr("fill", "#666") .text(`The bigger the normalized value, the more influenced by the property.`) .attr("x", 20) .attr("y", 50); svg.append("text") .style("font-size", "12px") .attr("font-family", "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif") .attr("fill", "#666") .text(`The top three most likely substituted amino acids based on`) .attr("x", 20) .attr("y", 70); svg.append("text") .style("font-size", "12px") .attr("font-family", "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif") .attr("fill", "#666") .text(`raw property values and single substitution are listed.`) .attr("x", 20) .attr("y", 90); // Center Text svg.append("text") .style("font-size", "30px") .attr("text-anchor", "middle") .attr("font-family", "monospace") // .attr("font-weight", "bold") .attr("fill", "gray") .text(`${ntable[currentAA]}`) .attr("x", (width+margin*2)/2) .attr("y", (height+margin*2)/2); for (let cInd=0;cInd radarLine(d.map(v => v.value))) .attr("fill", (d, i) => color(i)) .attr("fill-opacity", 0.1) .attr("stroke", (d, i) => color(i)) .attr("stroke-width", 2); plots.selectAll("circle") .data(d => d) .join("circle") .attr("r", dotRadius) .attr("cx", (d,i) => rScale(d.value) * Math.cos(angleSlice*i - Math.PI/2)) .attr("cy", (d,i) => rScale(d.value) * Math.sin(angleSlice*i - Math.PI/2)) .attr("fill",(d, i) => color(i)) .attr("stroke", (d, i) => color(i)) .style("fill-opacity", 0.8); return svg.node(); }32:[] 2f:{"title":"PROPERTY VIZ 1.0 for HYPHY 2.5.40","cells":[{"id":802,"value":"md`# PROPERTY VIZ 1.0 for HYPHY 2.5.40\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":902,"value":"md`**HYPHY Version**: ${primeOutput.runtime}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":424,"value":"md`## ${primeOutput.analysis['0']} Property Set Summary`","pinned":false,"hidden":false,"mode":"ojs"},{"id":782,"value":"viewof propertySelect = select({\n title: \"Physicochemical Property Set of Interest\",\n options: [\"Atchley\", \"LCAP\"],\n value: \"Atchley\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":529,"value":"viewof aaSelect = select({\n title: \"Amino Acid of Interest\",\n options: Object.keys(primeOutput.residue_properties[Object.keys(primeOutput.residue_properties)[0]]),\n value: \"A\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":756,"value":"md`---\n### Implementation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":432,"value":"currentAA = aaSelect","pinned":false,"hidden":false,"mode":"ojs"},{"id":270,"value":"function minmax(propertySet) { // min-max normalization to absolute values.\n let newPropertySet = {};\n let curPropertySet = Object.values(propertySet).map(Math.abs);\n let pMin = Math.min.apply(Math, curPropertySet);\n let pMax = Math.max.apply(Math, curPropertySet);\n Object.keys(propertySet).forEach (aa => {\n newPropertySet[aa] = (Math.abs(propertySet[aa])-pMin)/(pMax-pMin);\n })\n return newPropertySet;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"aaData = {\n let aaMINMAX = {};\n Object.keys(primeOutput.residue_properties).forEach( prop => {\n let minmaxPropSet = minmax(primeOutput.residue_properties[prop])\n Object.keys(minmaxPropSet).forEach( aa => {\n if (!(aa in aaMINMAX)) {\n aaMINMAX[aa] = [];\n }\n aaMINMAX[aa].push({\"axis\":prop, \"value\":minmaxPropSet[aa]});\n })\n })\n return Object.values(aaMINMAX);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"data = [aaData[Object.keys(primeOutput.residue_properties[Object.keys(primeOutput.residue_properties)[0]]).indexOf(currentAA)]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"ttable = primeOutput['translation-table']","pinned":false,"hidden":false,"mode":"ojs"},{"id":496,"value":"ntable = {\n let myObj = {A: \"Ala\",\n C: \"Cys\",\n D: \"Asp\",\n E: \"Glu\",\n F: \"Phe\",\n G: \"Gly\",\n H: \"His\",\n I: \"Ile\",\n K: \"Lys\",\n L: \"Leu\",\n M: \"Met\",\n N: \"Asn\",\n P: \"Pro\",\n Q: \"Gln\",\n R: \"Arg\",\n S: \"Ser\",\n T: \"Thr\",\n V: \"Val\",\n W: \"Trp\",\n Y: \"Tyr\"}\n return myObj\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":619,"value":"currentCodon = {\n let codons = [];\n for (let k=0; k !currentCodon.includes(item)).filter(item => ttable[item]!=\"X\"));\n }\n return subCodon;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":667,"value":"singleSubVal = {\n let dist = [];\n for (let cInd=0;cInd eachSub[b] ? 1 : 0; });\n let closestThree = [singleSubCodon[cInd][indices.indexOf(0)], singleSubCodon[cInd][indices.indexOf(1)], singleSubCodon[cInd][indices.indexOf(2)]];\n // each.push(eachSub)\n each.push(closestThree.map(d=>`${ntable[ttable[d]]}|${ttable[d]}|${d}`)); \n }\n dist.push(each);\n }\n return dist;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":639,"value":"codonColors = [\"#0088ca\", \"#18b3ff\", \"#f1cf52\", \"#b2600e\", \"#861b0b\", \"#4a5f48\"] // https://www.color-hex.com/color-palettes/","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"md`---\n### Configuration`","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"curveSelect = \"curveLinearClosed\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"axesDomain = data[0].map(d => d.axis)","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"axesLength = data[0].length","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"formatPercent = d3.format(',.0%')","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"wrapWidth = 60","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"axisLabelFactor = 1.12","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"axisCircles = 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"dotRadius = 4","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"radius = (height-(margin*2)) / 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"margin = 30","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"height = 900","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"md`### Plotting`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"radarLine = d3.lineRadial()\n .curve(d3[curveSelect])\n .radius(d => rScale(d))\n .angle((d, i) => i * angleSlice)","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"angleSlice = Math.PI * 2 / axesLength","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"rScale = d3.scaleLinear()\n .domain([0, maxValue]) //\n .range([0, radius])","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"color = d3.scaleOrdinal()\n .range([\"#CC333F\",]) //,\"#00A0B0\",\"#EDC951\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":446,"value":" maxValue = 1 // for MINMAX // d3.max(_.flatten(data).map(d => d.value))","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"primeOutput = fetch(`https://raw.githubusercontent.com/hannahkimincompbio/PRIME_reboot_git/main/adh.nex_${propertySelect}.PRIME.json`)\n .then(function(response){\n return response.json();\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":455,"value":"md`---\n### Sources of Physicochemical Property Set`","pinned":false,"hidden":false,"mode":"ojs"},{"id":458,"value":"md`_**Atchley Property Set**_: William R. Atchley, Jieping Zhao, Andrew D. Fernandes, and Tanja Drüke \"Solving the protein sequence metric problem\" PNAS 2005 102 (18) 6395-6400; published ahead of print April 25, 2005, http://dx.doi.org/doi:10.1073/pnas.0408677102`","pinned":false,"hidden":false,"mode":"ojs"},{"id":614,"value":"md`_**LCAP Property Set**_: Gavin C. Conant, Günter P. Wagner, Peter F. Stadler \"Modeling amino acid substitution patterns in orthologous and paralogous genes\" Molecular Phylogenetics and Evolution, Volume 42, Issue 2, February 2007, Pages 298–307 http://dx.doi.org/10.1016/j.ympev.2006.07.006`","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"md`---\n### Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"import {curveTypes} from \"@palewire/d3-curves-inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"_ = require(\"underscore\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":876,"value":"md`---\n### Radar Chart Reference`","pinned":false,"hidden":false,"mode":"ojs"},{"id":879,"value":"md`- https://observablehq.com/@palewire/radar-chart`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}