29:null 2a:["$","title",null,{"children":"PLCOjs tutorial [YouTube] | Jonas Almeida | Observable"}] 2f:T760,# PLCOjs tutorial ^[YouTube] This tutorial illustrates how to explore GWAS data provided by DCEG's PLCO project\* in real time, by operating its APIs with the help of PLCOjs JavaScript SDK. The live page of PLCOjs at episphere.github.io/plco includes links to additional supplementary information. The literate programming rationale for using observable or reactive notebooks, like this one, to explore external data sources and analytic libraries, like PLCOjs, can be found at Nature 593, 156-157 (2021) under the title "**Reactive, reproducible, collaborative: computational notebooks evolve**". As reviewed in that report, the reproducibility and re-usability of conventional notebooks that rely on backend execution is very much called into question. Accordingly, exploring the in-browser SDK model of PLCOjs is motivated by the broader advocation for FAIR principles for the stewardship of scientific data at NIH.

\* The Prostate, Lung, Colorectal, Ovarian (PLCO) Cancer Screening Study is a large population-based randomized trial designed and sponsored by the National Cancer Institute (NCI) to determine the effects of screening on cancer-related mortality and secondary endpoints in men and women aged 55 to 74.

30:T58e,## Loading PLCOjs The same code source link, https://episphere.github.io/plco/plco.js, can be used to load the SDK in a web page/application through script tag DOM element, or as a commonJS module. The library can also be imported directly using ES6 supported by modern web browsers, from https://episphere.github.io/plco/export.js. ```html ``` or as a module using commonJS **require**. ```javascript plco = require("https://episphere.github.io/plco/plco.js") ``` Modern ES6 modules are also supported, including dynamic imports, ```javascript plco = await import("https://episphere.github.io/plco/export.js") ``` which comes with the advantage of full control of the namespace ```javascript myPLCO = import("https://episphere.github.io/plco/export.js") ``` All three possibilities will generate a plco object with a set of api and a plot methods, as described in the documentation. 31:T52f,### Exporting interactive visualizations and data This part of the tutorial is better understood by visualizing the companion YouTube webcast. It overviews ... * how the data can be downloaded directly by clicking on the "download json" button ... * ... and the consumed in the plot panel, where the data can be extracted as CSV tables. * The portable visualization can be made portable, for example as a github-based versioned link as subplementary material, as exemplified by [https://episphere.github.io/plot/?https://jonasalmeida.github.io/pub/PLCOpca2.json](https://episphere.github.io/plot/?https://jonasalmeida.github.io/pub/PLCOpca2.json) which could be conveniently shortened, say for a figure legend, as bit.ly/plcopca. ### Tabular extraction The tabular CSV extraction from the JSON data structure will work for all cases but will be unequally straightforward to use. The easiest plot for tabular extraction is from bar plots, as illustrated by plotting breast cancer diagnoses by gender and ethnicity. The plot produced is not entirely clear about the phenotype, which provides a good example for wrangling specific data out of it to generate properly formated tables that can be exported as CSV files.32:[] 2d:{"id":"fca7cc79d6df1ff6","slug":"plcojs","title":"PLCOjs tutorial [YouTube]","thumbnail":"3d4979910bd9776ec8dc8de14074ac77c97af12f0ffd567c7eb09e8451375f8f","access_level":"public","create_time":"$D2021-12-09T15:56:52.630Z","update_time":"$D2022-06-02T21:04:49.261Z","view_time":null,"first_public_time":"$D2021-12-09T15:57:16.141Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"0f2e596d5bd6ef6e","login":"episphere","name":"Jonas Almeida","avatar_url":"https://avatars-next.observableusercontent.com/3a0ff5abff6da0cdbd100da305ba323e12d43c8fcb7604275e6c72591db9dc69","tier":"starter_2024"},"version":651,"publish_version":651,"role":null,"authored":false,"authors":[{"type":"individual","id":"4355fe13cb71b11d","login":"episphere","name":"Jonas Almeida","avatar_url":"https://avatars-next.observableusercontent.com/3a0ff5abff6da0cdbd100da305ba323e12d43c8fcb7604275e6c72591db9dc69","tier":null}],"members":[{"type":"individual","id":"4355fe13cb71b11d","login":"episphere","name":"Jonas Almeida","avatar_url":"https://avatars-next.observableusercontent.com/3a0ff5abff6da0cdbd100da305ba323e12d43c8fcb7604275e6c72591db9dc69","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"PLCOjs tutorial [YouTube]","cells":[{"id":0,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":17,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":44,"value":"let's do it then, say, using the import mechanism:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":39,"value":"plco2 = await import(\"https://episphere.github.io/plco/export.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":482,"value":"plco = require(\"https://episphere.github.io/plco/plco.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":113,"value":"
Ploting GWAS data ^[SDK]
\n
The plot methods are listed at the SDK link above. Here we'll illustrate its use with four examples of plotting methods, and how they can also be used to retrieve data. All examples can be run directly by your JavaScript code, both as components of your application or directly from the console. That includes, as is common in the web stack, the ability to extend or modify existing methods with your own code. See YouTube link above for a webcast video going through this tutorial.
\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":229,"value":"## Checking API","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":195,"value":"Checking that the PLCO GWAS API is in good working order:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":204,"value":"plco.api.ping()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":648,"value":"plco.api.ping()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":245,"value":"For additional comparison see companion observable notebook where the second code loading mechanism is used. The script tag mechanism supports the same looser syntax as CommonJS, and can be inspected in the projects landing page, as reviewed in the webcast for this tutorial. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":299,"value":"## Comparing genomes\nComparing two populations, say, European with east Asian females, could be achieved using the Manhhatan2 method.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":347,"value":"
","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":337,"value":"plco.plot.manhattan2(\"plotMan2\", [\n { phenotype_id: 3080, ancestry: \"european\", sex: \"female\" },\n { phenotype_id: 3080, ancestry: \"east_asian\", sex: \"female\" }\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":319,"value":"## Getting just data\nThe same command could be used to retrieve the data directly from the API. Note the additional to_json parameter: the fourth input now set as true.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":324,"value":"dt = plco.plot.manhattan2(\n \"plot4data\",\n [\n { phenotype_id: 3080, ancestry: \"european\", sex: \"female\" },\n { phenotype_id: 3080, ancestry: \"east_asian\", sex: \"female\" }\n ],\n 2,\n false,\n true\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":523,"value":"### and plotting it some more\nafter loading a suitable plotting library, like Plotly, let's wrangle a subset of the SNP data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":402,"value":"Plotly = require(\"https://cdn.plot.ly/plotly-2.12.1.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":543,"value":"let's now plot just the values from the first chromosome for the first the European participants (compare with full figure)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":404,"value":"Plotly.newPlot(DOM.element(\"div\"), [\n {\n x: dt.traces[0].x,\n y: dt.traces[0].y,\n mode: \"markers\"\n }\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":527,"value":"## Comparing populations\nLet's try something computationally heavier, like using PCA as a dimensionality reduction technique and compare them for different array types.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":552,"value":"
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":557,"value":"plco.plot.pca2(\"Plotpca2\", [\n { phenotype_id: 3080, sex: \"female\", ancestry: \"east_asian\" },\n { phenotype_id: 3080, sex: \"female\", ancestry: \"european\" }\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":561,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":576,"value":"
","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":580,"value":"plco.plot.barchart(\"barPhenotype\", 3080)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":590,"value":"one more parameter, indicating that the data, rather than the graphic plot, is the desired output will make this clearer:","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":594,"value":"barData = plco.plot.barchart(\"barPhenotype\", 3080, true)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":596,"value":"... for example, a table with the data for breast cancer might be generated as follows","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":601,"value":"breastData = barData.traces[2].x.map((xi, i) => {\n return {\n Count: barData.traces[2].y[i],\n Ethnicity: xi,\n Gender: \"female\"\n };\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":608,"value":"viewof table = Inputs.table(breastData)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":611,"value":"## Extending and/or correcting plots\nOne final illustration of the use of the SDK might be to extend or correct a Plot. For example, in the example above, the title is omiss about the phenotype. To fix that, the data extracted from the plot can be amended and amended plot can be regenerated:","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":619,"value":"
","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":631,"value":"{\n barData.layout.title =\n \"Number of partipicants by breast cancer disgnosis and sex\";\n Plotly.newPlot(\"amendedBarPlot\", barData.traces, barData.layout);\n return \"title ammended\";\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":637,"value":"## to be continued ...\n\nIt is continued, in this other notebook where all of PLCOjs methods are explored, including additional portability options such as the use of custom elements such as epi-plotly.\n\n## ... here !","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2e:"$2d:body"

Ploting GWAS data [SDK]

Ploting GWAS data ^[SDK]