2b:null 2c:["$","title",null,{"children":"[Dev] SARS-CoV-2 Phylogenetic Tree | Christopher Rucinski | Observable"}] 31:T14ad,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/tree function Tree( data, { // data is either tabular (array of objects) or hierarchy (nested objects) path, // as an alternative to id and parentId, returns an array identifier, imputing internal nodes id = Array.isArray(data) ? (d) => d.id : null, // if tabular data, given a d in data, returns a unique identifier (string) parentId = Array.isArray(data) ? (d) => d.parentId : null, // if tabular data, given a node d, returns its parent’s identifier children, // if hierarchical data, given a d in data, returns its children tree = d3.tree, // layout algorithm (typically d3.tree or d3.cluster) sort, // how to sort nodes prior to layout (e.g., (a, b) => d3.descending(a.height, b.height)) label = (d) => d.data.lineage.pango, // given a node d, returns the display name title, // given a node d, returns its hover text link, // given a node d, its link (if any) linkTarget = "_blank", // the target attribute for links (if any) width = 640, // outer width, in pixels height, // outer height, in pixels r = 3, // radius of nodes padding = 1, // horizontal padding for first and last column fill = "#999", // fill for nodes fillOpacity, // fill opacity for nodes stroke = "#555", // stroke for links strokeWidth = 1.5, // stroke width for links strokeOpacity = 0.4, // stroke opacity for links strokeLinejoin, // stroke line join for links strokeLinecap, // stroke line cap for links halo = "#fff", // color of label halo haloWidth = 4, // padding around the labels curve = d3.curveBumpX, // curve for the link background = "#fff", heightCoefficent = 1, weeks = 1 } = {} ) { // If id and parentId options are specified, or the path option, use d3.stratify // to convert tabular data to a hierarchy; otherwise we assume that the data is // specified as an object {children} with nested objects (a.k.a. the “flare.json” // format), and use d3.hierarchy. const root = path != null ? d3.stratify().path(path)(data) : id != null || parentId != null ? d3.stratify().id(id).parentId(parentId)(data) : d3.hierarchy(data, children); // Sort the nodes. if (sort != null) root.sort(sort); // Compute labels and titles. const descendants = root.descendants(); const L = label == null ? null : descendants.map((d) => label(d.data, d)); // Compute the layout. const dx = 18 * heightCoefficent; const dy = width / (root.height + padding); tree().nodeSize([dx, dy])(root); // Center the tree. let x0 = Infinity; let x1 = -x0; root.each((d) => { if (d.x > x1) x1 = d.x; if (d.x < x0) x0 = d.x; }); // Compute the default height. if (height === undefined) height = x1 - x0 + dx * 2; // Use the required curve if (typeof curve !== "function") throw new Error(`Unsupported curve`); const svg = d3 .create("svg") .attr("viewBox", [(-dy * padding) / 2, x0 - dx, width, height]) .attr("width", width) .attr("height", height) .attr("style", "max-width: 100%; height: auto; height: intrinsic;") .attr("font-family", "sans-serif") .attr("font-size", 10); svg .append("rect") .attr("width", "100%") .attr("height", "100%") .attr("fill", background); svg .append("g") .attr("fill", "none") .attr("stroke", stroke) .attr("stroke-opacity", strokeOpacity) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-width", strokeWidth) .selectAll("path") .data(root.links()) .join("path") .attr( "d", d3 .link(curve) .x((d) => d.y) .y((d) => d.x) ); const node = svg .append("g") .selectAll("a") .data(root.descendants()) .join("a") .attr("xlink:href", link == null ? null : (d) => link(d.data, d)) .attr("target", link == null ? null : linkTarget) .attr("transform", (d) => `translate(${d.y},${d.x})`); let fill_color = d3 .scaleDiverging() .domain(input(weeks)) .range(["#D52322", "lightgray", "black"]); // .interpolator(d3.interpolateRdYlGn); let node_radius = d3.scaleDiverging().domain(input(weeks)).range([7, 3, 2]); // .interpolator(d3.interpolateRdYlGn); let font_weight = d3 .scaleDiverging() .domain(input(weeks)) .range([1000, 500, 400]); let spannedWeeks = function (node) { return difference_in_weeks( node.data.lineage.designation_date, new Date(Date.now()) ); }; node .append("circle") .attr("fill", (d) => (weeks == 0 ? fill : fill_color(spannedWeeks(d.data)))) .attr("r", (d) => (weeks == 0 ? r : node_radius(spannedWeeks(d.data)))); if (title != null) node.append("title").text((d) => title(d.data, d)); if (L) node .append("text") .attr("dy", "0.32em") .attr("x", weeks == 0 ? 4 : 10) .attr("text-anchor", "start") .attr("paint-order", "stroke") .attr("stroke", halo) .attr("stroke-width", haloWidth) .attr("font-weight", (d) => weeks == 0 ? 400 : font_weight(spannedWeeks(d.data)) ) .text((d, i) => L[i]); return svg.node(); }32:T407,weeknumber = function (dateString) { const date = new Date(dateString); // 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 saturday = new Date(date); saturday.setUTCDate(date.getUTCDate() - date.getDay()); const sunday = new Date(saturday); sunday.setUTCDate(saturday.getUTCDate() + 6); const thursday = new Date(saturday); thursday.setUTCDate(saturday.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 = saturday.getFullYear() !== sunday.getFullYear(); // Calculate the week number return { weeks: weekNumber, year: year, bifurcated: isBifurcated }; }33:T44e,// 2022.06: Fabian Iwand's suggested improvement for Note: // 2023.03: Christopher Rucinski: added note types note = function note(contents, type = "warning") { const colors = { info: { background: "#FFFCE6", text: "#6B4E1F" }, warning: { background: "#FEF9E7", text: "#856404" }, error: { background: "#F8D7DA", text: "#721c24" } // Add more color options for other types as needed }; const color = colors[type] || colors["warning"]; // fallback to "info" if type not recognized const scope = type + "-" + DOM.uid("note").id; const style = document.head.appendChild(htl.html`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":743,"value":"styling = html`\n