2b:null 2c:["$","title",null,{"children":"Phylos Cannabis Genetic Fingerprint | Russell Warner | Observable"}] 31:T96f,{ function parseTypes(d) { return { block_id: d.subpop, start: parseInt(d.start), end: parseInt(d.end), value: parseFloat(d.value) }; } let [ dnaFingerprintTrack1, dnaFingerprintTrack2, dnaFingerprintTrack3, dnaFingerprintTrack4, dnaFingerprintTrack5 ] = fingerprintRings.map(ring => ring.map(parseTypes)) let height = 550 let container = html`

` // SIZE settings var width = canvasWidth let circosHeatmap = new CIRCOS({ container, width, height }); circosHeatmap .layout(subpops, { innerRadius: 220, outerRadius: 220, radialMargin: 0, gap: 0, margin: 0, ticks: { display: false }, labels: { display: false } }) .heatmap("dnaFingerprintTrack1", dnaFingerprintTrack1, { innerRadius: 0.88, outerRadius: 1, logScale: false, color: function(datum, index) { return getSpectralColor(datum, index) } }) .heatmap("dnaFingerprintTrack2", dnaFingerprintTrack2, { innerRadius: 0.76, outerRadius: 0.88, logScale: false, color: function(datum, index) { return getSpectralColor(datum, index) } }) .heatmap("dnaFingerprintTrack3", dnaFingerprintTrack3, { innerRadius: 0.64, outerRadius: 0.76, logScale: false, color: function(datum, index) { return getSpectralColor(datum, index) } }) .heatmap("dnaFingerprintTrack4", dnaFingerprintTrack4, { innerRadius: 0.52, outerRadius: 0.64, logScale: false, color: function(datum, index) { return getSpectralColor(datum, index) } }) .heatmap("dnaFingerprintTrack5", dnaFingerprintTrack5, { innerRadius: 0.4, outerRadius: 0.52, logScale: false, color: function(datum, index) { return getSpectralColor(datum, index) } }) .render() var seal = container.querySelector("g.all") seal.setAttribute("transform", "rotate(30),translate(350,100)") var tiles = container.querySelectorAll(".tile") Array.prototype.forEach.call(tiles, function(el) { var currentTileFill = el.getAttribute("fill") el.setAttribute("stroke", currentTileFill) // Uncomment to see tile lines // el.setAttribute("stroke", "white") // el.setAttribute("strokeWidth", 1) }) return container }32:T15a4,function transformAPI(apiResponse) { // 1. Grab the key information // console.log(apiResponse) var kit = apiResponse.kit var nodeCreatedAt = apiResponse.node_created_at // var galaxyUrl = apiResponse.galaxy_url // var galaxyUrl = phylosMeDisplay var preferredCustomer = false if (preferredCustomer) { // var organizationName = toTitleCase(apiResponse.organization) } else { var organizationName = 'GENOTYPE' } // for later... // var strainName = toTitleCase(apiResponse.declared_strain) // This is all removed because there are not static svg elements in the index anymore. // Set the seal text values //if (options.showTitle) { // document.querySelector('h1').innerHTML = 'Seal for ' + declaredStrain //} // document.querySelector('#cert-date-text').innerHTML = nodeCreatedAt // document.querySelector('#org-text').innerHTML = organizationName // 2. isolate the sup-populations var skunk_samples = []; var berry_samples = []; var landrace_samples = []; var ogkush_samples = []; var hemp_samples = []; var cbd_samples = []; // 3. re-structure the individual sample objects var zed = 0; var len = apiResponse.cells.length for(zed = 0; zed < len; zed++) { var sample = {}; var subpopName = apiResponse.cells[zed].population_name; subpopName = subpopName.replace(/\s/g, ''); sample.subpop = subpopName.toLowerCase(); sample.start = 0; sample.end = 0; sample.value = apiResponse.cells[zed].cell_color_code; // Based on the sample name, distrubute to ubpopulation arrays switch(sample.subpop) { case "skunk": skunk_samples.push(sample); break; case "berry": berry_samples.push(sample); break; case "landrace": landrace_samples.push(sample); break; case "ogkush": ogkush_samples.push(sample); break; case "hemp": hemp_samples.push(sample); break; case "cbd": cbd_samples.push(sample); break } } var totalPopulation = [skunk_samples, berry_samples, ogkush_samples, landrace_samples, hemp_samples, cbd_samples]; var additives = [0,30,60,90,120,150]; var dicedSubPopulations = [[],[],[],[],[]]; var q = 0; // per sub-population, multiply and change the values for different spectral colors for(q = 0; q < totalPopulation.length; q++) { var p = 0; for(p=0; p < totalPopulation[q].length; p++) { if(totalPopulation[q][p].value == 0) { totalPopulation[q][p].value = 0; } else { totalPopulation[q][p].value = (totalPopulation[q][p].value * 10) + additives[q]; } } } // per sub-population, calculate the modal (non-zero) value var subpopModes = [] for(q = 0; q < totalPopulation.length; q++) { var subpopValueArray = [] var p = 0; for(p=0; p < totalPopulation[q].length; p++) { subpopValueArray.push(totalPopulation[q][p].value) } // console.log(subpopValueArray) // console.log(mode(subpopValueArray)) subpopModes.push(mode(subpopValueArray)) } // console.log(subpopModes) // One more loop for old times sake! Re-assign 0s to the mode instead for(q = 0; q < totalPopulation.length; q++) { var p = 0; for(p=0; p < totalPopulation[q].length; p++) { if(totalPopulation[q][p].value == 0) { totalPopulation[q][p].value = subpopModes[q] } } } // Arrange sub-populations into groups for rings dicedSubPopulations[0] = [totalPopulation[0].slice(0,20), totalPopulation[1].slice(0,20), totalPopulation[2].slice(0,20), totalPopulation[3].slice(0,20), totalPopulation[4].slice(0,20), totalPopulation[5].slice(0,20)] dicedSubPopulations[1] = [totalPopulation[0].slice(20,40), totalPopulation[1].slice(20,40), totalPopulation[2].slice(20,40), totalPopulation[3].slice(20,40), totalPopulation[4].slice(20,40), totalPopulation[5].slice(20,40)] dicedSubPopulations[2] = [totalPopulation[0].slice(40,60), totalPopulation[1].slice(40,60), totalPopulation[2].slice(40,60), totalPopulation[3].slice(40,60), totalPopulation[4].slice(40,60), totalPopulation[5].slice(40,60)] dicedSubPopulations[3] = [totalPopulation[0].slice(60,80), totalPopulation[1].slice(60,80), totalPopulation[2].slice(60,80), totalPopulation[3].slice(60,80), totalPopulation[4].slice(60,80), totalPopulation[5].slice(60,80)] dicedSubPopulations[4] = [totalPopulation[0].slice(80), totalPopulation[1].slice(80), totalPopulation[2].slice(80), totalPopulation[3].slice(80), totalPopulation[4].slice(80), totalPopulation[5].slice(80)] var theFiveRings = [[],[],[],[],[]]; var i = 0; var j = 0; var n = 0; for (i=0; ih3 { text-align:center; }

Cannatonic	Remedy	Banana Strawberry
Hitman OG	Unclebuds J1	LA Confidential
Crunchberry	Blue Cheese	Red Corrento

`36:[] 2f:{"id":"5435da434c6cb70b","slug":"phylos-cannabis-genetic-fingerprint","title":"Phylos Cannabis Genetic Fingerprint","thumbnail":"d5396bb97c908ac043336acf3e106c593c2b23f46aec57dea95f87cae7a88ae0","access_level":"public","create_time":"$D2018-06-19T22:50:47.294Z","update_time":"$D2022-07-30T23:46:02.565Z","view_time":null,"first_public_time":"$D2018-06-20T00:04:12.024Z","fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"7e1a4a00f7304bfe","login":"russellbits","name":"Russell Warner","avatar_url":"https://avatars-next.observableusercontent.com/aac71d49545102dcb0a36ae466cf9614cc065a843871a897827164fdc6e08aa5","tier":"starter_2024"},"version":214,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3190c2f7df8a757f","login":"russellbits","name":"Russell Warner","avatar_url":"https://avatars-next.observableusercontent.com/aac71d49545102dcb0a36ae466cf9614cc065a843871a897827164fdc6e08aa5","tier":null}],"members":[{"type":"individual","id":"3190c2f7df8a757f","login":"russellbits","name":"Russell Warner","avatar_url":"https://avatars-next.observableusercontent.com/aac71d49545102dcb0a36ae466cf9614cc065a843871a897827164fdc6e08aa5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":6,"collection":null,"type":"notebook","body":{"title":"Phylos Cannabis Genetic Fingerprint","cells":[{"id":0,"value":"md`# Phylos Cannabis Genetic Fingerprint\nAs part of the [Phylos Certified](https://phylos.bio/phylos-certified) effort—a program to genetically identify different varities of the cannabis plant for growers—Phylos sought out a visualization that would clearly communicate differences between varieties.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"D3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"QUEUE = require('d3-queue')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"CIRCOS = require('circos/dist/circos.es6.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":55,"value":"md`Go to the [Phylos Galaxy](https://phylos.bio/galaxy/) and search for any cannabis variety you're interested in. Select a star or search result and you can then go to a variety's genotype report. On that report, you'll see the Geneotype ID. Enter that id sans dashes in the cell below and the seal should update accordingly.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":50,"value":"genekitID = 'g2063'\n// gl180 is Romulan Cotton Candy--I mention it purely because the name is awesome\n// g-qzckt is another interesting variety since it is CBD\n// gl590 is a variety of Cannatonic. You will notice that it is a very light/solid\n// seal because it is closely related to our original reference plant.\n// g2063 or Chuy Purps\n// G-YLFGN or Cheese\n// GL092 or Peanut Butter + Jelly\n// G-MFRNK is the default strain in the seal code","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"sealRequestUri = 'https://phylos.bio/sims/api/data-vis/seal/v1/' + genekitID","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":141,"value":"caption = md`## ${fingerprint.declared_strain}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":71,"value":"fingerprint = await D3.json(sealRequestUri)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":100,"value":"function mode(arr) {\n var numMapping = {};\n var greatestFreq = 0;\n var mode;\n arr.forEach(function(number) {\n numMapping[number] = (numMapping[number] || 0) + 1;\n\n if (greatestFreq < numMapping[number]) {\n greatestFreq = numMapping[number];\n mode = number;\n }\n });\n return +mode;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":98,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":111,"value":"fingerprintRings = transformAPI(fingerprint)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"md `The api response needs to be transformed from the large single column matrix that it is into five arrays of arrays that shape the data (into concentric circles) so that it's useful to Circos.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"canvasWidth = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":29,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":45,"value":"md`Sub-populations in cannabis are generated through a structural analysis of the cannabis genome. It's comparable to 23andme's [ancestry reports](https://permalinks.23andme.com/pdf/samplereport_ancestrycomp.pdf) which identify a human individual as part Iberian, Ashkenazi Jew, Sardinian, etc. The sub-population array below gives Circos that structural information.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"subpops = [\n { \"len\": 20, \"color\": \"#ffffff\", \"label\": \"Skunk\", \"id\": \"skunk\" },\n { \"len\": 20, \"color\": \"#ffffff\", \"label\": \"Berry\", \"id\": \"berry\" },\n { \"len\": 20, \"color\": \"#ffffff\", \"label\": \"Landrace\", \"id\": \"landrace\" },\n { \"len\": 20, \"color\": \"#ffffff\", \"label\": \"OG Kush\", \"id\": \"ogkush\" },\n { \"len\": 20, \"color\": \"#ffffff\", \"label\": \"Hemp\", \"id\": \"hemp\" },\n { \"len\": 20, \"color\": \"#ffffff\", \"label\": \"CBD\", \"id\": \"cbd\" }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":41,"value":"md`The idea behind the fingerprint is that as a graphic, it uniquely identifies cannabis varieties. Below are comparisons of nine strains from far out places in the galaxy. You can see heavier concentrations of color in sub-population slices due to the variation in SNPs compared to the reference variety (which is Cannatonic). Similarity to the reference variety results in more light colored areas.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":151,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":193,"value":"md`_Click on any of the above seals to see their full genotype report._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 30:"$2f:body"

Cannatonic

Remedy

Banana Strawberry

Hitman OG

Unclebuds J1

LA Confidential

Crunchberry

Blue Cheese

Red Corrento