2e:null 2f:["$","title",null,{"children":"Plant mitochondrial assembly complexity | Max Brown | Observable"}] 34:T803e,function mitochondrial_tree_model_radial({ treeText, recombData, // [{ sp, graph_type, total_seq_len, interspersed_frac, gp_I_II_intron_count, percent_plastid_in_mito }, ...] width = 900, height = 900, radialMargin = 20, radialMode = "outer", // "phylo" or "outer" treeScale = 0.75, // shrink the phylogeny (0.5–0.9 sensible) dotRadius, // tip nodes size highlightTips = [], // optional ids/labels highlightStroke = "#1f77b4", highlightWidth = 3, classMap = new Map(), orderMap = new Map() }) { // ===== GUARDS ===== if (width !== height) throw new Error("Radial layout expects a square canvas: width === height."); if (radialMode !== "phylo" && radialMode !== "outer") throw new Error("radialMode must be either 'phylo' or 'outer'"); const isOuter = radialMode === "outer"; // ===== PARSE & LAYOUT TREE ===== const parsedTree = lw.readTree(treeText); const rad = lw.radialLayout(parsedTree, { angleStrategy: "fan", arcsStyle: "fan" }); // visuals const DOT_R = dotRadius; const END_CAP = 0; const strokeWidth = 1; // bounds/scales const maxRadius = d3.max(rad.data, (d) => d.r) ?? 0; const scaleRadial = maxRadius + 2 * radialMargin; const w = width, h = height; const centerX = w / 2, centerY = h / 2; const xScaleRadial = d3 .scaleLinear() .domain([-scaleRadial, scaleRadial]) .range([0, w]); const yScaleRadial = d3 .scaleLinear() .domain([-scaleRadial, scaleRadial]) .range([h, 0]); // data-radius → px; tree version applies uniform shrink const radiusPx = (r) => r * (w / (2 * scaleRadial)); const radiusPxTree = (r) => treeScale * radiusPx(r); // indexes/helpers const byId = new Map(rad.data.map((d) => [d.thisId, d])); const tips = rad.data .filter((d) => d.isTip) .sort((a, b) => d3.ascending(a.angle, b.angle)); const norm = (s) => s.replace(/\s+/g, "_").toLowerCase(); // If you see a constant rotation between tree and bars, tweak this (radians) const ANGLE_SHIFT = 0; // try 0, Math.PI, or Math.PI/2 if needed // Helper to keep everything on the same angular frame as the tree const shift = (a) => a + ANGLE_SHIFT; const tipMaxR = tips.length ? d3.max(tips, (d) => d.r) : 0; const tipById = new Map(tips.map((d) => [d.thisId, d])); const tipByLabel = new Map(tips.map((d) => [d.thisLabel, d])); const childIdOf = (spoke) => spoke.childId ?? spoke.thisId ?? spoke.id1 ?? null; // handy: one global lookup for all species stats const dataBySp = new Map(recombData.map((d) => [norm(d.sp), d])); // assembly type lookups for tip styling const typeBySp = new Map( recombData.map((d) => [norm(d.sp), d.graph_type || "unknown"]) ); const typeColor = new Map([ ["simple", "white"], ["complex", "#bcc0c4"], ["multipartite", "black"], ["unknown", "#555"] ]); const typeRadius = new Map([ ["simple", 2], ["complex", 2], ["multipartite", 2] ]); // rotate the tree so it aligns with bars/clade rings (which use ANGLE_SHIFT) const TREE_ROT = -ANGLE_SHIFT; // radians const rot = (x, y, a = TREE_ROT) => { const ca = Math.cos(a), sa = Math.sin(a); return [x * ca - y * sa, x * sa + y * ca]; }; const add = (ang, a = TREE_ROT) => ang + a; // for polar angles function shortenSpokePx(x0, y0, x1, y1) { const X0 = xScaleRadial(x0 * treeScale), Y0 = yScaleRadial(y0 * treeScale); const X1 = xScaleRadial(x1 * treeScale), Y1 = yScaleRadial(y1 * treeScale); const dx = X1 - X0, dy = Y1 - Y0; const len = Math.hypot(dx, dy) || 1; const t = Math.max(0, (len - END_CAP) / len); return { X0, Y0, X1s: X0 + dx * t, Y1s: Y0 + dy * t }; } // ===== SVG ROOT ===== const svg = d3 .create("svg") .attr("width", w) .attr("height", h) .attr("font-family", "sans-serif") .attr("font-size", 10); const group = svg.append("g"); // overlay (for optional highlights) const staticLines = svg.append("g").attr("class", "phylo_static_lines"); const staticArcs = svg.append("g").attr("class", "phylo_static_arcs"); // ===== ARCS (parent circles) ===== group .append("g") .attr("class", "phylo_arcs") .selectAll("path") .data(rad.arcs) .join("path") .attr("d", (d) => d.sweep == null ? lw.describeArc( centerX, centerY, radiusPxTree(d.radius), add(d.start), add(d.end) ) : lw.describeArcSweep( centerX, centerY, radiusPxTree(d.radius), add(d.start), add(d.end), d.sweep ) ) .attr("fill", "none") .attr("stroke", "#777") .attr("stroke-width", strokeWidth); // screen-space endpoint of each tip spoke (after shortenSpokePx) const tipEndPx = new Map(); // tipId -> {x: X1s, y: Y1s} // ===== RADII (spokes) ===== group .append("g") .attr("class", "phylo_radii") .selectAll("line") .data(rad.radii) .join("line") .each(function (s) { let x0 = s.x0, y0 = s.y0; let x1 = s.x1, y1 = s.y1; const cid = childIdOf(s); const node = cid != null ? byId.get(cid) : undefined; const isTipSpoke = !!(node && node.isTip); if (isOuter && isTipSpoke) { const r = tipMaxR; x1 = r * Math.cos(add(node.angle)); y1 = r * Math.sin(add(node.angle)); } // rotate both endpoints by TREE_ROT for visual alignment [x0, y0] = rot(x0, y0); [x1, y1] = rot(x1, y1); const { X0, Y0, X1s, Y1s } = shortenSpokePx(x0, y0, x1, y1); d3.select(this) .attr("x1", X0) .attr("y1", Y0) .attr("x2", X1s) .attr("y2", Y1s) .attr("stroke", "#777") .attr("stroke-width", strokeWidth); // ... inside the spokes loop, after computing X0,Y0,X1s,Y1s: if (isTipSpoke && node) { tipEndPx.set(node.thisId, { x: X1s, y: Y1s }); } }); // ===== Derive display angles from the exact tip endpoints ===== const tipsDisp = tips .map((d) => { const p = tipEndPx.get(d.thisId); const ang = Math.atan2((p?.y ?? 0) - centerY, (p?.x ?? 0) - centerX); // screen-space angle return { ...d, dispAngle: ang }; }) .sort((a, b) => d3.ascending(a.dispAngle, b.dispAngle)); // For convenience: const anglesDisp = tipsDisp.map((d) => d.dispAngle); // Half-bandwidth computed from *display* angles (handles seam) function halfBandwidthDisp(i) { const n = anglesDisp.length; const prev = anglesDisp[(i - 1 + n) % n]; const cur = anglesDisp[i]; const next = anglesDisp[(i + 1) % n]; let aPrev = prev, aNext = next, aCur = cur; if (prev > cur) aPrev -= 2 * Math.PI; if (next < cur) aNext += 2 * Math.PI; const gapPrev = aCur - aPrev; const gapNext = aNext - aCur; return 0.45 * Math.min(gapPrev, gapNext); } // ===== TIP DOTS (screen-pixel polar coordinates to match bars/arcs) ===== // ===== TIP DOTS — put circles exactly at the spoke endpoints ===== const tipDots = group .append("g") .attr("class", "phylo_tip_dots") .selectAll("circle") .data(tips) .join("circle") .each(function (d) { const p = tipEndPx.get(d.thisId); const cx = p ? p.x : xScaleRadial( (isOuter ? tipMaxR * Math.cos(d.angle) : d.x) * treeScale ); const cy = p ? p.y : yScaleRadial( (isOuter ? tipMaxR * Math.sin(d.angle) : d.y) * treeScale ); const t = typeBySp.get(norm(d.thisLabel)) || "unknown"; const r = typeRadius.get(t) || 3; const fill = typeColor.get(t) || "#555"; d3.select(this) .attr("cx", cx) .attr("cy", cy) .attr("r", r) .attr("fill", fill) .attr("stroke", "#000") .attr("stroke-width", 1.2); }); tipDots .selectAll("title") .data((d) => [d]) .join("title") .text((d) => d.thisLabel); // ====================================================================== // ================== CONCENTRIC METRIC TRACKS ========================= // ====================================================================== (function drawMetricTracks() { if (!Array.isArray(tips) || tips.length === 0) return; // ---- helpers ---- const getMetric = (label, key) => { const rec = dataBySp.get(norm(label)); return rec && rec[key] != null ? rec[key] : 0; }; // angular half-bandwidth per tip (prevents overlap) const angles = tips.map((d) => d.angle); function halfBandwidth(i) { const n = angles.length; const prev = angles[(i - 1 + n) % n]; const cur = angles[i]; const next = angles[(i + 1) % n]; // unwrap around seam let aPrev = prev, aNext = next, aCur = cur; if (prev > cur) aPrev -= 2 * Math.PI; if (next < cur) aNext += 2 * Math.PI; const gapPrev = aCur - aPrev; const gapNext = aNext - aCur; return 0.45 * Math.min(gapPrev, gapNext); } // Anchor tracks to the exact visual tip radius used by the tree // (tree uses treeScale * r, then x/y scales; this yields the same pixel radius) const tipRingR = radiusPxTree( isOuter ? tipMaxR : d3.max(tips, (d) => d.r) || 0 ); // ---- scales per metric ---- const labels = tips.map((d) => d.thisLabel); const lenMax = d3.max(labels, (l) => getMetric(l, "total_seq_len")) || 1; const fracMax = d3.max(labels, (l) => getMetric(l, "interspersed_frac")) || 1; const intronMax = d3.max(labels, (l) => { const I = getMetric(l, "gp_I_intron_count"); const II = getMetric(l, "gp_II_intron_count"); return (I || 0) + (II || 0); }) || 1; const plastidMax = d3.max(labels, (l) => getMetric(l, "percent_plastid_in_mito")) || 1; const tracks = [ { key: "total_seq_len", label: "Total mtDNA length (bp)", fill: "DarkSeaGreen", scale: d3.scaleLinear().domain([0, lenMax]) }, { key: "interspersed_frac", label: "Interspersed repeat (%)", fill: "SlateBlue", scale: d3.scaleLinear().domain([0, fracMax]) }, // --- stacked intron track (Group I + Group II) --- { key: "introns_stacked", label: "Group I/II introns (total)", fill: ["#101820", "#F2AA4C"], // two segment colours: stack: [ { key: "gp_I_intron_count", label: "Group I introns", fill: "#101820" }, { key: "gp_II_intron_count", label: "Group II introns", fill: "#F2AA4C" } ], scale: d3.scaleLinear().domain([0, intronMax]).nice() }, { key: "percent_plastid_in_mito", label: "Plastid in mito (%)", fill: "DarkSlateGray", scale: d3.scaleLinear().domain([0, plastidMax]).nice() } ]; // ---- layout: fit inside SVG ---- const N = tracks.length; const PAD_FROM_TIPS = 1; const RAIL_THICK = 6; const TRACK_GAP = 8; // --- space we need beyond the last bar track for clade arcs + labels --- const HAVE_CLASSES = classMap && classMap.size > 0; const HAVE_ORDERS = orderMap && orderMap.size > 0; const CLASS_PAD_R = 10; // radial offset of class arc from bars const ORDER_PAD_R = 24; // radial offset of order arc from bars const LABEL_OFFSET = 8; // label sits this much beyond its arc radius const SAFE_EDGE_PAD = 6; // keep a little inside the SVG edge // maximum extra radius we'll need (only if those rings are drawn) const OUTER_DECOR_PAD = HAVE_CLASSES || HAVE_ORDERS ? Math.max( HAVE_CLASSES ? CLASS_PAD_R + LABEL_OFFSET : 0, HAVE_ORDERS ? ORDER_PAD_R + LABEL_OFFSET : 0 ) + SAFE_EDGE_PAD : SAFE_EDGE_PAD; // use this shrunken available radius when sizing tracks const maxAvailR = Math.min(width, height) / 2 - OUTER_DECOR_PAD; const fixed = PAD_FROM_TIPS + N * (RAIL_THICK + TRACK_GAP); const maxGrow = Math.max(0, Math.floor((maxAvailR - tipRingR - fixed) / N)); tracks.forEach((t) => t.scale.range([0, maxGrow])); // per-track radii let ringStart = tipRingR + PAD_FROM_TIPS; tracks.forEach((t) => { t.railR0 = ringStart; t.railR1 = ringStart + RAIL_THICK; // rail thickness t.barR0 = t.railR1; // bars grow from here t.barR1 = t.barR0 + maxGrow; // max end ringStart = t.barR1 + TRACK_GAP; }); // donut-sector path (px radii, rad angles) function describeSector(cx, cy, r0, r1, a0, a1) { const large = (a1 - a0) % (2 * Math.PI) > Math.PI ? 1 : 0; const p0 = [cx + r1 * Math.cos(a0), cy + r1 * Math.sin(a0)]; const p1 = [cx + r1 * Math.cos(a1), cy + r1 * Math.sin(a1)]; const p2 = [cx + r0 * Math.cos(a1), cy + r0 * Math.sin(a1)]; const p3 = [cx + r0 * Math.cos(a0), cy + r0 * Math.sin(a0)]; return `M ${p0[0]} ${p0[1]} A ${r1} ${r1} 0 ${large} 1 ${p1[0]} ${p1[1]} L ${p2[0]} ${p2[1]} A ${r0} ${r0} 0 ${large} 0 ${p3[0]} ${p3[1]} Z`; } // ===== Bars aligned to tip endpoints ===== const bars = svg.append("g").attr("class", "metric_bars"); tipsDisp.forEach((tip, i) => { const a = shift(tip.dispAngle); // align to bars’ angular frame const hw = halfBandwidthDisp(i); tracks.forEach((t) => { if (!t.stack) { // single-colour bar (unchanged) const v = getMetric(tip.thisLabel, t.key); const grow = Math.max(0, t.scale(v)); if (grow <= 0) return; bars .append("path") .attr( "d", describeSector( centerX, centerY, t.barR0, t.barR0 + grow, a - hw, a + hw ) ) .attr("fill", t.fill) .attr("fill-opacity", 0.9) .attr("stroke", "none") .append("title") .text(tip.thisLabel); } else { // stacked segments (Group I then Group II) let rStart = t.barR0; t.stack.forEach((seg) => { const val = getMetric(tip.thisLabel, seg.key); const g = Math.max(0, t.scale(val)); if (g <= 0) return; bars .append("path") .attr( "d", describeSector( centerX, centerY, rStart, rStart + g, a - hw, a + hw ) ) .attr("fill", seg.fill) .attr("fill-opacity", 0.9) .attr("stroke", "none"); rStart += g; }); } }); }); // ===== Subtle dashed tick rings for each track ===== (function drawTickRings() { const rings = svg.append("g").attr("class", "metric_tick_rings"); tracks.forEach((t) => { // use the same tick values as the ruler; skip the baseline (0) const tickVals = t.scale .ticks(3) .filter((tv) => tv > t.scale.domain()[0]); tickVals.forEach((tv) => { const rTick = t.barR0 + t.scale(tv); rings .append("circle") .attr("cx", centerX) .attr("cy", centerY) .attr("r", rTick) .attr("fill", "none") .attr("stroke", "#999") .attr("stroke-opacity", 0.35) .attr("stroke-width", 0.8) .attr("stroke-dasharray", "3,4"); }); }); })(); // ===== Per-track radial rulers (Y-axis for bar height) ===== (function drawRadialRulers() { const axes = svg.append("g").attr("class", "track_radial_axes"); // small helpers const polar = (r, a) => [ centerX + r * Math.cos(a), centerY + r * Math.sin(a) ]; // where to draw the ruler (angle 0 = rightmost) const aAxis = shift((4 * Math.PI) / 3); // << ruler tangent at angle 0, shifted to match tree const tickHalfAngle = 0.012; // ≈0.7° tangential half-length const labelRadialPad = 8; // px outward from tick line for label tracks.forEach((t) => { // ticks in data units → radii in px along the track const tickVals = t.scale.ticks(3); const fmt = t.key === "interspersed_frac" ? d3.format(".0%") : t.key === "percent_plastid_in_mito" ? (d) => d3.format(".0f")(d) + "%" : d3.format(".2s"); // guide line (thin) along the bar range const [gx0, gy0] = polar(t.barR0, aAxis); const [gx1, gy1] = polar(t.barR1, aAxis); axes .append("line") .attr("x1", gx0) .attr("y1", gy0) .attr("x2", gx1) .attr("y2", gy1) .attr("stroke", "#666") .attr("stroke-width", 1) .attr("stroke-opacity", 0.8); // ticks + labels tickVals.forEach((tv, i) => { if (i === 0) { // bit of a hack. return; } const rTick = t.barR0 + t.scale(tv); const [tx0, ty0] = polar(rTick, aAxis - tickHalfAngle); const [tx1, ty1] = polar(rTick, aAxis + tickHalfAngle); // tick mark (tangential) axes .append("line") .attr("x1", tx0) .attr("y1", ty0) .attr("x2", tx1) .attr("y2", ty1) .attr("stroke", "#666") .attr("stroke-width", 1); // label (radially outward) const [lx, ly] = polar(rTick, aAxis); const rotDeg = ((aAxis + Math.PI / 2) * 180) / Math.PI; const tangentPad = 8; const tx = lx + tangentPad * Math.cos(aAxis + Math.PI / 2); const ty = ly + tangentPad * Math.sin(aAxis + Math.PI / 2); axes .append("text") .attr("x", tx) .attr("y", ty) .attr("font-size", 10) .attr("fill", "#333") .attr("dominant-baseline", "middle") .attr("text-anchor", "start") .attr("transform", `rotate(${rotDeg}, ${tx}, ${ty})`) .text(fmt(tv)); }); }); // end tracks.forEach // ===== Top-left color swatch legend ===== (function drawTopLeftSwatches() { const PAD_X = 10; // distance from left edge const PAD_Y = 10; // distance from top edge const ROW_H = 18; // vertical spacing per row const SW = 12; // swatch size (square) const TEXT_X = 18; // text start x relative to swatch const FONT = 11; const legend = svg .append("g") .attr("class", "track_swatch_legend") .attr("transform", `translate(${PAD_X}, ${PAD_Y * 2})`); legend .append("text") .attr("x", 0) .attr("y", -PAD_Y) .attr("font-size", FONT) .attr("font-weight", 600) .attr("fill", "#222") .text("Variable (bars)"); // Rows tracks.forEach((t, i) => { const row = legend .append("g") .attr("transform", `translate(0, ${i * ROW_H})`); row .append("rect") .attr("width", SW) .attr("height", SW) .attr("rx", 2) .attr("ry", 2) .attr("fill", Array.isArray(t.fill) ? t.fill[1] : t.fill) .attr("stroke", "#222") .attr("stroke-width", 0.5) .attr("y", -SW / 2); // vertically center on row baseline row .append("text") .attr("x", TEXT_X) .attr("y", 0) .attr("dominant-baseline", "middle") .attr("font-size", FONT) .attr("fill", "#222") .text(t.label); }); // --- spacer then section header --- const rowsSoFar = legend.node().childNodes.length; const Y0 = rowsSoFar * ROW_H + 8; legend .append("text") .attr("x", 0) .attr("y", Y0) .attr("font-size", FONT) .attr("font-weight", 600) .attr("fill", "#222") .text("Assembly type (tips)"); const TYPES = [ ["simple", "white"], ["complex", "#bcc0c4"], ["multipartite", "black"] ]; TYPES.forEach(([label, col], i) => { const y = Y0 + (i + 1) * ROW_H; legend .append("circle") .attr("cx", SW / 2) .attr("cy", y - ROW_H / 2) .attr("r", typeRadius.get(label) * 2) .attr("fill", col) .attr("stroke", "#000") .attr("stroke-width", 1); legend .append("text") .attr("x", TEXT_X) .attr("y", y - ROW_H / 2) .attr("dominant-baseline", "middle") .attr("font-size", FONT) .attr("fill", "#222") .text( String(label).charAt(0).toUpperCase() + String(label).slice(1) ); }); })(); // ===== Clade arcs (classes + orders) — with deep debug ===== (function drawCladeArcs() { if (!tips.length) return; // ---------- CONFIG ---------- const PAD = 0.01; // arc visibility pad (radians) const GAP = 0.02; // enforced gap between neighboring arcs (radians) const BASE = shift(0); // same angular frame as bars/rulers const TWO = 2 * Math.PI; // radii (we already reserved space earlier) const outerBarR = tracks[tracks.length - 1].barR1; const rClass = outerBarR + CLASS_PAD_R; const rOrder = outerBarR + ORDER_PAD_R; const ARC_COLOR = "#000", ARC_OPACITY = 0.22, ARC_W = 4, LABEL_OFFSET = 8; // ---------- small helpers ---------- const toDeg = (a) => (a * 180) / Math.PI; function wrapToBase(a) { let x = a; while (x < BASE) x += TWO; while (x >= BASE + TWO) x -= TWO; return x; } function canonArc(a0, a1) { let s = wrapToBase(a0), e = wrapToBase(a1); if (e < s) e += TWO; return [s, e]; } function minimalCoverArc(angles) { const sx = d3.sum(angles, (a) => Math.cos(a)); const sy = d3.sum(angles, (a) => Math.sin(a)); const c = Math.atan2(sy, sx); const rel = angles .map((a) => { let d = a - c; while (d <= -Math.PI) d += TWO; while (d > Math.PI) d -= TWO; return d; }) .sort((a, b) => a - b); return [c + rel[0], c + rel[rel.length - 1]]; } const norm = (s) => String(s || "") .replace(/\s+/g, "_") .toLowerCase(); // map normalized label -> *display* angle (unshifted) const angleByLabel = new Map( tipsDisp.map((d) => [norm(d.thisLabel), d.dispAngle]) ); // draw small debug markers along a ring at given angles function debugDots(anglesShifted, radius, color = "red") { const g = svg.append("g").attr("class", "debug_clade_dots"); anglesShifted.forEach((a) => { const x = centerX + radius * Math.cos(a); const y = centerY + radius * Math.sin(a); g.append("circle") .attr("cx", x) .attr("cy", y) .attr("r", 2.2) .attr("fill", color); }); } // draw tiny ticks at arc endpoints function debugArcTicks(a0, a1, radius, color = "cyan") { const g = svg.append("g").attr("class", "debug_clade_ticks"); [a0, a1].forEach((a) => { const x = centerX + radius * Math.cos(a); const y = centerY + radius * Math.sin(a); g.append("line") .attr("x1", x) .attr("y1", y) .attr("x2", x + 8 * Math.cos(a + Math.PI / 2)) .attr("y2", y + 8 * Math.sin(a + Math.PI / 2)) .attr("stroke", color) .attr("stroke-width", 1.5); }); } function buildArcsFrom(map, labelForLog) { const arcs = []; for (const [name, list] of map.entries()) { // gather native angles for all labels we can match const wanted = list.map(norm); const foundAngles = []; const missing = []; for (const key of wanted) { const a = angleByLabel.get(key); if (a == null) missing.push(key); else foundAngles.push(a); } // tight cover (native) → pad → shift → canonicalize let [a0_nat, a1_nat] = minimalCoverArc(foundAngles); let a0_pad = a0_nat - PAD, a1_pad = a1_nat + PAD; let a0_sh = shift(a0_pad), a1_sh = shift(a1_pad); const [a0, a1] = canonArc(a0_sh, a1_sh); arcs.push({ name, a0, a1 }); // canonical span in display frame } return arcs; } function enforceGapCanonical(arcs, gap = GAP) { if (arcs.length < 2) return arcs; const xs = [...arcs].sort((p, q) => d3.ascending(p.a0, q.a0)); for (let i = 0; i < xs.length; i++) { const cur = xs[i]; const nxt = xs[(i + 1) % xs.length]; const curEnd = cur.a1; const nxtStart = i + 1 < xs.length ? nxt.a0 : nxt.a0 + TWO; const overlap = curEnd + gap - nxtStart; if (overlap > 0) { const push = overlap / 2; cur.a1 -= push; nxt.a0 += push; } } return xs; } function arcPath(cx, cy, r, a0, a1, sweep = 1) { // normalize delta into [0, 2π) let da = a1 - a0; const TWO = 2 * Math.PI; da = ((da % TWO) + TWO) % TWO; const large = da > Math.PI ? 1 : 0; const x0 = cx + r * Math.cos(a0), y0 = cy + r * Math.sin(a0); const x1 = cx + r * Math.cos(a1), y1 = cy + r * Math.sin(a1); return `M ${x0} ${y0} A ${r} ${r} 0 ${large} ${sweep} ${x1} ${y1}`; } function drawRing(arcs, radius, fontSize) { const spaced = enforceGapCanonical(arcs, GAP); spaced.forEach(({ name, a0, a1 }) => { svg .append("path") .attr("d", arcPath(centerX, centerY, radius, a0, a1, 1)) .attr("fill", "none") .attr("stroke", ARC_COLOR) .attr("stroke-opacity", ARC_OPACITY) .attr("stroke-width", ARC_W) .attr("stroke-linecap", "round"); const mid = (a0 + a1) / 2; const x = centerX + (radius + LABEL_OFFSET) * Math.cos(mid); const y = centerY + (radius + LABEL_OFFSET) * Math.sin(mid); let deg = toDeg(mid) + 90; if (deg > 90 && deg < 270) deg -= 180; svg .append("text") .attr("x", x) .attr("y", y) .attr("font-size", fontSize) .attr("fill", "#333") .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .attr("transform", `rotate(${deg}, ${x}, ${y})`) .text(name); }); } const classArcs = classMap && classMap.size ? buildArcsFrom(classMap, "classMap") : []; const orderArcs = orderMap && orderMap.size ? buildArcsFrom(orderMap, "orderMap") : []; if (classArcs.length) drawRing(classArcs, rClass, 12); if (orderArcs.length) drawRing(orderArcs, rOrder, 12); })(); })(); // ====== Interactivity: hover highlight + tooltip per species sector ====== (function addHoverSectors() { // radial band to highlight across ALL metric tracks const bandR0 = tracks[0].barR0; const bandR1 = tracks[tracks.length - 1].barR1; // Reuse the same sector path for highlight const hoverLayer = svg.append("g").attr("class", "hover_layer"); const highlight = hoverLayer .append("path") .attr("fill", "gold") .attr("fill-opacity", 0.15) .attr("stroke", "goldenrod") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .style("display", "none"); // HTML tooltip const tipDiv = d3 .select("body") .append("div") .attr("class", "radial-tooltip") .style("position", "absolute") .style("pointer-events", "none") .style("padding", "6px 8px") .style("font", "12px/1.3 sans-serif") .style("color", "#fff") .style("background", "rgba(0,0,0,0.85)") .style("border-radius", "4px") .style("box-shadow", "0 2px 8px rgba(0,0,0,0.35)") .style("opacity", 0); // format per track (mirrors your ruler formats) function fmtVal(track, v) { if (track.key === "interspersed_frac") return d3.format(".1%")(v); if (track.key === "percent_plastid_in_mito") return d3.format(".0f")(v) + "%"; if (track.key === "gp_I_II_intron_count") return d3.format(",")(v); // total_seq_len etc. // Use .2s but show full integer if small return v >= 1000 ? d3.format(".2s")(v) : String(v); } // build invisible hit sectors aligned to *display* angles const hits = hoverLayer.append("g").attr("class", "hit_sectors"); tipsDisp.forEach((tip, i) => { const a = shift(tip.dispAngle); const hw = halfBandwidthDisp(i); const a0 = a - hw; const a1 = a + hw; // invisible, but receives pointer events hits .append("path") .attr("d", describeSector(centerX, centerY, bandR0, bandR1, a0, a1)) .attr("fill", "transparent") .attr("pointer-events", "all") .on("mouseenter", (event) => { // highlight band highlight .attr( "d", describeSector(centerX, centerY, bandR0, bandR1, a0, a1) ) .style("display", null); const dRec = dataBySp.get(tip.thisLabel.replace(/\s+/g, "_").toLowerCase()) || {}; const I = dRec["gp_I_intron_count"] ?? 0; const II = dRec["gp_II_intron_count"] ?? 0; const IItotal = I + II; const lines = tracks.flatMap((t) => { if (!t.stack) { const v = dRec[t.key] ?? 0; return [ `

${t.label}: ${fmtVal( t, v )}

` ]; } else { // stacked intron details return [ `

${ t.label }: ${d3.format(",")(IItotal)}

`, `

• Group I: ${d3.format( "," )(I)}

`, `

• Group II: ${d3.format( "," )(II)}

` ]; } }); const tip_inner = tip.thisLabel; // for the gymnosperms const tip_ = String(tip_inner[0]).toUpperCase() + String(tip_inner).slice(1); const html = `

${tip_.replace( "_", " " )}

` + lines.join(""); tipDiv.html(html).style("opacity", 1); // initial position tipDiv .style("left", `${event.pageX + 12}px`) .style("top", `${event.pageY + 12}px`); }) .on("mousemove", (event) => { tipDiv .style("left", `${event.pageX + 12}px`) .style("top", `${event.pageY + 12}px`); }) .on("mouseleave", () => { highlight.style("display", "none"); tipDiv.style("opacity", 0); }); }); })(); })(); return svg.node(); }35:T3e23,// mitochondrial_tree_model = { // // ---------- ROBUST PANEL LAYOUT (4 panels) ---------- // let BAR_W = 110; // const BAR_GAP = 24; // const RIGHT_PAD = 30; // const NUM_PANELS = 4; // const innerW = width - margin.left - margin.right + 150; // const gapsW = (NUM_PANELS - 1) * BAR_GAP; // const wantBars = NUM_PANELS * BAR_W + gapsW + RIGHT_PAD; // // If bars don't fit, shrink BAR_W but keep a sensible minimum (e.g., 60px) // if (wantBars > innerW) { // const fitBarW = Math.floor((innerW - RIGHT_PAD - gapsW) / NUM_PANELS); // BAR_W = Math.max(60, fitBarW); // } // const totalBarsW = NUM_PANELS * BAR_W + gapsW; // // Place all bar panels flush-right within the inner plotting area // const barsLeft = margin.left + (innerW - totalBarsW); // // Whatever remains on the left belongs to the tree // const treePanelWidth = Math.max(1, barsLeft - margin.left - RIGHT_PAD); // // IMPORTANT: tree should always map left->right // xScale.range([0, treePanelWidth]); // // X positions for each bar panel (absolute SVG coords) // const barsX = Array.from( // { length: NUM_PANELS }, // (_, i) => barsLeft + i * (BAR_W + BAR_GAP) // ); // const [barsX0, barsX1, barsX2, barsX3] = barsX; // // Right edge of the last bar panel (for rails) // const rightOfBars = barsLeft + totalBarsW; // const svg = d3 // .create("svg") // .attr("width", width + margin.left + margin.right) // .attr("height", height + margin.top + margin.bottom) // .attr("font-family", "sans-serif") // .attr("font-size", 10); // const group = svg // .append("g") // .attr("transform", `translate(${margin.left},${margin.top})`); // const stroke_width = 1; // // draw horizontal lines // group // .append("g") // .attr("class", "phylo_lines") // .selectAll("lines") // .data(tree_df.data) // .join("line") // .attr("class", "lines") // .attr("x1", (d) => xScale(d.x0) - stroke_width / 2) // .attr("y1", (d) => yScale(d.y0)) // .attr("x2", (d) => xScale(d.x1) - stroke_width / 2) // .attr("y2", (d) => yScale(d.y1)) // .attr("stroke-width", stroke_width) // .attr("stroke", "#777"); // // draw vertical lines // group // .append("g") // .attr("class", "phylo_lines") // .selectAll("lines") // .data(tree_df.vertical_lines) // .join("line") // .attr("class", "lines") // .attr("x1", (d) => xScale(d.x0)) // .attr("y1", (d) => yScale(d.y0)) // .attr("x2", (d) => xScale(d.x1)) // .attr("y2", (d) => yScale(d.y1)) // .attr("stroke-width", stroke_width) // .attr("stroke", "#777"); // // draw nodes // const node_data = tree_df.data.filter((d) => d.isTip && d.x1 > 0); // // ---------- DATA PREP ---------- // // Helper used everywhere labels are matched // const norm = (s) => s.replace(/\s+/g, "_").toLowerCase(); // // Get tips in the *tree’s* vertical order // const tips = tree_df.data // .filter((d) => d.isTip) // .sort((a, b) => d3.ascending(a.y0 ?? a.y1, b.y0 ?? b.y1)); // // yBand follows the tree order exactly // const yBand = d3 // .scaleBand() // .domain(tips.map((d) => d.thisLabel)) // raw labels used for drawing // .range([margin.top, height - margin.bottom]) // .padding(0.2); // // Lookups for tip styling by graph_type // const typeBySp = new Map( // recombData.map((d) => [norm(d.sp), d.graph_type || "unknown"]) // ); // const typeColor = new Map([ // ["simple", "white"], // ["complex", "gray"], // ["multipartite", "black"], // ["unknown", "#555"] // ]); // const typeRadius = new Map([ // ["simple", 2], // ["complex", 3], // ["multipartite", 4], // ["unknown", 3] // ]); // const getType = (label) => typeBySp.get(norm(label)) || "unknown"; // // When you match external data, normalize both keys: // const dataBySp = new Map(recombData.map((d) => [norm(d.sp), d])); // const getMetric = (label, key) => { // const rec = dataBySp.get(norm(label)); // return rec && rec[key] != null ? rec[key] : 0; // }; // // Domains limited to species actually present in the tips // const labels = tips.map((d) => d.thisLabel); // // total_seq_len // const lenMax = d3.max(labels, (l) => getMetric(l, "total_seq_len")); // const xLen = d3 // .scaleLinear() // .domain([0, lenMax || 1]) // .range([0, BAR_W]); // // interspersed_frac (0–1) // const fracMax = d3.max(labels, (l) => getMetric(l, "interspersed_frac")); // const xFrac = d3 // .scaleLinear() // .domain([0, fracMax || 0.01]) // .range([0, BAR_W]); // // gp_I_II_intron_count (integer) // const intronMax = d3.max(labels, (l) => getMetric(l, "gp_I_II_intron_count")); // const xIntron = d3 // .scaleLinear() // .domain([0, intronMax || 1]) // .nice() // .range([0, BAR_W]); // // ---------- BAR PANEL 1: total_seq_len ---------- // const gLen = svg.append("g").attr("transform", `translate(${barsX0},0)`); // // Bars // gLen // .selectAll("rect") // .data(tips) // .join("rect") // .attr("x", 0) // .attr("y", (d) => yBand(d.thisLabel)) // .attr("width", (d) => xLen(getMetric(d.thisLabel, "total_seq_len"))) // .attr("height", yBand.bandwidth()) // .attr("fill", "DarkSeaGreen") // .attr("opacity", 0.8); // // Hide duplicate y labels (we already have them on the tree) // gLen // .append("g") // .attr("transform", `translate(0,0)`) // .call(d3.axisLeft(yBand).tickFormat(() => "")); // const bpFormat = (value) => { // const f = d3.format(".2s")(value); // e.g., "850k", "1.2M" // return f.replace("k", " kb").replace("M", " Mb").replace("G", " Gb"); // }; // // X axis // gLen // .append("g") // .attr("transform", `translate(0,${height - margin.bottom})`) // .call(d3.axisBottom(xLen).ticks(3).tickFormat(bpFormat)) // .call((g) => g.selectAll(".domain").attr("opacity", 0.5)); // gLen // .append("text") // .attr("x", BAR_W / 2) // .attr("y", height - margin.bottom + 40) // .attr("text-anchor", "middle") // .attr("font-size", 12) // .text("Total mtDNA length (bp)"); // // ---------- BAR PANEL 2: interspersed_frac ---------- // const gFrac = svg.append("g").attr("transform", `translate(${barsX1},0)`); // gFrac // .selectAll("rect") // .data(tips) // .join("rect") // .attr("x", 0) // .attr("y", (d) => yBand(d.thisLabel)) // .attr("width", (d) => xFrac(getMetric(d.thisLabel, "interspersed_frac"))) // .attr("height", yBand.bandwidth()) // .attr("fill", "SlateBlue") // .attr("opacity", 0.8); // gFrac // .append("g") // .attr("transform", `translate(0,0)`) // .call(d3.axisLeft(yBand).tickFormat(() => "")); // gFrac // .append("g") // .attr("transform", `translate(0,${height - margin.bottom})`) // .call(d3.axisBottom(xFrac).ticks(4).tickFormat(d3.format(".0%"))) // .call((g) => g.selectAll(".domain").attr("opacity", 0.5)); // gFrac // .append("text") // .attr("x", BAR_W / 2) // .attr("y", height - margin.bottom + 40) // .attr("text-anchor", "middle") // .attr("font-size", 12) // .text("Interspersed repeat (%)"); // // ---------- BAR PANEL 3: gp_I_II_intron_count ---------- // const gIntron = svg.append("g").attr("transform", `translate(${barsX2},0)`); // gIntron // .selectAll("rect") // .data(tips) // .join("rect") // .attr("x", 0) // .attr("y", (d) => yBand(d.thisLabel)) // .attr("width", (d) => // xIntron(getMetric(d.thisLabel, "gp_I_II_intron_count")) // ) // .attr("height", yBand.bandwidth()) // .attr("fill", "Tomato") // .attr("opacity", 0.8); // gIntron // .append("g") // .attr("transform", `translate(0,0)`) // .call(d3.axisLeft(yBand).tickFormat(() => "")); // gIntron // .append("g") // .attr("transform", `translate(0,${height - margin.bottom})`) // .call(d3.axisBottom(xIntron).ticks(4)) // .call((g) => g.selectAll(".domain").attr("opacity", 0.5)); // gIntron // .append("text") // .attr("x", BAR_W / 2) // .attr("y", height - margin.bottom + 40) // .attr("text-anchor", "middle") // .attr("font-size", 12) // .text("Group I/II intron count"); // // ---------- BAR PANEL 4: percent_plastid_in_mito ---------- // const gPlastid = svg.append("g").attr("transform", `translate(${barsX3},0)`); // // The values look like percents already (e.g. 4.0466) // // We'll keep them as-is and format with a % suffix. // const plastidMax = d3.max(labels, (l) => // getMetric(l, "percent_plastid_in_mito") // ); // const xPlastid = d3 // .scaleLinear() // .domain([0, plastidMax || 1]) // .nice() // .range([0, BAR_W]); // gPlastid // .selectAll("rect") // .data(tips) // .join("rect") // .attr("x", 0) // .attr("y", (d) => yBand(d.thisLabel)) // .attr("width", (d) => // xPlastid(getMetric(d.thisLabel, "percent_plastid_in_mito")) // ) // .attr("height", yBand.bandwidth()) // .attr("fill", "DarkSlateGray") // .attr("opacity", 0.8); // gPlastid // .append("g") // .attr("transform", `translate(0,0)`) // .call(d3.axisLeft(yBand).tickFormat(() => "")); // gPlastid // .append("g") // .attr("transform", `translate(0,${height - margin.bottom})`) // .call( // d3 // .axisBottom(xPlastid) // .ticks(4) // .tickFormat((d) => d3.format(".0f")(d) + "%") // ) // .call((g) => g.selectAll(".domain").attr("opacity", 0.5)); // gPlastid // .append("text") // .attr("x", BAR_W / 2) // .attr("y", height - margin.bottom + 40) // .attr("text-anchor", "middle") // .attr("font-size", 12) // .text("Plastid content in mito (%)"); // // ---------- CLADE / ORDER SPANS (draw off the first panel) ---------- // // ------ after you've defined `tips`, `yBand`, and barsX0/BAR_W/BAR_GAP ------ // // map from normalized -> rendered tip label // const tipByNorm = new Map(tips.map((d) => [norm(d.thisLabel), d.thisLabel])); // // helper: center y for a given raw species label, or null if absent // const yCenter = (label) => { // const rendered = tipByNorm.get(norm(label)); // if (!rendered) return null; // const y = yBand(rendered); // return y == null ? null : y + yBand.bandwidth() / 2; // }; // // generic span builder for a Map // function spansFrom(map) { // const out = []; // for (const [name, speciesList] of map.entries()) { // const ys = speciesList // .map(yCenter) // .filter((y) => y != null) // .sort(d3.ascending); // if (!ys.length) continue; // // full vertical span from first to last row // const y0 = ys[0] - yBand.bandwidth() / 2; // const y1 = ys[ys.length - 1] + yBand.bandwidth() / 2; // out.push({ name, y0, y1, yc: (y0 + y1) / 2 }); // } // return out; // } // // build spans from the current tip set/order // const classSpans = spansFrom(classMap); // Map // const orderSpans = spansFrom(orderMap); // Map // // pick absolute x positions (root SVG coords) // const cladeRailX = rightOfBars + 12; // const orderRailX = cladeRailX + 10; // // draw to ROOT svg (not a translated group), so x is absolute // svg // .selectAll(".clade-line") // .data(classSpans) // .join("line") // .attr("class", "clade-line") // .attr("x1", cladeRailX) // .attr("x2", cladeRailX) // .attr("y1", (d) => d.y0) // .attr("y2", (d) => d.y1) // .attr("stroke", "black") // .attr("stroke-width", 4) // .attr("stroke-opacity", 0.2); // svg // .selectAll(".clade-label") // .data(classSpans) // .join("text") // .attr("class", "clade-label") // .attr("x", cladeRailX + 6) // .attr("y", (d) => d.yc) // .attr("dy", "0.35em") // .attr("font-size", 13) // .attr("fill", "#333") // .text((d) => d.name); // svg // .selectAll(".order-line") // .data(orderSpans) // .join("line") // .attr("class", "order-line") // .attr("x1", orderRailX) // .attr("x2", orderRailX) // .attr("y1", (d) => d.y0) // .attr("y2", (d) => d.y1) // .attr("stroke", "black") // .attr("stroke-width", 4) // .attr("stroke-opacity", 0.2); // svg // .selectAll(".order-label") // .data(orderSpans) // .join("text") // .attr("class", "order-label") // .attr("x", orderRailX + 6) // .attr("y", (d) => d.yc) // .attr("dy", "0.35em") // .attr("font-size", 15) // .attr("fill", "#333") // .text((d) => d.name); // // TOOLTIP // // Create a tooltip DIV once // const tooltip = d3 // .select(document.body) // .append("div") // .style("position", "absolute") // .style("pointer-events", "none") // .style("background", "rgba(0,0,0,0.75)") // .style("color", "white") // .style("padding", "6px 8px") // .style("border-radius", "4px") // .style("font", "12px sans-serif") // .style("visibility", "hidden"); // // Draw nodes (graph_type colour/size) // group // .append("g") // .attr("class", "phylo_points") // .selectAll(".dot") // .data(node_data, (d) => d.thisLabel) // .join("circle") // .attr("class", "dot") // .attr("r", (d) => typeRadius.get(getType(d.thisLabel))) // .attr("cx", (d) => xScale(d.x1)) // .attr("cy", (d) => yScale(d.y1)) // .attr("stroke", "#222") // .attr("stroke-width", 1) // .attr("fill", (d) => typeColor.get(getType(d.thisLabel))) // .style("cursor", "default") // .on("mouseenter", function (event, d) { // const current = +d3.select(this).attr("r"); // d3.select(this) // .attr("data-origr", current) // .attr("r", current + 2); // const rec = dataBySp.get(norm(d.thisLabel)); // const extra = rec // ? `
graph type: ${ // rec.graph_type || "?" // } //
mt len: ${d3.format(",")( // rec.total_seq_len ?? 0 // )} bp //
interspersed%: ${d3.format(".1%")( // rec.interspersed_frac ?? 0 // )} //
plastid in mito: ${d3.format( // ".1f" // )(rec.percent_plastid_in_mito ?? 0)}%` // : ""; // tooltip // .html(`${d.thisLabel}${extra}`) // .style("visibility", "visible"); // }) // .on("mousemove", function (event) { // const { pageX, pageY } = event; // tooltip.style("left", pageX + 12 + "px").style("top", pageY + 12 + "px"); // }) // .on("mouseleave", function () { // const orig = +d3.select(this).attr("data-origr") || 3; // d3.select(this).attr("r", orig); // tooltip.style("visibility", "hidden"); // }); // const typeLegend = svg // .append("g") // .attr("class", "type-legend") // .attr( // "transform", // `translate(${margin.left + 10}, ${height - margin.top - 50})` // ); // [["simple"], ["complex"], ["multipartite"]].forEach(([t], i) => { // const g = typeLegend // .append("g") // .attr("transform", `translate(0, ${i * 20})`); // g.append("circle") // .attr("r", typeRadius.get(t)) // .attr("cx", 8) // .attr("cy", 8) // .attr("fill", typeColor.get(t)) // .attr("stroke", "#222"); // g.append("text") // .attr("x", 22) // .attr("y", 11) // .attr("font-size", 14) // .text(t.charAt(0).toUpperCase() + t.slice(1)); // }); // return svg.node(); // }36:[{"id":"0a03f111f34b517625e01f5f15e0bf178d59475bd949513bba970a0bb6217403410a236711fc520d8dd3512f1845bf4822297c25896ef127fe6731257dc2a817","href":"https://static.observableusercontent.com/files/0a03f111f34b517625e01f5f15e0bf178d59475bd949513bba970a0bb6217403410a236711fc520d8dd3512f1845bf4822297c25896ef127fe6731257dc2a817","name":"concatenated@3.dated.treefile","type":"application/octet-stream","lastModified":1784575712137.246,"size":14156},{"id":"bb67d6ef92091a29254a4d024220f836a56c031c07ba3ed6844f29330e8780942bfc131f3a6b6e6691245e45f6b73c5f265da82d0e26309c9efb0053e16a80bf","href":"https://static.observableusercontent.com/files/bb67d6ef92091a29254a4d024220f836a56c031c07ba3ed6844f29330e8780942bfc131f3a6b6e6691245e45f6b73c5f265da82d0e26309c9efb0053e16a80bf","name":"species_names_latest_lineages_formatted@2.txt","type":"text/plain","lastModified":1784575855471.497,"size":31490},{"id":"1b2ee36ee03aaba8fe5cbb5dfaa91abd701c3c00069e0a7d9549bb4f0daf3aa996bd81d4cfcd0ec9e8776b91f66969cc751b6e45879720c1e7a0c3c3db58ec6f","href":"https://static.observableusercontent.com/files/1b2ee36ee03aaba8fe5cbb5dfaa91abd701c3c00069e0a7d9549bb4f0daf3aa996bd81d4cfcd0ec9e8776b91f66969cc751b6e45879720c1e7a0c3c3db58ec6f","name":"merged_basic_stats@2.tsv","type":"text/tab-separated-values","lastModified":1784575755685.202,"size":40263},{"id":"4ee446bf4b4e124111f33d2f4825c5c122ea290160c1c4ab9a1f7af9e2af34bfce3613bc3076f262b04a751d38168bcc87774b10b7a40274343352e8149aaf8d","href":"https://static.observableusercontent.com/files/4ee446bf4b4e124111f33d2f4825c5c122ea290160c1c4ab9a1f7af9e2af34bfce3613bc3076f262b04a751d38168bcc87774b10b7a40274343352e8149aaf8d","name":"merged_basic_stats@1.tsv","type":"text/tab-separated-values","lastModified":1759246806454.995,"size":39256},{"id":"cf16b404905fe0ddad94502589b906cff3738bf8958ef1f9fcb1832b0583cc449c29d9d788e8ba4c9a3cc6903f2dc8ef01e66cf10d8fd07d498c7b0657ccfa50","href":"https://static.observableusercontent.com/files/cf16b404905fe0ddad94502589b906cff3738bf8958ef1f9fcb1832b0583cc449c29d9d788e8ba4c9a3cc6903f2dc8ef01e66cf10d8fd07d498c7b0657ccfa50","name":"species_names_latest_lineages_formatted@1.txt","type":"text/plain","lastModified":1759246895636.791,"size":31185},{"id":"5d7d4aa25c4fc39505ecf375a5a09a9f08d79f40b914b6fac96dfcb80cbefceb741e07795ce1dfa27e34e8b3de8ccc3fabede764b42bac123de317d0739a1926","href":"https://static.observableusercontent.com/files/5d7d4aa25c4fc39505ecf375a5a09a9f08d79f40b914b6fac96dfcb80cbefceb741e07795ce1dfa27e34e8b3de8ccc3fabede764b42bac123de317d0739a1926","name":"concatenated@2.dated.treefile","type":"application/octet-stream","lastModified":1761146317951.729,"size":11806},{"id":"e1cc164235b1a0341678f96a4e6ef54c796ccb4122dda3583424ebcbecb0397c05bcaf7780b4d7715e1feb92a825f015f2cc0b3f8ab51df9e5bc4bcb6c169d97","href":"https://static.observableusercontent.com/files/e1cc164235b1a0341678f96a4e6ef54c796ccb4122dda3583424ebcbecb0397c05bcaf7780b4d7715e1feb92a825f015f2cc0b3f8ab51df9e5bc4bcb6c169d97","name":"merged_basic_stats@3.tsv","type":"text/tab-separated-values","lastModified":1761732469545.014,"size":39878}] 32:{"id":"1ebf38785f161243","slug":"plant-mitochondrial-assembly-complexity","title":"Plant mitochondrial assembly complexity","thumbnail":"97eee91f348787cdb12efa76e3a2c35e5acf4616dea0a3f1e7ccd07e5ddbfe0e","access_level":"public","create_time":"$D2025-07-28T13:56:37.839Z","update_time":"$D2026-07-30T19:27:54.337Z","view_time":null,"first_public_time":"$D2025-10-01T13:49:16.231Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"8736e7a8f8672f04","login":"euphrasiologist","name":"Max Brown","avatar_url":"https://avatars-next.observableusercontent.com/592e4ba1993897720ef131d64a03c52cceee6126e1bc291cc61355043552c850","tier":"starter_2024"},"version":910,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"448dbf923c3ebf2f","login":"euphrasiologist","name":"Max Brown","avatar_url":"https://avatars-next.observableusercontent.com/592e4ba1993897720ef131d64a03c52cceee6126e1bc291cc61355043552c850","tier":null}],"members":[{"type":"individual","id":"448dbf923c3ebf2f","login":"euphrasiologist","name":"Max Brown","avatar_url":"https://avatars-next.observableusercontent.com/592e4ba1993897720ef131d64a03c52cceee6126e1bc291cc61355043552c850","tier":null,"role":"editor"},{"type":"team","id":"8736e7a8f8672f04","login":"euphrasiologist","name":"Max Brown","avatar_url":"https://avatars-next.observableusercontent.com/592e4ba1993897720ef131d64a03c52cceee6126e1bc291cc61355043552c850","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Plant mitochondrial assembly complexity","cells":[{"id":0,"value":"# Plant mitochondrial assembly complexity","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":569,"value":"Here we plot a mitochondrial gene phylogeny across land plants, and annotate the tips with the complexity of the genome assembly. On the right are four bar plots of the covariates which are most likely driving this mitochondrial genome complexity. These are, genome size, interspersed repeats, intron count, and plastid/mitochondrion sequence sharing. Simple mitochondrial assemblies are either single linear or circular contigs, multipartite is more than one separately assembled molecule, and complex is a branched assembly.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":578,"value":"mitochondrial_tree_model_radial_plot = mitochondrial_tree_model_radial({\n treeText: tree,\n recombData: recombData,\n dotRadius: 100,\n width: 800,\n height: 800,\n orderMap: orderMap,\n radialMargin: 40\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":576,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"## Scales","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":91,"value":"maxX = d3.max(tree_df.data, (d) => d.x1) // tree depth","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"minY = d3.min(tree_df.data, (d) => d.y1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"maxY = d3.max(tree_df.data, (d) => d.y1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"margin = ({ top: 20, right: 400, bottom: 20, left: 25 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"height = (maxY + 1) * 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"width = 1000;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"xScale = d3\n .scaleLinear()\n .domain([0, maxX]) // branch length 0 → max\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"yScale = d3\n .scaleLinear()\n .domain([minY - 1, maxY + 1])\n .range([0 - 3, height - margin.bottom - margin.top + 3])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"tree_df = lw.rectangleLayout(test)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":476,"value":"// // reorder the nodes of the tree\n// test = ((r) => {\n// const memo = new Map();\n// const sizeOf = (n) =>\n// memo.get(n) ??\n// (memo.set(\n// n,\n// n.children?.length ? n.children.reduce((s, c) => s + sizeOf(c), 0) : 1\n// ),\n// memo.get(n));\n// const clone = (n) => {\n// const m = { ...n }; // shallow clone node\n// const kids = (n.children || [])\n// .slice() // don't touch original array\n// .sort((a, b) => sizeOf(a) - sizeOf(b)) // ascending => big clades go down\n// .map((c) => {\n// const k = clone(c);\n// k.parent = m;\n// return k;\n// });\n// m.children = kids;\n// m.size = kids.length ? kids.reduce((s, c) => s + (c.size || 1), 0) : 1;\n// return m;\n// };\n// const rr = clone(r);\n// rr.parent = null; // clean root parent\n// return rr;\n// })(inner)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"// inner = lw.readTree(tree)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"tree = FileAttachment(\"concatenated@3.dated.treefile\").text()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"recombMap = new Map(\n recombData.map((d) => [d.sp.toLowerCase(), d.total_seq_len])\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"recombData = d3.tsvParse(\n await FileAttachment(\"merged_basic_stats@2.tsv\").text(),\n (d) => {\n return {\n sp: d.species,\n graph_type: d.graph_type,\n avg_gc: +d.avg_gc,\n avg_no_nodes: +d.avg_no_nodes,\n total_seq_len: +d.total_seq_len,\n circular: Boolean(d.circular),\n no_subgraphs: +d.no_subgraphs,\n per_nucl_mito: +d.per_nucl_mito,\n total_entropy: +d.total_entropy,\n total_interspersed_repeats: +d.total_interspersed_repeats,\n interspersed_frac: +d.interspersed_frac,\n gp_I_intron_count: +d.gp_I_intron_count,\n gp_II_intron_count: +d.gp_II_intron_count,\n percent_plastid_in_mito: +d.percent_plastid_in_mito\n };\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"clades = d3.tsvParse(\n await FileAttachment(\"species_names_latest_lineages_formatted@2.txt\").text()\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"classMap = {\n const classMap = new Map();\n // Normalize species name format to match tip labels\n clades.forEach((d) => {\n const sp = d.species.replace(/ /g, \"_\");\n if (!classMap.has(d.class)) classMap.set(d.class, []);\n classMap.get(d.class).push(sp);\n });\n\n classMap.delete(\"Magnoliopsida\");\n classMap.delete(\"Polypodiopsida\");\n classMap.delete(\"Ginkgoopsida\");\n classMap.delete(\"Jungermanniopsida\");\n classMap.delete(\"Marchantiopsida\");\n classMap.delete(\"Bryopsida\");\n classMap.delete(\"Lycopodiopsida\");\n classMap.delete(\"Polytrichopsida\");\n\n return classMap;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"orderMap = {\n const orderMap = new Map();\n // Normalize species name format to match tip labels\n clades.forEach((d) => {\n const sp = d.species.replace(/ /g, \"_\").replace(/-/g, \"_\");\n if (!orderMap.has(d.order)) orderMap.set(d.order, []);\n orderMap.get(d.order).push(sp);\n });\n\n // delete small clades for now\n for (const [key, value] of orderMap.entries()) {\n if (value.length < 10) {\n orderMap.delete(key);\n }\n }\n\n // replace Argentina anserina with potentilla anserina\n const rosalesArray = orderMap.get(\"Rosales\");\n rosalesArray[14] = \"Potentilla_anserina\";\n\n const asteralesArray = orderMap.get(\"Asterales\");\n asteralesArray[4] = \"Cirsium_eriophorum\";\n asteralesArray[7] = \"Gnaphalium_supinum\";\n\n const malphigialesArray = orderMap\n .get(\"Malpighiales\")\n .filter((element) => element !== \"Salix_viminalis\");\n\n orderMap.set(\"Malpighiales\", malphigialesArray);\n // not interested in mosses\n // orderMap.delete(\"Hypnales\");\n\n return orderMap;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"lw = import(\"https://cdn.jsdelivr.net/npm/@euphrasiologist/lwphylo@1.2.8/+esm\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"