2b:null 2c:["$","title",null,{"children":"[DEV] SARS-CoV-2 Phylogenetic Tree | Christopher Rucinski | Observable"}] 31:T47a,viewof display = dashboard(htl.html`

`)32:Tbdc,controls_styling = html``33:T404,Tree(find(searchterm ? searchterm.pango : "omicron"), { width: controls.value.modifiers.width * width, heightCoefficent: controls.value.modifiers.height, fontFamily: "monospace", fontSize: 11, label: (d) => d.data.lineage.pango, nodeFill: dateIndicator(scale, ["#D52322", "lightgray", "lightgray"], { nextCladeIndicator: controls.value.indicators.nextClade, predicateRange: ["black", "lightgray"] }), nodeRadius: dateIndicator(scale, [7, 4, 4], { defaultValue: 4 }), nodeTextOffsetX: dateIndicator(scale, [10, 6, 6], { defaultValue: 6 }), nodeFontWeight: dateIndicator(scale, [1000, 500, 400]), nodeFontStyle: dateIndicator(predicate, ["normal", "italic"], { predicate: (d) => available_nextclade_lineages.includes(d.data.lineage.pango), enable: controls.value.indicators.nextClade }), nodeTextColor: dateIndicator(scale, ["#D52322", "#A5A5A5", "#A5A5A5"], { nextCladeIndicator: controls.value.indicators.nextClade, overriddenRange: ["#D52322", "black", "black"] }) })34:T65c,viewof choice = { const options = [...Object.values(choices)]; return addCss( Inputs.radio(options, { format: (d) => htl.html`${d.label}`, width: 80, value: preset.search ? choices.Preset : choices.XBB }), ` :scope { --pill-background: rgba(0, 95, 135, 0.05); --pill-background-active: rgba(0, 95, 135, 0.25); --pill-text-color: var(--syntax-known-variable); --pill-border: var(--code-border); --pill-border-active: 2px solid rgba(0, 95, 135, 0.6); display: flex; } :scope > label { align-self: flex-center; margin-right: auto } // :scope > div { // display: grid; // grid-template-columns: repeat(4, minmax(10em, 1fr)); // gap: 10px 0px; // } :scope > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 10px; } :scope div label { line-height: 1.3em; display: block; } :scope div label:hover { } :scope div input { display: none; } :scope label > span { padding: 5px 8px 3px 8px; cursor: pointer; display: block; white-space: nowrap; text-overflow: hidden; outline: var(--pill-border); color: var(--pill-text-color); background:var(--pill-background); border-radius: 16px; display: flex; gap: 1ch; justify-content: space-between; font-family: monospace; font-weight: bold; } :scope label > span span { text-overflow: ellipsis; overflow: hidden; display: inline-block; } :scope div input:checked + span { background: var(--pill-background-active); outline: var(--pill-border-active); outline-style: solid; } :scope label a { font-style: italic; } ` ); }35:T4b3,viewof controls = wrapGUI( State.Tabs({ indicators: State.Section({ recency: State.Checkbox(true, { label: "Recently Added" }), nextClade: State.Checkbox(true, { label: "NextClade" }) }), // nextclade: State.Section( // { // instructions: State.Raw((h) => // h("p", null, `Show lineages available within NextClade`) // ), // enabled: State.Checkbox(true, { label: "Enable" }) // }, // { label: "NextClade" } // ), // recency: State.Section( // { // instructions: State.Raw((h) => // h("p", null, `Show lineages that have been added recently`) // ), // enabled: State.Checkbox(true, { label: "Enable" }), // color: "#D52322" // }, // { label: "Recently Added" } // ), modifiers: State.Section( { width: State.Slider(1, { min: 0.2, max: 1, step: 0.05, label: "Width Multiplier" }), height: State.Slider(1, { min: 0.6, max: 4, step: 0.05, label: "Height Multiplier" }) }, { label: "Chart Size" } ) }) )36:T4c1,viewof modifier = Inputs.form( { width: Inputs.range([0.2, 1], { label: "Width Multiplier", value: 1, step: 0.1, width: 140 }), height: Inputs.range([0.6, 4], { label: "Height Coefficient", value: 1, step: 0.1, width: 140 }), indicatorEnabled: Inputs.toggle({ label: html`Enable Indicators`, value: preset.indicator ?? 1, width: 140 }), date: Inputs.date({ label: "Since Week Including:", min: "2021-11-24", max: new Date(), value: preset.date ?? new Date(Date.now() - 7 * 24 * 60 * 60 * 1000), width: 140, required: true }) }, { template: ({ width, height, indicatorEnabled, date }) => htl.html`

${width}

${height}

${indicatorEnabled}

${date}

` } )37:T557,dateIndicator = (scale, range, options = {}) => { const { enable = controls.value.indicators.recency, nextCladeIndicator = false, domain = scale.domain(), defaultValue, node, predicate, predicateRange = ["black", "gray"], overriddenRange = range } = options || {}; const recency = (map) => (node) => map(weeksSince(node.data.lineage.designation_date)); const nextcladePredicate = (node) => available_nextclade_lineages.includes(node.data.lineage.pango) ? predicateRange[0] : predicateRange[1]; scale = scale.copy().domain(domain).range(range); if (predicate) { return (d) => (enable ? scale(predicate(d)) : defaultValue); } if (node) { return enable ? scale(node) : defaultValue; } console.log(`${enable}, ${nextCladeIndicator}`); if (nextCladeIndicator && enable) { return (node) => available_nextclade_lineages.includes(node.data.lineage.pango) ? predicateRange[0] : recency(scale)(node); } else if (nextCladeIndicator) { return (node) => nextcladePredicate(node); } else if (enable) { return (node) => recency(scale.copy().range(overriddenRange))(node); } return defaultValue; // return modifier.indicatorEnabled ? recency(scale) : (node) => nextclade(node); // : defaultValue === undefined // ? undefined // : defaultValue; }38:T456,Week = function (dateString) { const date = new Date(dateString); date.setUTCHours(0, 0, 0, 0); // Get the day of the week (0 = Sunday, 1 = Monday, etc.) const dayOfWeek = date.getUTCDay(); // Calculate specific days of the current week. // Thursday is used to calculate the week number. // Saturday and Sunday are used to calculate bifurcation const sunday = new Date(date); sunday.setUTCDate(date.getUTCDate() - date.getDay()); const saturday = new Date(sunday); saturday.setUTCDate(sunday.getUTCDate() + 6); const thursday = new Date(sunday); thursday.setUTCDate(sunday.getUTCDate() + 4); // Calculate the year of the current week const year = thursday.getUTCFullYear(); const weekNumber = Math.floor( (thursday.getTime() - new Date(year, 0, 1).getTime()) / (7 * 24 * 60 * 60 * 1000) ) + 1; const isBifurcated = sunday.getFullYear() !== saturday.getFullYear(); // Calculate the week number return { number: weekNumber, year: year, bifurcated: isBifurcated, date: { start: sunday, end: saturday } }; }39:T14bf,stylesheet = html``3a:T7b7,function wrapGUI(state, options) { const root = document.createElement("div"); const gui = GUI( state, Object.assign( { root: root, containerCSS: "max-width:600px", theme: Object.assign({}, (options || {}).theme, { fontFamily: "'Helvetica', sans-serif", fontSize: "12px", fontColor: "black", controlBgColor: "white", controlBorderRadius: "2px", controlBorderColor: "#aaa", fieldBgColor: "white", fieldHoverColor: "#f8f8f8", fieldActiveColor: "#ddd", fieldBorderColor: "#ccc", fieldHeight: 35, sectionHeadingColor: "white", sectionHeadingBgColor: "#005F87", sectionHeadingHoverColor: "#005F87", sectionHeadingBorderColor: "#005F87", sectionHeadingHeight: 30, visibilityFontColor: "#fff", sliderThumbColor: "#005F87", focusBorderColor: "#888" }) }, options || {} ) ).$field.onChanges((e) => root.dispatchEvent(new CustomEvent("input"))); root.value = state; const checkboxInputs = root.querySelectorAll( '[class|="controlPanel"] input[type="checkbox" i]' ); function handleInputChange(e) { let target = e.target; let label = document.querySelector(`label[for="${target.id}"]`); label.textContent = `${target.checked ? "Enabled" : "Disabled"}`; target.insertAdjacentElement("afterend", label); } checkboxInputs.forEach((input) => { const label = document.createElement("label"); label.setAttribute("for", input.id); label.innerText = `${input.checked ? "Enabled" : "Disabled"}`; input.parentNode.insertBefore(label, input.parentNode.nextSibling); input.addEventListener("change", (event) => { const label = event.target.parentNode.querySelector("label"); label.textContent = event.target.checked ? "Enabled" : "Disabled"; }); }); return root; }3b:[] 2f:{"id":"8cdf5c4006b221da","slug":null,"title":"[DEV] SARS-CoV-2 Phylogenetic Tree","thumbnail":"82b2a3d717d63004a46ef159813e2ed909c69bb0b4519ffd311aa56e9c89ea0e","access_level":"public","create_time":"$D2023-04-12T12:31:57.175Z","update_time":"$D2023-04-16T09:21:10.242Z","view_time":null,"first_public_time":"$D2023-04-12T12:31:57.175Z","has_unpublished_edits":null,"fork":{"id":"d2c93d999d9ac25c","slug":"playground-sars-cov-2-phylogenetic-tree","title":"SARS-CoV-2 Phylogenetic Tree","owner":{"id":"df46c5c86daf47bd","login":"ciscorucinski","name":"Christopher Rucinski"}},"stars":0,"starred":false,"owner":{"type":"team","id":"df46c5c86daf47bd","login":"ciscorucinski","name":"Christopher Rucinski","avatar_url":"https://avatars-next.observableusercontent.com/a575afe6e009482f48cfc49961e6683f713910c6dd7b8ba698767cffc3989c6c","tier":"starter_2024"},"version":3068,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b23d8809910c4529","login":"ciscorucinski","name":"Christopher Rucinski","avatar_url":"https://avatars-next.observableusercontent.com/a575afe6e009482f48cfc49961e6683f713910c6dd7b8ba698767cffc3989c6c","tier":null}],"members":[{"type":"individual","id":"b23d8809910c4529","login":"ciscorucinski","name":"Christopher Rucinski","avatar_url":"https://avatars-next.observableusercontent.com/a575afe6e009482f48cfc49961e6683f713910c6dd7b8ba698767cffc3989c6c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"[DEV] SARS-CoV-2 Phylogenetic Tree","cells":[{"id":0,"value":"# [DEV] SARS-CoV-2 Phylogenetic Tree\n## Simplified Phylogenetic Tree for Omicron Lineages Twitter: [@ciscorucinski](https://twitter.com/CiscoRucinski)\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1103,"value":"Easily search and view the links between different Omicron lineages with ease. Go Full Screen by either (1) pressing the F key or (2) clicking the notebook menu icon ⋯ » View » View in fullscreen.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2002,"value":"information(html`\nSearching Guidance\n
\nSearching for BM.4, BA.2.75.3.4 or B.1.1.529.2.75.3.4 results in the same tree display.\n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2019,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2745,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":719,"value":"{\n let search = searchterm ? searchterm.pango : \"omicron\";\n\n let header = `# Phylogenetic Tree for ${search}`;\n return md`${header}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2614,"value":"controls.value.nextclade","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2447,"value":"scale.range([\"#D52322\", \"black\", \"black\"])(weeksSince(\"2023-04-10\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"# Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1490,"value":"## Viewof","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1852,"value":"viewof search = Inputs.search(lineage_list, {\n query: choice.value,\n placeholder: \"Lineage\",\n width: 500,\n label: md`Search 👉`\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2025,"value":"{\n display(\"searchbox\", viewof search, invalidation);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1075,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2050,"value":"{\n display(\"search-presets\", viewof choice, invalidation);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2295,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2047,"value":"{\n display(\"chart-modifier\", viewof controls, invalidation);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"viewof searchterm = Inputs.table(search, {\n header: {\n pango: \"PANGO\",\n partial_pango: \"Partial PANGO\",\n unaliased_pango: \"Unaliased PANGO\"\n },\n width: {\n pango: 100,\n partial_pango: 150,\n unaliased_pango: 200\n },\n maxWidth: 650,\n multiple: false,\n required: true,\n sort: \"unaliased_pango\",\n value: search[0],\n rows: 11.7,\n layout: \"auto\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2044,"value":"{\n display(\"search-table\", viewof searchterm, invalidation);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"lineages = fetch(\n \"https://raw.githubusercontent.com/ciscorucinski/SARS-CoV-2_Variant_Designation_Tree/master/files/tree.json\"\n)\n .then((response) => response.json())\n .then((response) => response.root)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2172,"value":"nextclade_lineages = d3.csv(\n \"https://raw.githubusercontent.com/ciscorucinski/SARS-CoV-2_Variant_Designation_Tree/master/files/nextclade/available_lineages.txt\",\n { header: false }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2176,"value":"available_nextclade_lineages = d3\n .csv(\n \"https://raw.githubusercontent.com/ciscorucinski/SARS-CoV-2_Variant_Designation_Tree/master/files/nextclade/available_lineages.txt\",\n { header: false }\n )\n .then(function (data) {\n var parsedData = data.map(function (d) {\n return Object.values(d)[0];\n });\n return parsedData;\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"root = d3.hierarchy(lineages)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"lineage_list = {\n const lineages = [];\n root.eachBefore((d) =>\n lineages.push({\n pango: d.data.lineage.pango,\n partial_pango: d.data.lineage.partial,\n unaliased_pango: d.data.lineage.unaliased\n })\n );\n lineages.push({\n pango: \"recombinants\",\n partial_pango: \"recombinants\",\n unaliased_pango: \"recombinants\"\n });\n return lineages;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"## Code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":34,"value":"find = function find(lineage, searchType = Pango.PANGO) {\n if (lineage === \"recombinants\") {\n var copiedTree = { ...lineages };\n var filtered = copiedTree.children.filter(function (value, index, array) {\n return value.id[0] === \"X\";\n });\n copiedTree.children = filtered;\n copiedTree.lineage = {\n pango: \"recombinants\",\n partial: \"recombinants\",\n unaliased: \"recombinants\",\n designation_date: null\n };\n return d3.hierarchy(copiedTree);\n }\n return d3\n .hierarchy(lineages)\n .copy()\n .find((d) => {\n switch (searchType) {\n case Pango.PANGO:\n return d.data.lineage.pango === lineage;\n case Pango.PARTIAL:\n return d.data.lineage.partial === lineage;\n case Pango.UNALIASED:\n return d.data.lineage.unaliased === lineage;\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"class Pango {\n static PANGO = new Pango(\"pango\");\n static PARTIAL = new Pango(\"partial\");\n static UNALIASED = new Pango(\"unaliased\");\n\n constructor(name) {\n this.name = name;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1077,"value":"choices = {\n var queryChoice = {};\n if (preset.search) {\n queryChoice = {\n Preset: {\n label: \"URL Search Query\",\n value: preset.search\n }\n };\n }\n const specialChoices = {\n Omicron: {\n label: \"Variants Containing Omicron\",\n value: \"omicron\"\n },\n Recombinants: {\n label: \"Omicron Recombinants\",\n value: \"recombinants\"\n }\n };\n const baseChoices = {\n B_1_1_529: {\n label: \"B.1.1.529\",\n value: \"B.1.1.529\"\n },\n BA_2: {\n label: \"BA.2\",\n value: \"BA.2\"\n },\n BA_5: {\n label: \"BA.5\",\n value: \"BA.5\"\n },\n BA_2_75: {\n label: \"BA.2.75\",\n value: \"BA.2.75\"\n },\n BQ_1: {\n label: \"BQ.1\",\n value: \"BQ.1\"\n },\n BF: {\n label: \"BF.*\",\n value: \"BA.5.2.1\"\n },\n BN: {\n label: \"BN.*\",\n value: \"BA.2.75.5\"\n },\n XBB: {\n label: \"XBB\",\n value: \"XBB\"\n }\n };\n return { ...baseChoices, ...queryChoice, ...specialChoices };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1071,"value":"preset = {\n const url = new URL(document.baseURI);\n return {\n search: url.searchParams.get(\"search\") ?? undefined,\n indicator: url.searchParams.get(\"indicator\")\n ? ![\"false\", \"no\", \"off\", \"0\", 0].includes(\n url.searchParams.get(\"indicator\")?.toLowerCase()\n )\n : undefined,\n date: url.searchParams.get(\"date\") ?? undefined\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2161,"value":"### D3 Scale","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1280,"value":"function divergingDomainOn(week) {\n const today = new Date(Date.now());\n const weeks = Span(\"2021-11-24\", today).numberWeeks;\n return [1, week + 1, weeks];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1275,"value":"scale = d3.scaleDiverging().domain(divergingDomainOn(weeksSince(modifier.date)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2586,"value":"predicate = d3.scaleOrdinal().domain([true, false])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1601,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"function spannedWeeks(week1, week2) {\n const yearDiff = week2.year - week1.year;\n const spanned = yearDiff * 52 + (week2.number - week1.number) + 1;\n\n return {\n numberWeeks: spanned,\n range: {\n start: week1.date.start,\n end: week2.date.end\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"Span = function (dateString1, dateString2) {\n return spannedWeeks(Week(dateString1), Week(dateString2));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1278,"value":"weeksSince = function (node) {\n const today = new Date(Date.now());\n return Span(node, today).numberWeeks;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"## Styling","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1025,"value":"code_style","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1065,"value":"Phylogenetic_Tree_Search_style","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1365,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1069,"value":"addCss = (element, css) => {\n const scope = DOM.uid().id;\n element.classList.add(scope);\n element.appendChild(html`