3e:null 3f:["$","title",null,{"children":"Phamerator.org: a Guide to Further Exploration | christopher shaffer | Observable"}] 45:T551,## Introduction The purpose of this notebook is to help SEA students and faculty use Phamerator data in ways that go beyond what is possible on [Phamerator.org](Phamerator.org). This notebook is intended to be a comprehensive introduction, and we recognize that it's quite long. (Shorter, more narrowly focused notebooks will follow.) In this notebook, we’ll cover four main topics: 1. ObservableHQ, the online coding platform where you're reading this. :) 2. Basic JavaScript programming concepts. JavaScript is our language of choice for data visualization because of how powerful the provided data visualization and collaborative coding tools are. ObservableHQ is the easiest place to learn how to write JavaScript. 3. Importing phage genomic data into an Observable notebook using Phamerator.org's Application Programming Interface (API). 4. Visualizing data using the JavaScript **Plot** library. A quick note about formatting. When we introduce a new term or concept, we'll highlight it in **bold**. When we are referring to a specific example of such a term or concept, we'll use _italics_. For instance, in JavaScript, values can be assigned to **variables**. When doing so, the variable name is on the left of the equal sign, and the value to be assigned is on the right of the equal sign. Below, 22807 is assigned to the variable named _zipCode_.46:T789,md` ## What is Observable? Observable is a collaborative coding environment for the **JavaScript** programming language. Think of it like Google Docs, but for writing code instead of writing essays, presentations, or spreadsheets. Rather than a document, an individual creation is called a **notebook**. The whole page you're reading right now is one very long Observable notebook. Similar to how Google Docs works, you can create private Observable notebooks, work on them collaboratively in real time with a team, publish them using an unlisted (hard-to-guess) URL, or publish them for the world to see. An Observable notebook is a collection of **cells** containing JavaScript code, data, or other text. The controls for adding, editing, and removing cells, as well as other actions, are accessible from the menu in the left margin of the notebook. When a cell is busy doing something, a gray vertical bar will be present in the left margin to indicate this. Some cells perform extensive computation and/or download a large amount of data over the internet and can therefore take a long time to be ready. If you see a gray bar next to a data visualization, know that it might be showing old data and you should give it time to complete whatever it is doing. Optionally, cells can be named. Any named cell can be accessed by its name from other cells in the same notebook or even from other notebooks. Cells containing text can be formatted (i.e. _italics_, **bold**, lists) using [Markdown](https://www.markdownguide.org/) syntax. Both the JavaScript programming language and the Observable notebook enviroment are extensively documented. When possible, we will refer you to relevant documentation rather than recreating our own version here. However, what follows is a concise list of important concepts that should help you to get started on using JavaScript and Observable in order to work with Phamerator.org's data. `47:T584,There are several API **endpoints** that each return specific Phamerator data. Each can be accessed using the _getPhameratorData()_ function. Here's a list of the endpoints, what arguments (if any) they accept, and what they return. Following the list, we'll demonstrate how to use them to load data from Phamerator.org's database into this notebook. _/profile_ : returns an object containing information about the signed in user - you! _/clusters_ : returns an array of objects (one per cluster) _/genome_ : accepts one argument, a phage name, and returns a single object _/genomes_ : returns an array of objects (one per genome) _/genes_ : accepts one argument, a phage name, and returns an array of objects, each of which represents a gene in that phage's genome _/genesbycluster_ : accepts one argument, a cluster name, and returns an array of objects, each of which represents a gene in that cluster _/phamilies_ : returns an array of objects, each representing a phamily _/phamily_ : accepts one argument, a phamily name, and returns an array of objects, each of which represents a gene in that phamily _/phagesbycluster_ : accepts one argument, a cluster name, and returns an array of objects, each of which represents a phage in that cluster _/phagesbysubcluster_ : accepts one argument, a subcluster name, and returns an array of objects, each of which represents a phage in that subcluster 48:T4df,In the graphs below, genes from an individual genome and a cluster of genomes are plotted according to their position and length and colored according to their GC content. (The graphs correspond to your menu selections.) Since the _/genes_ API endpoint does not return gene sequence data or GC content, these properties have been calculated in the notebook after getting the data from the API. If interested, see _calcGCbyPhage_, _calcGC_, and _revComp_ for further details. What you'll see in these graphs will of course vary depending on the data you select from the menus. However, general themes should be evident for most genomes and clusters. Here are a few to consider: - Most phage genes are small in size ( < 1 kb) - The distribution of gene lengths according to their position is not random (the right arm typically is home to most of the shorter genes in a genome) - A phage genome's overall GC content often mirrors that of its host bacterium. For _Mycobacterium_, this is ~65%, but the _Actinobacterium_ genomes as a group range from ~50-70% GC. Looking at the GC content of an individual phage gene is sampling a small region of the genome. Thus a given gene's GC content may vary substantially from the genome's overall GC content.49:T429,formWithSubmit = (form) => { const container = html`

