31:T8d9,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.7); 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) * Math.cos(angleSlice*i - Math.PI/2)) .attr("y2", (d, i) => rScale(maxValue) * Math.sin(angleSlice*i - Math.PI/2)) .attr("class", "line") .style("stroke", "gray") .style("stroke-width", "5px") // .style("stroke-opacity", 0.5); axis.append("circle") .attr("r", dotRadius*3) .attr("cx", (d, i) => rScale(maxValue) * Math.cos(angleSlice*i - Math.PI/2)) .attr("cy", (d, i) => rScale(maxValue) * Math.sin(angleSlice*i - Math.PI/2)) .style("stroke", "gray") .style("stroke-width", "3px") // .style("stroke-opacity", 0.5) .style("fill", "#CDCDCD") // .style("fill-opacity", 0.7); const plots = container.append('g') .selectAll('g') .data(data) .join('g') plots.append('path') .attr("d", d => radarLine(d.map(v => v.value))) .attr("fill", (d, i) => color(i)) .attr("fill-opacity", 0.5) .attr("stroke", (d, i) => color(i)) .attr("stroke-width", 2); plots.selectAll("circle") .data(d => d) .join("circle") .attr("r", dotRadius*2) .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":"The Poster Example (PReC - PROPERTY VIZ 1.0b)","cells":[{"id":802,"value":"md`# The Poster Example (PReC - PROPERTY VIZ 1.0b)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":424,"value":"md`## ${propertySelect} Property Set Summary`","pinned":false,"hidden":false,"mode":"ojs"},{"id":782,"value":"viewof propertySelect = select({\n title: \"Physicochemical Property Set of Interest\",\n options: Object.keys(residue_properties),\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(residue_properties[propertySelect][Object.keys(residue_properties[propertySelect])[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(residue_properties[propertySelect]).forEach( prop => {\n let minmaxPropSet = minmax(residue_properties[propertySelect][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(residue_properties[propertySelect][Object.keys(residue_properties[propertySelect])[0]]).indexOf(currentAA)]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":930,"value":"translation_table0 = fetch(\"https://raw.githubusercontent.com/hannahkimincompbio/PRIME_reboot_git/main/references/universal-translation-table.json\")\n .then(function(response){\n return response.json();\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"ttable = translation_table0['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":"residue_properties0 = fetch(\"https://raw.githubusercontent.com/hannahkimincompbio/PRIME_reboot_git/main/references/default_residue_properties.json\")\n .then(function(response){\n return response.json();\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":922,"value":"residue_properties = residue_properties0['residue_properties']","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":985,"value":"md`\n---\n## Table of PReC Collection\n\n1. [PReC Introduction](https://observablehq.com/@hyphy/prec?collection=@hyphy/prec)\n1. The Poster Example\n1. PREI\n1. PROPERTY - you are here!\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}