${form}`; form.addEventListener("submit", async (event) => { event.preventDefault(); container.value = formValue(form); container.dispatchEvent(new CustomEvent("input")); // document.getElementById("login-form").style.display = "none"; let user; try { user = await d3.json(`https://phamerator.org/api/profile`, { headers: new Headers({ Authorization: `Basic ${base64.encode( `${formValue(form).email}:${formValue(form).password}` )}` }) }); } catch (error) { console.log(error); return; } const formSelection = d3.select("#login-form"); formSelection.transition().duration(1250).style("opacity", 0); formSelection.transition().delay(1250).style("display", "none"); }); form.addEventListener("input", (event) => { event.preventDefault(); // Need this, because otherwise the viewof Generator catches bubbling input events event.stopPropagation(); }); return container; }4a:[] 43:{"id":"4aa762dbb68c4f2a","slug":null,"title":"Phamerator.org: a Guide to Further Exploration","thumbnail":"bb80ee2f72b6dbb9d36cbd754d4fab9c02260008ce67d7bfde1992b67f8fa4c3","access_level":"public","create_time":"$D2022-07-05T16:03:41.091Z","update_time":"$D2022-07-07T18:14:10.712Z","view_time":null,"first_public_time":"$D2023-02-10T21:54:29.607Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"fa036640d47dbb0d","login":"024d5b11114707b5","name":"christopher shaffer","avatar_url":"https://avatars-next.observableusercontent.com/560c8ae53f32731e7da960896659a2944d76939cb5229e6be66f419f032fa613","tier":"starter_2024","bio":"","following":false},"version":2443,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"024d5b11114707b5","login":"024d5b11114707b5","name":"christopher shaffer","avatar_url":"https://avatars-next.observableusercontent.com/560c8ae53f32731e7da960896659a2944d76939cb5229e6be66f419f032fa613","tier":null,"bio":"just a user poking around on the site","following":false}],"members":[{"type":"individual","id":"024d5b11114707b5","login":"024d5b11114707b5","name":"christopher shaffer","avatar_url":"https://avatars-next.observableusercontent.com/560c8ae53f32731e7da960896659a2944d76939cb5229e6be66f419f032fa613","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Phamerator.org: a Guide to Further Exploration","cells":[{"id":0,"value":"# Phamerator.org: a Guide to Further Exploration","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2295,"value":"### Authors\n\nLauren Bruno, Sarah Donaire, Jasmine Kauffeld, Katelyn McHugh, and Steven G. Cresawn","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"**Terms of use:** To use this notebook, log in below with your [phamerator.org](https://phamerator.org) email address and password. (If needed, you can register at https://phamerator.org/sign-up). Use of phamerator.org, the phamerator.org API, or data stored in the phamerator.org database, whether the use occurs here on https://observablehq.com or elsewhere, constitutes your agreement to the terms and policies of both [phamerator.org](https://phamerator.org/terms) and the SEA-PHAGES program's [phagesdb.org](https://phagesdb.org/terms/).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1007,"value":"md`### *Welcome${user.name ? \", \" + user.name.split(\" \")[0] : \"\"}!* :)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":733,"value":"viewof formData = {\n let formData = \"Signed In\";\n formData = formWithSubmit(html`\n \n`);\n return formData;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"$45","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2331,"value":"zipCode = 22807","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":563,"value":"Observable cells are **reactive**. Similar to how spreadsheet formulas automatically recalculate when the value of a cell referenced in the formula changes, Observable cells also automatically rerun. To demonstrate this, we have defined a cell named _firstName_ whose value is the string \"you\" and created another cell that references _firstName_. Try changing the value of _firstName_ and you'll see the greeting update automatically. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":556,"value":"firstName = \"you\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"The next (unnamed) cell updates reactively to changes in _firstName_.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":559,"value":"\"Hey, \" + firstName + \"!\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":576,"value":"A **code block** is a cell that can contain more than one JavaScript expression. The text in a cell that contains a code block must be surrounded by braces, **{** and **}**. Usually code blocks will include a **return** statement that will become the value of the cell. Here's a simple example. We're saving the more useful examples for the JavaScript section of this notebook.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":582,"value":"greeting = {\n return \"Hello, World!\";\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":659,"value":"An **import** statement is used to import cells from other notebooks into this notebook.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":133,"value":"import { simpleGenomeMap } from \"@scresawn/simple-genome-map\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":669,"value":"The _simpleGenomeMap_ code is being imported into this notebook from [another notebook](https://observablehq.com/@scresawn/simple-genome-map). To use it, let's create a cell containing only the name of our imported cell. This is a demonstration of how to use _import_. The code required to create the genome map is beyond the scope of this tutorial notebook. However, we cover many standard data visualizations (_i.e._ bar charts, scatter plots, density plots, line graphs) at the end of this notebook.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":664,"value":"simpleGenomeMap","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2064,"value":"**Figure 1.** A genome map of phage _Acme_ is imported from another notebook and displayed in this one.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":553,"value":"Learn more about observable cells, reactivity, and writing JavaScript in Observable\n- https://observablehq.com/@observablehq/a-taste-of-observable\n- https://observablehq.com/@ddsg/what-is-observable\n- https://observablehq.com/@observablehq/observables-not-javascript\n\nCheck out Observable's short introduction video.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":585,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"## JavaScript\n\nThis notebook assumes that you are completely new to programming. For those who have a programming background but are new to JavaScript, you'll find that the language concepts in JavaScript are similar to those of other popular languages such as Python, R, or Java. For instance, JavaScript employs common **data types** (**String, Number, Boolean, Object, Array, Date**, and **Set**) as well as **variables, loops,** and **functions**. Not sure what any of that means? We're about to go through the most used of these one at a time. Read on. 🤘","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":342,"value":"**Strings** are simply a direct sequence of characters that can consist of letters, numbers, and symbols, written within quotation marks. When creating a string, make sure that your quotation marks are consistent on both sides. For instance 'hello', \"hello\", or \\`hello\\`, but not \"hello\\`.\n\nHere's an example:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":345,"value":"\"I am a string\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"Each data type supports various **properties** that make sense for that data type. For example, strings can tell you how long they are, or in other words, how many characters they contain. This information can be accessed using the **length** property.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":349,"value":"\"I am a string!\".length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":" A JavaScript **Number** can represent any integer, decimal, or scientific number. Here are a few examples:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":411,"value":"x = 21","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1899,"value":"pi = 3.14","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1903,"value":"titer = 3.4e9","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"Let's take a closer look at _x_. Since _x_ is a number, we can use various mathematical operators with it. Examples include addition, subtraction, division, multiplication, square, square root, etc. Let's demonstrate a few of these.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":416,"value":"x + 10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"x / 4","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"Some of the more advanced operations require the built-in **Math** library. Here's an example of calculating the square root of _x_.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":421,"value":"Math.sqrt(x)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"A **Boolean** can be one of two values: **true** or **false**. In practice, these are not commonly assigned to variable names. Instead, they are frequently encountered as the result of a comparison. The code below demonstrates some simple examples, but more useful examples appear in the **Array** section below, so keep reading. :)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":443,"value":"\"hello\".length > 4","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"5 < 3","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2334,"value":"Previously, we saw that a single equal sign (=) is used to **assign** a value to a variable. If what we want instead is to **compare** two values to see if they are the same, we do that with three equal signs (===). It is possible to use two equal signs (==) for comparison, but the behavior of == and === are subtly different, and we recommend that you always use the triple version, ===.) The next two cells demonstrate the difference between assignment and comparison.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2345,"value":"a = 10 means \"Set _a_ equal to 10.\"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2340,"value":"a = 10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2354,"value":"a === 10 means \"Is _a_ equal to 10?\"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2343,"value":"a === 10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"An **Object** is a collection of paired **keys** and **values**. They often are used to model complex real life entities which have properties of their own. Think of a shirt. A shirt is an object, and individual shirts are defined by their characteristics or properties. These properties can include color, size, cut, style, material, sleeve length, etc.\n\nLet's continue with our analogy by creating a JavaScript object that represents a shirt. Earlier we learned that JavaScript knows we are creating a string when we surround characters with quotation marks. It's similar with objects, where we use braces **{** and **}** to enclose an object. A peculiarity of Observable is that cells which define only an object must surround the braces with parentheses to distinguish the object from a code block, which otherwise would have the same language syntax. You can see this illustrated in the **myShirt** cell below.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":312,"value":"myShirt = ({\n color : \"blue\",\n material : \"cotton\",\n size : \"medium\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"**Arrays** are special because they can store multiple values at once. The values can be of any type: String, Number, Object, even Array! To create an Array, surround the elements with brackets **[** and **]** and places commas between elements.\n\nFor example:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":334,"value":"toDos = [\n \"feed the elephant\",\n \"buy another shirt\",\n \"think of other weird examples for this notebook\"\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"As with strings, we can use the length property to see how many items are in an array.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":338,"value":"toDos.length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"We can also use **indexing** to get a specific item from an array. The first index is 0, and they go up from there.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":340,"value":"toDos[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"toDos[2]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1914,"value":"In addition to properties such as **length**, arrays also benefit from methods. These are named procedures, or **functions** that we can run, or **call** by using their names. We'll include one below, in the **function** section.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":317,"value":"A **function** is a group of expressions that is used to carry out a task. These tasks often return a value back to the code that called the function. There are a few different ways to define functions in JavaScript. One way includes the _function_ keyword, a name for the function, any inputs that the function requires (these are listed in parentheses and are called _arguments_) and finally braces that surround the expressions that make up the body of the function.\n\nThe _addMe_ function below expects two parameters when it is called. In the body of the function, these parameters will be assigned to variables named *a* and *b*.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":319,"value":"function addMe(a, b) { \n return a + b; \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2080,"value":"Now that we have defined our _addMe_ function, we can **call** it, passing in two arguments. Our function doesn't care about the types of the arguments, so we can pass in strings or numbers, as these both support the addition (+) operator.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":321,"value":"addMe(\"Hey \", \"there\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":476,"value":"addMe(3, 4)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"A more common syntax for function definitions is referred to as _arrow syntax_. In the first example below, _addMe2_, the function body contains a single expression. In this case the braces around the function body as well as the return statement are omitted. The next example, _addMe3_, includes the braces and return statement. The _addMe_, _addMe2_ and _addMe3_ functions are equivalent.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":328,"value":"addMe2 = (a, b) => a + b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1932,"value":"addMe2(3, 4)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":479,"value":"addMe3 = (a, b) => {\n return a + b;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1930,"value":"addMe3(3, 4)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1935,"value":"Now that we've seen both methods and functions, you might have noticed that methods are just functions that are unique to data of a specific type. Here's a simple example with strings. Numbers, or course, have no concept of upper case, so they don't support the _toUpperCase()_ method.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1937,"value":"\"hello\".toUpperCase()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1952,"value":"And here are a couple of examples with arrays. Note that the _includes_ method returns a boolean value.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1959,"value":"friends = [\"Phoebe\", \"Chandler\", \"Joey\", \"Monica\", \"Rachel\", \"Ross\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1942,"value":"friends.includes(\"Gunther\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1949,"value":"friends.includes(\"Joey\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1939,"value":"Here's a more sophisticated example that uses the _filter()_ array method. When we call _filter()_ on an array, we get back a new array containing only the original array elements that pass a test that we define. The test is implemented as a function that returns a boolean value and _filter()_ takes care of calling this function on each element of our array. This test function is known as a **predicate function**. In the following example, the predicate function returns a boolean that indicates whether the provided string contains more than 5 characters.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1964,"value":"friends.filter((person) => person.length > 5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2442,"value":"friends.filter((z) => z.length >5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"Want to know more? Here's an excellent [reference](https://observablehq.com/@uwdata/a-minimal-introduction-to-javascript-and-observable) with loads of examples about data types, functions, loops, and other programming language concepts.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":270,"value":"## Accessing Phamerator.org data using the API\n\nWe get it. You came here to learn how to work with Phamerator data. With the basics out of the way, let's do just that. All Phamerator.org data live in a database. Rather than writing a complex query to run on the database in order to get back specific data, we will instead use the Phamerator.org **Application Programming Interface (API)**. The API is just a set of web addresses (URLs) that we can call in order to retrieve data in a defined format. We've gone a step further here by providing you with the _getPhameratorData()_ function that accepts the unique portion of the URL we wish to call and returns the data we want. This will only work if we're logged in and requesting data for which we are authorized.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":282,"value":"$47","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1150,"value":"## Data Sets\nOk, we're finally ready to combine our Observable, JavaScript, and Phamerator.org API skills to load data into our notebook! Creating an account on [Phamerator.org](Phamerator.org) provides access to the *Actino_Draft* data set. If you also have been granted access to any private data sets, these will appear alongside *Actino_Draft* in the menu below. Use the menu to select which data set to use with the API. The data returned by most of the API endpoints depend on what you select in this menu.\n\n_Not seeing a menu below? Scroll to the top of the notebook and make sure you are logged in._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1205,"value":"viewof dataset = Inputs.select(user.datasets.sort(), {\n label: \"Select a data set\",\n value: \"Actino_Draft\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":914,"value":"## **Clusters**\nThe **/clusters** API endpoint returns an array of objects, each representing a cluster in the selected data set. \nEach returned object includes the following properties: \n- _name_: the cluster name\n- _size_: the number of phages in the cluster\n\n**Hint:** click the triangle next to **Array** to see the data.\n\n**Another hint (wow!)** the number in parentheses after the word **Array** is the size of the array (the number of elements it contains).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"clusters = getPhameratorData(\"/clusters\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1141,"value":"## **Genome** \nThe **/genome** API endpoint returns a single object representing the specified phage. The object contains the following properties:\n- __id_: unique database identifier for this genome\n- _phagename_: the name of the phage\n- _genomelength_: The length of the genome in base pairs\n- _cluster_: the cluster to which the phage belongs (_i.e._ A, EA)\n- _subcluster_: the subcluster to which the phage belongs (_i.e._ 4).\n- _clusterSubcluster_: the cluster and subcluster (_i.e._ L1).\n- _dataset_: the phamerator data set to which the genome belongs\n- _genes_: an array of gene objects (see **/genes** section for details).\n- _sequence_: the DNA sequence\n ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1180,"value":"getPhameratorData(`/genome/${selectedPhage}`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":918,"value":"## **Genomes**\nThe **/genomes** API endpoint returns an array of objects, one per genome. See the **/genome** endpoint for details.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":43,"value":"genomes = getPhameratorData(\"/genomes\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1409,"value":"## Genes\nThe **/genes** API endpoint returns an array of all gene objects from the provided phage name. The output includes: \n- __id_: unique database identifier for the gene\n- _phageID_: unique database identifier for the phage to which the gene belongs\n- _dataset_: the Phamerator data set to which the gene belongs\n- _name_: gene name\n- _start_: start codon position\n- _stop_: stop codon position\n- _direction_: transcriptional orientation (forward or reverse)\n- _phamcolor_: color code assigned to the gene's phamily by Phamerator\n- _phamname_: the phamily to which this gene belongs\n- _translation_: the gene's encoded amino acid sequence\n- _genefunction_: function of the encoded protein\n- _geneID_: unique database identifier for the gene\n- _domaincount_: number of conserved domains found in the encoded protein","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1377,"value":"genes = getPhameratorData(`/genes/${selectedPhage}`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1411,"value":"## Genes by Cluster\nThe **/genesbycluster** API endpoint returns an array of objects, one for each gene in the selected cluster. See the **/genes** endpoint for details.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1398,"value":"genesbycluster = getPhameratorData(`/genesbycluster/${selectedCluster}`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":911,"value":"## Phamilies\n\nThe **/phamilies** API endpoint returns an array of objects. Each object represents a phamily and has the following properties:\n\n- __id_ : Unique database identifier for this phamily\n- _PhamID_: The name of the phamily as it appears on Phamerator.org genome maps\n- _size_: The number of members of the phamily\n- _dataset_ : The data set to which the gene belongs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":58,"value":"phamilies = getPhameratorData(\"/phamilies\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1380,"value":"## Phamily\nThe **/phamily** API endpoint accepts one required argument, the phamily name, and returns any array of objects, each representing a gene in the specified phamily. See the **/genes** endpoint for details.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1342,"value":"phamily = getPhameratorData(`/phamily/${phamilies[0].PhamID}`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":921,"value":"## **Phages by Cluster**\nThe **/phagesbycluster** API endpoint accepts one argument, a cluster name, and returns an array of objects, each of which represents a genome in that cluster. See the **/genome** endpoint for details.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":82,"value":"phagesByCluster = getPhameratorData(`/phagesbycluster/${selectedCluster}`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":927,"value":"## **Phages by Subcluster**\nThe **/phagesbysubcluster/** API endpoint accepts one argument, a subcluster name, and returns an array of objects, each of which represents a phage in that subcluster. See the **/genome** endpoint for details.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":84,"value":"phagesBySubcluster = getPhameratorData(\"/phagesbysubcluster/A1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1164,"value":"## Phamerator.org API Usage Examples","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":672,"value":"Accessing the data is one thing, but what we're really after are insight and understanding. With that in mind, let's look at two incredible software libraries that Observable provides. The first, [Observable Inputs](https://observablehq.com/@observablehq/inputs), is used to add interactive elements to notebooks. These might include menus, checkboxes, buttons, or tables. The second, [Observable Plot](https://observablehq.com/@observablehq/plot?collection=@observablehq/plot), is a way to visualize data by writing code. Below are examples of how to use these, but we encourage you to check out the linked documentation for further information. Code-based data visualization might seem unnecessarily complex since there are simpler tools for visualizing data. However, the benefit of combining a code-based visualization approach with the **Observable Inputs** interaction library is well worth it.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":206,"value":"Let's begin to put together the pieces. Well use the Phamerator API's **/clusters** endpoint to download an array of cluster objects, then get the value of the _name_ property from each object, and lastly pass the array of names as a parameter to the _Inputs.select()_ function.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":99,"value":"viewof selectedCluster = Inputs.select(\n clusters.map((cluster) => cluster.name),\n { label: \"Select a cluster\", value: \"BD\" }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"md`When you select something new in the cluster menu above, the information in this cell will change with it. The visualizations below are changing too, interactively gathering and plotting the information that you have selected thanks to **reactivity**!\n\nYou've selected cluster **${selectedCluster}**, which contains **${phagesByCluster.length}** phages. The cell below uses the **/api/phagesbycluster/${selectedCluster}** API endpoint to populate the menu.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"viewof selectedPhage = Inputs.select(\n phagesByCluster.map((phage) => phage.phagename).sort(),\n {\n label: `Cluster ${selectedCluster} phages`, value: \"Urza\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":518,"value":"## Clusters\nLet's build a simple table showing the names and sizes of the clusters in the *${dataset}* data set.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2260,"value":"**Table 1.** The clusters and the number of genomes they contain. Source data set: *${dataset}*.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":502,"value":"viewof clustertable = Inputs.table(clusters)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":529,"value":"These data can also be visualized using a bar chart. The bar chart below shows the sizes of the 10 biggest groups (nine of these are clusters, and the other is the unclustered or \"singleton\" phages).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":505,"value":"Plot.plot({\n // height: 200,\n marginLeft: 75,\n y: { label: \"Cluster\" },\n x: { label: \"Size\" },\n marks: [\n Plot.barX(clusters.slice(0, 10), {\n x: \"size\",\n y: \"name\",\n sort: { y: \"x\", reverse: true }\n }),\n Plot.ruleY([0])\n ],\n caption: md`**Figure 2.** Bar chart showing the sizes of the 10 largest clusters. Source data set: *${dataset}*.`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":545,"value":"## Genes\nSince you've selected phage **${selectedPhage}** in the menu above, let's get **${selectedPhage}'s** genes using the **/genesbyphage/${selectedPhage}** endpoint and display the data in a table by passing in an array of gene objects as a parameter to **Inputs.table()**. Click any column header to sort by that column. Click the same column header again to reverse the sort order. This table employs a couple of fancy features. For instance, each cell in the _Color_ column uses the Phamerator.org color for that phamily as its background, and the _Domain Count_ column is also a bar chart.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2269,"value":"**Table 2.** Genes in phage *${selectedPhage}*. Source data set: *${dataset}*.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":123,"value":"viewof table = Inputs.table(\n genes\n .map((gene) => {\n let {\n name,\n phamColor,\n phamName,\n direction,\n start,\n stop,\n genefunction,\n domainCount,\n translation\n } = gene;\n name = +name;\n phamName = +phamName;\n\n return {\n Name: name,\n Phamily: phamName,\n Color: phamColor,\n Direction: direction,\n Start: start,\n Stop: stop,\n \"Domain Count\": domainCount,\n Function: genefunction,\n Translation: translation\n };\n })\n .sort((a, b) => a.Name - b.Name),\n {\n format: {\n \"Domain Count\": sparkbar(\n d3.max(genes, (d) => d.domainCount)\n ),\n Color: (d) => setBackgroundColor(d)\n },\n width: { Name: 50, Function: 250 }\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":543,"value":"md`## Genome Map\nA genome map is a great way to visualize the position, size, and direction of each gene in a genome. This map updates to show whichever genome you've selected from the phage menu above.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1035,"value":"map2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"md`**Figure 3.** A map of the protein-coding genes in phage *${selectedPhage}*. Source data set: *${dataset}*.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1286,"value":"## Density Plot\nA density plot emphasizes the distribution of data. In the density plots below, gene length is plotted against gene position for an individual phage, *${selectedPhage}*, and for all phages within cluster *${selectedCluster}*. You might have noticed that the values that are being plotted, gene length and gene position, are not part of what the API returns. Instead, we are calculating these based on the _start_ and _stop_ properties. A gene's position is the arithmetic mean of its start and stop coordinates, while a gene's length is the absolute value of the difference between its _stop_ and _start_ coordinates.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1309,"value":"genesByPhage = {\n let genes = await getPhameratorData(`/genes/${selectedPhage}`);\n return genes.map((gene) => {\n gene.position = (gene.start + gene.stop) / 2;\n gene.length = Math.abs(gene.stop - gene.start);\n return gene;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1458,"value":"Plot.plot({\n inset: 50,\n y: { label: \"Gene Length (bp)\" },\n x: { label: \"Gene Position (bp)\" },\n marks: [\n Plot.density(genesByPhage, {\n x: \"position\",\n y: \"length\",\n stroke: \"gray\"\n }),\n Plot.dot(genesByPhage, {\n x: \"position\",\n y: \"length\",\n stroke: \"blue\"\n })\n ],\n caption: md`**Figure 4.** A density plot showing the relationship between length and position of genes in phage *${selectedPhage}*. Source data set: *${dataset}*.`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1827,"value":"Because the number of genes in a cluster can be very high (there are _${genesbycluster.length.toLocaleString()}_ genes in the plot below), we are using color to highlight the density contours rather than showing individual points for each gene.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1368,"value":"Plot.plot({\n inset: 50,\n y: { label: \"Gene Length (bp)\" },\n x: { label: \"Gene Position (bp)\" },\n marginLeft: 60,\n marks: [\n Plot.density(selectedClusterGenes, {\n x: \"position\",\n y: \"length\",\n stroke: \"gray\",\n fill: \"density\",\n color: { scheme: \"ylgnbu\" }\n }),\n // ,Plot.dot(selectedClusterGenes, {\n // x: \"position\",\n // y: \"length\",\n // stroke: \"blue\"\n // })\n ],\n caption: md`**Figure 5.** A density plot showing the relationship between length and position of genes in cluster *${selectedCluster}*. Source data set: *${dataset}*.`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1828,"value":"$48","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1530,"value":"genesWithGC = {\n let genome = await getPhameratorData(`/genome/${selectedPhage}`);\n let genesWithGC = genesByPhage.map((gene) => gene);\n\n genesWithGC.map((gene) => {\n if (gene.direction === \"forward\") {\n gene.sequence = genome.sequence.slice(gene.start - 1, gene.stop);\n } else if (gene.direction === \"reverse\") {\n gene.sequence = revComp(genome.sequence.slice(gene.start - 1, gene.stop));\n }\n gene[\"GC%\"] = calcGC(gene.sequence);\n });\n\n return genesWithGC;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1777,"value":"gcPlotData = {\n let data = [];\n let gcPlotData = await getPhameratorData(\n `/phagesbycluster/${selectedCluster}`\n );\n\n for (let index = 0; index < gcPlotData.length; ++index) {\n let phageData = await calcGCbyPhage(gcPlotData[index].phagename);\n data.push(phageData.genes);\n }\n return data.flat();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2393,"value":"getPhameratorData(`/genes/LeBron`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1766,"value":"calcGCbyPhage = async (phagename) => {\n let genome = await getPhameratorData(`/genome/${phagename}`);\n let genesWithGC = await getPhameratorData(`/genes/${phagename}`);\n\n genome.genes = genesWithGC\n .map((gene) => {\n gene.position = (gene.start + gene.stop) / 2;\n gene.length = Math.abs(gene.stop - gene.start);\n if (gene.direction === \"forward\") {\n gene.sequence = genome.sequence.slice(gene.start - 1, gene.stop);\n } else if (gene.direction === \"reverse\") {\n gene.sequence = revComp(\n genome.sequence.slice(gene.start - 1, gene.stop)\n );\n }\n gene[\"GC%\"] = calcGC(gene.sequence);\n return gene;\n })\n .filter(\n (gene) =>\n (gene.direction === \"forward\" && gene.start < gene.stop) ||\n (gene.direction === \"reverse\" && gene.start < gene.stop)\n );\n // genome.genes = genesWithGC;\n\n return genome;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1663,"value":"\ncalcGC = (seq) => {\n let gcCounter = 0;\n for (let index = 0; index < seq.length; ++index) {\n if ([\"C\", \"G\"].includes(seq[index])) {\n gcCounter = gcCounter + 1;\n }\n }\n return (gcCounter / seq.length) * 100;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1686,"value":"revComp = (seq) => {\n let revComp = \"\";\n let revCompObj = { A: \"T\", C: \"G\", G: \"C\", T: \"A\" };\n for (let index = 0; index < seq.length; ++index) {\n revComp = revCompObj[seq[index]] + revComp;\n }\n return revComp;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1516,"value":"Plot.plot({\n color: {\n legend: true\n },\n marginLeft: 75,\n x: { label: \"Gene Position (bp) →\" },\n y: { label: \"↑ Gene Length (bp)\" },\n marks: [Plot.dot(genesWithGC, { x: \"position\", y: \"length\", fill: \"GC%\" })],\n caption: md`**Figure 6.** A scatter plot showing the relationship between length, position, and GC content for genes in phage *${selectedPhage}*. Source data set: *${dataset}*.`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1787,"value":"Plot.plot({\n color: {\n legend: true\n },\n marginLeft: 75,\n inset: 5,\n x: { label: \"Gene Position (bp) →\" },\n y: { label: \"↑ Gene Length (bp)\" },\n marks: [Plot.dot(gcPlotData, { x: \"position\", y: \"length\", fill: \"GC%\" })],\n caption: md`**Figure 7.** A scatter plot showing the relationship between length, position, and GC content for genes in cluster *${selectedCluster}*. Source data set: *${dataset}*.`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2185,"value":"Because the number of points is too high, the plot's readability suffers from occlusion. To remedy this, let's use a hexagonal binning approach to group similar values. Each group is visualized by a hexagon whose area is proportional to the number of points it represents and whose color represents the mean GC% of the genes in its bin. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2171,"value":"Plot.plot({\n color: {\n legend: true\n },\n marginLeft: 75,\n // inset: 15,\n x: { label: \"Gene Position (bp) →\" },\n y: { label: \"↑ Gene Length (bp)\" },\n marks: [\n Plot.hexagon(\n gcPlotData,\n Plot.hexbin(\n { r: \"count\", fill: \"mean\" },\n { x: \"position\", y: \"length\", fill: \"GC%\" }\n )\n ),\n Plot.hexgrid()\n ],\n caption: md`**Figure 8.** A hexbin plot showing the relationship between length, position, and GC content for genes in cluster *${selectedCluster}*. Source data set: *${dataset}*.`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2124,"value":"## Wrapping Up\n\nThanks for reading this far, and congratulations on making it to the end! We've covered a number of topics in this notebook and have even built some useful visualization tools. Although it's a lot, this is really only an introduction.\n\nWe're using the tools and skills described in this notebook to build an interactive, engaging set of data analysis and visualization tools with the hope that we can both teach these methods and use them to advance our understanding of phage genomics. We'd love your help. If you find a mistake or have a suggestion, you can leave a public comment on any cell in this notebook by using the *add comment* option found in the menu in the left margin of the cell. You can also get in touch with us at [info@phamerator.org](mailto:info@phamerator.org). We _welcome_ collaboration and would love to work with you to build the tools that you need to keep your science moving forward. Please let us know how we can help.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":70,"value":"---\n\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":24,"value":"base64 = require(\"base-64\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"function setBackgroundColor(x) {\n // console.log(x);\n return htl.html`

${x}

`;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"function sparkbar(max) {\n return (x) => htl.html`

${x.toLocaleString(\"en\")}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":843,"value":"import { formValue } from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":901,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1236,"value":"getUser = () => {\n // formData.submit;\n return d3.json(`https://phamerator.org/api/profile`, {\n headers: new Headers({\n Authorization: `Basic ${base64.encode(\n `${formData.email}:${formData.password}`\n )}`\n })\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"getPhameratorData = (endpoint) => {\n // formData.submit;\n return d3.json(`https://phamerator.org/api/${dataset}${endpoint}`, {\n headers: new Headers({\n Authorization: `Basic ${base64.encode(\n `${formData.email}:${formData.password}`\n )}`\n })\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":740,"value":"user = getUser()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":753,"value":"styles = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2363,"value":"selectedPhageRootName = selectedPhage.replace(\"_Draft\", \"\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1031,"value":"import { simpleGenomeMap as map2 } with { selectedPhageRootName as selectedPhage } from \"@scresawn/simple-genome-map\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2371,"value":"selectedClusterGenes.sort((a, b) => b.length - a.length)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1363,"value":"selectedClusterGenes = {\n let genes = genesbycluster.map((g) => g);\n return genes\n .map((gene) => {\n gene.position = (gene.start + gene.stop) / 2;\n gene.length = Math.abs(gene.stop - gene.start);\n\n return gene;\n })\n .filter(\n (gene) =>\n (gene.direction === \"forward\" && gene.start < gene.stop) ||\n (gene.direction === \"reverse\" && gene.start < gene.stop)\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2397,"value":"Wraparound genes detected and removed: *${genesbycluster.length - selectedClusterGenes.length}*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 44:"$43:body"

Phamerator.org Login