31:T308f,{ const c = { bg: "#F7F7F7", ink: "#1A1A1A", inkSoft: "#555555", inkMuted: "#999999", rootBg: "#1A1A1A", rootText: "#F7F7F7", cardBg: "#FFFFFF", border: "#E2E2E2", borderHover: "#BFBFBF", link: "#D0D0D0", // Depth accent strip — desaturated, contemporary accent: ["#1A1A1A", "#4A7C6F", "#6A8EA0", "#9A8EB0", "#B09A7C"], shadow: "rgba(0,0,0,0.045)", shadowHover: "rgba(0,0,0,0.11)" }; const marginTop = 60; const marginRight = 80; const marginBottom = 100; const marginLeft = 80; const root = d3.hierarchy(data); const dy = 200; const baseDx = 20; const fontSize = 11; const charWidth = fontSize * 0.58; const lineHeight = fontSize + 5; const maxLineChars = 18; const boxPadX = 20; const boxPadY = 12; const boxRadius = 3; const accentBarW = 3; // ── Label splitting ──────────────────────────────────────────────── function splitLabel(name) { const words = name.split(" "); if (words.length === 1) return [name]; const lines = []; let cur = words[0]; for (let i = 1; i < words.length; i++) { if (cur.length + 1 + words[i].length <= maxLineChars) { cur += " " + words[i]; } else { lines.push(cur); cur = words[i]; } } lines.push(cur); return lines; } root.descendants().forEach((d) => { d.labelLines = splitLabel(d.data.name); d.labelWidth = Math.max(...d.labelLines.map((l) => l.length)) * charWidth; d.boxW = d.labelWidth + boxPadX * 2 + accentBarW; d.boxH = d.labelLines.length * lineHeight + boxPadY * 2; }); // ── Tree layout ────────────────────────────────────────────────────── const tree = d3 .tree() .nodeSize([baseDx, dy]) .separation((a, b) => { const needed = (a.boxW + b.boxW) / 2 + 24; return Math.max(1.2, needed / baseDx); }); // ── Elbow links (shared midY per parent) ───────────────────────────── let midYMap = new Map(); function elbowLink(d) { const sx = d.source.x; const sy = d.source.y + (d.source.boxH ?? 0) / 2; const tx = d.target.x; const ty = d.target.y - (d.target.boxH ?? 0) / 2; const midY = midYMap.get(d.source.id) ?? (sy + ty) / 2; const r = Math.min( 6, Math.abs(tx - sx) / 2, Math.abs(midY - sy), Math.abs(ty - midY) ); if (Math.abs(tx - sx) < 1) return `M${sx},${sy} L${tx},${ty}`; const dir = tx > sx ? 1 : -1; return [ `M${sx},${sy}`, `L${sx},${midY - r}`, `Q${sx},${midY} ${sx + dir * r},${midY}`, `L${tx - dir * r},${midY}`, `Q${tx},${midY} ${tx},${midY + r}`, `L${tx},${ty}` ].join(" "); } function computeMidYMap() { midYMap = new Map(); root.eachBefore((n) => { if (!n.children || !n.children.length) return; const bot = n.y + n.boxH / 2; const topMin = Math.min(...n.children.map((ch) => ch.y - ch.boxH / 2)); midYMap.set(n.id, (bot + topMin) / 2); }); } function depthAccent(depth) { return c.accent[Math.min(depth, c.accent.length - 1)]; } // ── SVG ────────────────────────────────────────────────────────────── const svgHeight = 600; const svg = d3 .create("svg") .attr("width", width) .attr("height", svgHeight) .attr("viewBox", [0, 0, width, svgHeight]) .attr( "style", [ `max-width:100%;height:auto;`, `font-family:"Roboto Slab",serif;`, `font-size:${fontSize}px;`, `user-select:none;`, `background:${c.bg};`, `cursor:grab;` ].join("") ); const defs = svg.append("defs"); // Minimal shadow const makeShadow = (id, dy, blur, color) => { const f = defs .append("filter") .attr("id", id) .attr("x", "-30%") .attr("y", "-30%") .attr("width", "160%") .attr("height", "160%"); f.append("feDropShadow") .attr("dx", 0) .attr("dy", dy) .attr("stdDeviation", blur) .attr("flood-color", color) .attr("flood-opacity", 1); }; makeShadow("sh", 1, 3, c.shadow); makeShadow("sh-h", 2, 6, c.shadowHover); // ── Zoom ───────────────────────────────────────────────────────────── const gZoom = svg.append("g"); const gLink = gZoom .append("g") .attr("fill", "none") .attr("stroke", c.link) .attr("stroke-width", 1); const gNode = gZoom .append("g") .attr("cursor", "pointer") .attr("pointer-events", "all"); const zoom = d3 .zoom() .scaleExtent([0.1, 3]) .on("zoom", ({ transform }) => gZoom.attr("transform", transform)); svg.call(zoom); svg.call( zoom.transform, d3.zoomIdentity.translate(width / 2, marginTop + 40) ); function fitToView(dur = 500) { let x0 = Infinity, x1 = -Infinity, y0 = Infinity, y1 = -Infinity; root.eachBefore((d) => { if (d.x == null) return; x0 = Math.min(x0, d.x - d.boxW / 2); x1 = Math.max(x1, d.x + d.boxW / 2); y0 = Math.min(y0, d.y - d.boxH / 2); y1 = Math.max(y1, d.y + d.boxH / 2); }); const tw = x1 - x0, th = y1 - y0, pad = 60; const sc = Math.min( (width - pad * 2) / tw, (svgHeight - pad * 2) / th, 1.4 ); const tx = width / 2 - (x0 + tw / 2) * sc; const ty = svgHeight / 2 - (y0 + th / 2) * sc; svg .transition() .duration(dur) .ease(d3.easeCubicOut) .call(zoom.transform, d3.zoomIdentity.translate(tx, ty).scale(sc)); } let isFirstRender = true; // ── Update ─────────────────────────────────────────────────────────── function update(event, source) { const duration = event?.altKey ? 2500 : 300; const nodes = root.descendants().reverse(); const links = root.links(); tree(root); computeMidYMap(); const transition = svg .transition() .duration(duration) .ease(d3.easeCubicOut); if (isFirstRender) { fitToView(duration); isFirstRender = false; } const node = gNode.selectAll("g").data(nodes, (d) => d.id); function onClick(event, d) { d.children = d.children ? null : d._children; update(event, d); } const nodeEnter = node .enter() .append("g") .attr("transform", () => `translate(${source.x0},${source.y0})`) .attr("fill-opacity", 0) .attr("stroke-opacity", 0); // Clip path per node — for accent bar corner masking nodeEnter.each(function (d) { defs .append("clipPath") .attr("id", `clip-${d.id}`) .append("rect") .attr("x", -d.boxW / 2) .attr("y", -d.boxH / 2) .attr("width", d.boxW) .attr("height", d.boxH) .attr("rx", boxRadius); }); // Card background nodeEnter .append("rect") .attr("class", "card") .attr("x", (d) => -d.boxW / 2) .attr("y", (d) => -d.boxH / 2) .attr("width", (d) => d.boxW) .attr("height", (d) => d.boxH) .attr("rx", boxRadius) .attr("fill", (d) => (d.depth === 0 ? c.rootBg : c.cardBg)) .attr("stroke", (d) => (d.depth === 0 ? "none" : c.border)) .attr("stroke-width", 1) .attr("filter", "url(#sh)") .on("click", onClick) .on("mouseenter", function (_, d) { d3.select(this) .attr("filter", "url(#sh-h)") .attr("stroke", d.depth === 0 ? "none" : c.borderHover); }) .on("mouseleave", function (_, d) { d3.select(this) .attr("filter", "url(#sh)") .attr("stroke", d.depth === 0 ? "none" : c.border); }); // Accent bar — thin left strip, clipped to card radius nodeEnter .append("rect") .attr("class", "bar") .attr("clip-path", (d) => `url(#clip-${d.id})`) .attr("x", (d) => -d.boxW / 2) .attr("y", (d) => -d.boxH / 2) .attr("width", accentBarW) .attr("height", (d) => d.boxH) .attr("fill", (d) => (d.depth === 0 ? c.rootText : depthAccent(d.depth))) .attr("pointer-events", "none"); // Toggle indicator: minimal + / − nodeEnter .filter((d) => d._children) .append("text") .attr("class", "toggle") .attr("text-anchor", "middle") .attr("dominant-baseline", "central") .attr("x", (d) => d.boxW / 2 - 12) .attr("y", 0) .attr("font-size", "14px") .attr("font-weight", 300) .attr("fill", (d) => (d.depth === 0 ? c.rootText : c.inkMuted)) .attr("opacity", 0.6) .attr("pointer-events", "none") .text((d) => (d.children ? "−" : "+")); // Label — left-aligned, offset past accent bar nodeEnter.each(function (d) { const isRoot = d.depth === 0; const lines = d.labelLines; const text = d3 .select(this) .append("text") .attr("text-anchor", "start") .attr("dominant-baseline", "central") .attr("fill", isRoot ? c.rootText : d._children ? c.ink : c.inkSoft) .attr("font-weight", isRoot ? 700 : d._children ? 500 : 400) .attr("font-size", isRoot ? `${fontSize + 1}px` : `${fontSize}px`) .attr("letter-spacing", "0.015em") .attr("pointer-events", "none"); const totalH = lines.length * lineHeight; const startY = -totalH / 2 + lineHeight / 2; const textX = -d.boxW / 2 + accentBarW + boxPadX * 0.7; lines.forEach((line, i) => { text .append("tspan") .attr("x", textX) .attr("y", startY + i * lineHeight) .text(line); }); }); // ── Merge & transition ───────────────────────────────────────────── const nodeMerge = node.merge(nodeEnter); nodeMerge .select(".card") .attr("fill", (d) => (d.depth === 0 ? c.rootBg : c.cardBg)); nodeMerge.select(".toggle").text((d) => (d.children ? "−" : "+")); nodeMerge .transition(transition) .attr("transform", (d) => `translate(${d.x},${d.y})`) .attr("fill-opacity", 1) .attr("stroke-opacity", 1); node .exit() .transition(transition) .remove() .attr("transform", () => `translate(${source.x},${source.y})`) .attr("fill-opacity", 0) .attr("stroke-opacity", 0); // ── Links ────────────────────────────────────────────────────────── const link = gLink.selectAll("path").data(links, (d) => d.target.id); const linkEnter = link .enter() .append("path") .attr("d", () => { const o = { x: source.x0, y: source.y0, boxH: source.boxH ?? 0 }; return elbowLink({ source: o, target: o }); }); link.merge(linkEnter).transition(transition).attr("d", elbowLink); link .exit() .transition(transition) .remove() .attr("d", () => { const o = { x: source.x, y: source.y, boxH: source.boxH ?? 0 }; return elbowLink({ source: o, target: o }); }); root.eachBefore((d) => { d.x0 = d.x; d.y0 = d.y; }); } // ── Init ───────────────────────────────────────────────────────────── root.x0 = 0; root.y0 = 0; root.descendants().forEach((d, i) => { d.id = i; d._children = d.children; }); if (expandAll) { root.descendants().forEach((d) => { if (d._children) d.children = d._children; }); } else { root.descendants().forEach((d) => { if (d.depth && d.data.name.length !== 7) d.children = null; }); } update(null, root); return svg.node(); }32:T307a,{ // ── Palette & Design Tokens ────────────────────────────────────────── const palette = { bg: "#FAFAF8", nodeFill: "#FFFFFF", nodeStroke: "#C8C4BD", nodeStrokeHover: "#8A8579", rootFill: "#2C3038", rootText: "#FFFFFF", rootStroke: "#1E2228", parentFill: "#F5F4F1", parentStroke: "#A9A49B", parentText: "#2C3038", leafFill: "#FFFFFF", leafStroke: "#D4D0C8", leafText: "#4A4A4A", linkStroke: "#B8B4AC", accent: "#6B7B6E", // muted sage — subtle, conservative accent shadow: "rgba(44, 48, 56, 0.06)", shadowMd: "rgba(44, 48, 56, 0.10)" }; const marginTop = 60; const marginRight = 80; const marginBottom = 100; const marginLeft = 80; const root = d3.hierarchy(data); const dy = 220; const baseDx = 20; const fontSize = 11.5; const charWidth = fontSize * 0.56; const lineHeight = fontSize + 4; const maxLineChars = 18; const boxPadX = 16; const boxPadY = 10; const boxRadius = 4; // ── Label splitting ────────────────────────────────────────────────── function splitLabel(name) { const words = name.split(" "); if (words.length === 1) return [name]; const lines = []; let current = words[0]; for (let i = 1; i < words.length; i++) { if (current.length + 1 + words[i].length <= maxLineChars) { current += " " + words[i]; } else { lines.push(current); current = words[i]; } } lines.push(current); return lines; } root.descendants().forEach((d) => { d.labelLines = splitLabel(d.data.name); d.labelWidth = Math.max(...d.labelLines.map((l) => l.length)) * charWidth; d.boxW = d.labelWidth + boxPadX * 2; d.boxH = d.labelLines.length * lineHeight + boxPadY * 2; }); // ── Tree layout ────────────────────────────────────────────────────── const tree = d3 .tree() .nodeSize([baseDx, dy]) .separation((a, b) => { const aW = a.boxW ?? a.data.name.length * charWidth + boxPadX * 2; const bW = b.boxW ?? b.data.name.length * charWidth + boxPadX * 2; const needed = (aW + bW) / 2 + 28; return Math.max(1.2, needed / baseDx); }); // Rounded-corner step links (elbow connectors) // midYMap is populated after layout to ensure all siblings share one horizontal line let midYMap = new Map(); function elbowLink(d) { const sx = d.source.x; const sy = d.source.y + (d.source.boxH ?? 0) / 2; // bottom of source box const tx = d.target.x; const ty = d.target.y - (d.target.boxH ?? 0) / 2; // top of target box // Use the shared midY for this source depth, falling back to arithmetic mean const midY = midYMap.get(d.source.id) ?? (sy + ty) / 2; const r = Math.min( 8, Math.abs(tx - sx) / 2, Math.abs(midY - sy), Math.abs(ty - midY) ); if (Math.abs(tx - sx) < 1) { return `M${sx},${sy} L${tx},${ty}`; } const dir = tx > sx ? 1 : -1; return [ `M${sx},${sy}`, `L${sx},${midY - r}`, `Q${sx},${midY} ${sx + dir * r},${midY}`, `L${tx - dir * r},${midY}`, `Q${tx},${midY} ${tx},${midY + r}`, `L${tx},${ty}` ].join(" "); } // Compute a single shared midY for each parent node so all its child links // share the same horizontal crossbar, regardless of varying box heights. function computeMidYMap() { midYMap = new Map(); root.eachBefore((node) => { if (!node.children || node.children.length === 0) return; const parentBottom = node.y + node.boxH / 2; // Find the highest (smallest y) top-edge among all children const childTopMin = Math.min( ...node.children.map((c) => c.y - c.boxH / 2) ); midYMap.set(node.id, (parentBottom + childTopMin) / 2); }); } // ── SVG setup ──────────────────────────────────────────────────────── const svg = d3 .create("svg") .attr("width", width) .attr("height", dy) .attr("viewBox", [-width / 2, -marginTop, width, dy]) .attr( "style", `max-width: 100%; height: auto; font: ${fontSize}px "Georgia", "Palatino Linotype", "Book Antiqua", serif; user-select: none; background: ${palette.bg};` ); // Defs for drop shadow filter const defs = svg.append("defs"); const filter = defs .append("filter") .attr("id", "drop-shadow") .attr("x", "-20%") .attr("y", "-20%") .attr("width", "140%") .attr("height", "140%"); filter .append("feDropShadow") .attr("dx", 0) .attr("dy", 1) .attr("stdDeviation", 2) .attr("flood-color", palette.shadow) .attr("flood-opacity", 1); const filterHover = defs .append("filter") .attr("id", "drop-shadow-hover") .attr("x", "-20%") .attr("y", "-20%") .attr("width", "140%") .attr("height", "140%"); filterHover .append("feDropShadow") .attr("dx", 0) .attr("dy", 2) .attr("stdDeviation", 4) .attr("flood-color", palette.shadowMd) .attr("flood-opacity", 1); const gLink = svg .append("g") .attr("fill", "none") .attr("stroke", palette.linkStroke) .attr("stroke-opacity", 0.7) .attr("stroke-width", 1.25); const gNode = svg .append("g") .attr("cursor", "pointer") .attr("pointer-events", "all"); // ── Update function ────────────────────────────────────────────────── function update(event, source) { const duration = event?.altKey ? 2500 : 300; const nodes = root.descendants().reverse(); const links = root.links(); tree(root); computeMidYMap(); let left = root; let right = root; root.eachBefore((node) => { if (node.x < left.x) left = node; if (node.x > right.x) right = node; }); let maxDepth = 0; root.eachBefore((node) => { if (node.y > maxDepth) maxDepth = node.y; }); const treeWidth = right.x - left.x + marginLeft + marginRight; const height = maxDepth + marginTop + marginBottom; const transition = svg .transition() .duration(duration) .ease(d3.easeCubicOut) .attr("height", height) .attr("viewBox", [ left.x - marginLeft, -marginTop, Math.max(width, treeWidth), height ]) .tween( "resize", window.ResizeObserver ? null : () => () => svg.dispatch("toggle") ); const node = gNode.selectAll("g").data(nodes, (d) => d.id); function onClick(event, d) { d.children = d.children ? null : d._children; update(event, d); } const nodeEnter = node .enter() .append("g") .attr("transform", (d) => `translate(${source.x0},${source.y0})`) .attr("fill-opacity", 0) .attr("stroke-opacity", 0); // ── Box (rect) per node ──────────────────────────────────────────── nodeEnter .append("rect") .attr("x", (d) => -d.boxW / 2) .attr("y", (d) => -d.boxH / 2) .attr("width", (d) => d.boxW) .attr("height", (d) => d.boxH) .attr("rx", boxRadius) .attr("ry", boxRadius) .attr("fill", (d) => { if (d.depth === 0) return palette.rootFill; if (d._children) return palette.parentFill; return palette.leafFill; }) .attr("stroke", (d) => { if (d.depth === 0) return palette.rootStroke; if (d._children) return palette.parentStroke; return palette.leafStroke; }) .attr("stroke-width", (d) => (d.depth === 0 ? 1.5 : 1)) .attr("filter", "url(#drop-shadow)") .on("click", onClick) .on("mouseenter", function () { d3.select(this).attr("filter", "url(#drop-shadow-hover)"); }) .on("mouseleave", function () { d3.select(this).attr("filter", "url(#drop-shadow)"); }); // ── Collapse indicator (small chevron) ───────────────────────────── nodeEnter .filter((d) => d._children) .append("text") .attr("class", "collapse-indicator") .attr("text-anchor", "middle") .attr("y", (d) => d.boxH / 2 - 1) .attr("font-size", "8px") .attr("fill", palette.linkStroke) .attr("pointer-events", "none") .text((d) => (d.children ? "▲" : "▼")); // ── Text labels ──────────────────────────────────────────────────── nodeEnter.each(function (d) { const isRoot = d.depth === 0; const lines = d.labelLines; const textGroup = d3 .select(this) .append("text") .attr("text-anchor", "middle") .attr("dominant-baseline", "central") .attr("fill", () => { if (isRoot) return palette.rootText; if (d._children) return palette.parentText; return palette.leafText; }) .attr("font-weight", () => { if (isRoot) return 700; if (d._children) return 600; return 400; }) .attr("letter-spacing", isRoot ? "0.03em" : "0.01em") .attr("pointer-events", "none"); const totalTextH = lines.length * lineHeight; const startY = -totalTextH / 2 + lineHeight / 2; lines.forEach((line, i) => { textGroup .append("tspan") .attr("x", 0) .attr("y", startY + i * lineHeight) .text(line); }); }); // ── Update existing nodes ────────────────────────────────────────── const nodeMerge = node.merge(nodeEnter); nodeMerge.select("rect").attr("fill", (d) => { if (d.depth === 0) return palette.rootFill; if (d._children && !d.children) return palette.parentFill; return d._children ? palette.parentFill : palette.leafFill; }); nodeMerge .select(".collapse-indicator") .text((d) => (d.children ? "▲" : "▼")); nodeMerge .transition(transition) .attr("transform", (d) => `translate(${d.x},${d.y})`) .attr("fill-opacity", 1) .attr("stroke-opacity", 1); node .exit() .transition(transition) .remove() .attr("transform", (d) => `translate(${source.x},${source.y})`) .attr("fill-opacity", 0) .attr("stroke-opacity", 0); // ── Links ────────────────────────────────────────────────────────── const link = gLink.selectAll("path").data(links, (d) => d.target.id); const linkEnter = link .enter() .append("path") .attr("d", (d) => { const o = { x: source.x0, y: source.y0, boxH: source.boxH ?? 0 }; return elbowLink({ source: o, target: o }); }); link.merge(linkEnter).transition(transition).attr("d", elbowLink); link .exit() .transition(transition) .remove() .attr("d", (d) => { const o = { x: source.x, y: source.y, boxH: source.boxH ?? 0 }; return elbowLink({ source: o, target: o }); }); root.eachBefore((d) => { d.x0 = d.x; d.y0 = d.y; }); } // ── Initial setup ──────────────────────────────────────────────────── root.x0 = 0; root.y0 = 0; root.descendants().forEach((d, i) => { d.id = i; d._children = d.children; }); if (expandAll) { root.descendants().forEach((d) => { if (d._children) d.children = d._children; }); } else { root.descendants().forEach((d) => { if (d.depth && d.data.name.length !== 7) d.children = null; }); } update(null, root); return svg.node(); }33:T18bf,chart = { const marginTop = 40; const marginRight = 60; const marginBottom = 80; const marginLeft = 60; const root = d3.hierarchy(data); const dy = 200; const baseDx = 20; const fontSize = 11; const charWidth = fontSize * 0.58; const lineHeight = fontSize + 3; const maxLineChars = 18; function splitLabel(name) { const words = name.split(" "); if (words.length === 1) return [name]; const lines = []; let current = words[0]; for (let i = 1; i < words.length; i++) { if (current.length + 1 + words[i].length <= maxLineChars) { current += " " + words[i]; } else { lines.push(current); current = words[i]; } } lines.push(current); return lines; } root.descendants().forEach((d) => { d.labelLines = splitLabel(d.data.name); d.labelWidth = Math.max(...d.labelLines.map((l) => l.length)) * charWidth; }); const tree = d3 .tree() .nodeSize([baseDx, dy]) .separation((a, b) => { const aW = a.labelWidth ?? a.data.name.length * charWidth; const bW = b.labelWidth ?? b.data.name.length * charWidth; const needed = (aW + bW) / 2 + 24; return Math.max(1.2, needed / baseDx); }); const diagonal = d3 .linkVertical() .x((d) => d.x) .y((d) => d.y); const svg = d3 .create("svg") .attr("width", width) .attr("height", dy) .attr("viewBox", [-width / 2, -marginTop, width, dy]) .attr( "style", `max-width: 100%; height: auto; font: ${fontSize}px sans-serif; user-select: none;` ); const gLink = svg .append("g") .attr("fill", "none") .attr("stroke", "#555") .attr("stroke-opacity", 0.4) .attr("stroke-width", 1.5); const gNode = svg .append("g") .attr("cursor", "pointer") .attr("pointer-events", "all"); function update(event, source) { const duration = event?.altKey ? 2500 : 250; const nodes = root.descendants().reverse(); const links = root.links(); tree(root); let left = root; let right = root; root.eachBefore((node) => { if (node.x < left.x) left = node; if (node.x > right.x) right = node; }); let maxDepth = 0; root.eachBefore((node) => { if (node.y > maxDepth) maxDepth = node.y; }); const treeWidth = right.x - left.x + marginLeft + marginRight; const height = maxDepth + marginTop + marginBottom; const transition = svg .transition() .duration(duration) .attr("height", height) .attr("viewBox", [ left.x - marginLeft, -marginTop, Math.max(width, treeWidth), height ]) .tween( "resize", window.ResizeObserver ? null : () => () => svg.dispatch("toggle") ); const node = gNode.selectAll("g").data(nodes, (d) => d.id); function onClick(event, d) { d.children = d.children ? null : d._children; update(event, d); } const nodeEnter = node .enter() .append("g") .attr("transform", (d) => `translate(${source.x0},${source.y0})`) .attr("fill-opacity", 0) .attr("stroke-opacity", 0); nodeEnter .append("circle") .attr("r", 4) .attr("fill", (d) => (d._children ? "#555" : "#999")) .attr("stroke-width", 10) .on("click", onClick); nodeEnter.each(function (d) { const isParent = !!d._children; const lines = d.labelLines; const text = d3 .select(this) .append("text") .attr("font-family", "Roboto Slab") .attr("text-anchor", "middle") .attr("stroke-linejoin", "round") .attr("stroke-width", 3) .attr("stroke", "white") .attr("paint-order", "stroke") .style("cursor", "pointer") .on("click", (event) => onClick(event, d)); if (isParent) { lines.forEach((line, i) => { text .append("tspan") .attr("x", 0) .attr( "dy", i === 0 ? `${-(lines.length - 1) * lineHeight - 10}px` : `${lineHeight}px` ) .text(line); }); } else { lines.forEach((line, i) => { text .append("tspan") .attr("x", 0) .attr("dy", i === 0 ? `${12}px` : `${lineHeight}px`) .attr("alignment-baseline", "hanging") .text(line); }); } }); // Update circle fill on merge (reflects expanded/collapsed state) node .merge(nodeEnter) .select("circle") .attr("fill", (d) => (d._children && !d.children ? "#555" : "#999")); node .merge(nodeEnter) .transition(transition) .attr("transform", (d) => `translate(${d.x},${d.y})`) .attr("fill-opacity", 1) .attr("stroke-opacity", 1); node .exit() .transition(transition) .remove() .attr("transform", (d) => `translate(${source.x},${source.y})`) .attr("fill-opacity", 0) .attr("stroke-opacity", 0); const link = gLink.selectAll("path").data(links, (d) => d.target.id); const linkEnter = link .enter() .append("path") .attr("d", (d) => { const o = { x: source.x0, y: source.y0 }; return diagonal({ source: o, target: o }); }); link.merge(linkEnter).transition(transition).attr("d", diagonal); link .exit() .transition(transition) .remove() .attr("d", (d) => { const o = { x: source.x, y: source.y }; return diagonal({ source: o, target: o }); }); root.eachBefore((d) => { d.x0 = d.x; d.y0 = d.y; }); } // Initial setup — assign ids and store children in _children root.x0 = 0; root.y0 = 0; root.descendants().forEach((d, i) => { d.id = i; d._children = d.children; }); // Apply expand/collapse based on the toggle if (expandAll) { // Expand all: restore all _children to children root.descendants().forEach((d) => { if (d._children) d.children = d._children; }); } else { // Collapse: only root open, plus nodes with 7-letter names root.descendants().forEach((d) => { if (d.depth && d.data.name.length !== 7) d.children = null; }); } update(null, root); return svg.node(); }34:T238a,{ // ── IIT Brand Palette ────────────────────────────────────────────── // Illinois Tech Red: #CC0000 | Illinois Tech Gray: #76777B // Source Sans 3 (Google Fonts) — IIT's official typeface family const colors = { red: "#CC0000", gray: "#76777B", grayLight: "#A7A8AA", grayDark: "#4A4B4D", bg: "#FAFAFA", link: "#CC000044", linkHover: "#CC000088", nodeParent: "#CC0000", nodeLeaf: "#A7A8AA", textParent: "#333333", textLeaf: "#555555" }; // ── Dimensions ───────────────────────────────────────────────────── const marginTop = 50; const marginRight = 60; const marginBottom = 80; const marginLeft = 60; const root = d3.hierarchy(data); const dy = 200; // vertical depth spacing const baseDx = 20; // horizontal base separation unit // ── Font configuration ───────────────────────────────────────────── const fontSize = 11; const fontFamily = "Roboto Slab"; const charWidth = fontSize * 0.56; const lineHeight = fontSize + 3; const maxLineChars = 12; // Break a label into multiple lines, splitting ONLY on spaces. function splitLabel(name) { const words = name.split(" "); if (words.length === 1) return [name]; const lines = []; let current = words[0]; for (let i = 1; i < words.length; i++) { if (current.length + 1 + words[i].length <= maxLineChars) { current += " " + words[i]; } else { lines.push(current); current = words[i]; } } lines.push(current); return lines; } // Pre-compute label lines and pixel width for each node. root.descendants().forEach((d) => { d.labelLines = splitLabel(d.data.name); d.labelWidth = Math.max(...d.labelLines.map((l) => l.length)) * charWidth; }); // ── Tree layout with label-aware separation ──────────────────────── const tree = d3 .tree() .nodeSize([baseDx, dy]) .separation((a, b) => { const aW = a.labelWidth ?? a.data.name.length * charWidth; const bW = b.labelWidth ?? b.data.name.length * charWidth; const needed = (aW + bW) / 2 + 24; return Math.max(1.2, needed / baseDx); }); const diagonal = d3 .linkVertical() .x((d) => d.x) .y((d) => d.y); // ── SVG container ────────────────────────────────────────────────── const svg = d3 .create("svg") .attr("width", width) .attr("height", dy) .attr("viewBox", [-width / 2, -marginTop, width, dy]) .attr( "style", [ `max-width: 100%`, `height: auto`, `font: ${fontSize}px ${fontFamily}`, `user-select: none`, `background: ${colors.bg}` ].join("; ") ); // Optional: subtle grid dots for a technical/blueprint feel const defs = svg.append("defs"); // Drop shadow filter for parent nodes const filter = defs .append("filter") .attr("id", "node-shadow") .attr("x", "-50%") .attr("y", "-50%") .attr("width", "200%") .attr("height", "200%"); filter .append("feDropShadow") .attr("dx", 0) .attr("dy", 1) .attr("stdDeviation", 1.5) .attr("flood-color", colors.red) .attr("flood-opacity", 0.25); const gLink = svg .append("g") .attr("fill", "none") .attr("stroke", colors.grayLight) .attr("stroke-opacity", 0.5) .attr("stroke-width", 1.5); const gNode = svg .append("g") .attr("cursor", "pointer") .attr("pointer-events", "all"); // ── Update function ──────────────────────────────────────────────── function update(event, source) { const duration = event?.altKey ? 2500 : 250; const nodes = root.descendants().reverse(); const links = root.links(); tree(root); let left = root; let right = root; root.eachBefore((node) => { if (node.x < left.x) left = node; if (node.x > right.x) right = node; }); let maxDepth = 0; root.eachBefore((node) => { if (node.y > maxDepth) maxDepth = node.y; }); const treeWidth = right.x - left.x + marginLeft + marginRight; const height = maxDepth + marginTop + marginBottom; const transition = svg .transition() .duration(duration) .attr("height", height) .attr("viewBox", [ left.x - marginLeft, -marginTop, Math.max(width, treeWidth), height ]) .tween( "resize", window.ResizeObserver ? null : () => () => svg.dispatch("toggle") ); // Click handler — shared by circle and text function onClick(event, d) { d.children = d.children ? null : d._children; update(event, d); } // ── Nodes ──────────────────────────────────────────────────────── const node = gNode.selectAll("g").data(nodes, (d) => d.id); const nodeEnter = node .enter() .append("g") .attr("transform", (d) => `translate(${source.x0},${source.y0})`) .attr("fill-opacity", 0) .attr("stroke-opacity", 0); // Circle: red for expandable parents, light gray for leaves nodeEnter .append("circle") .attr("r", (d) => (d._children ? 5 : 3)) .attr("fill", (d) => (d._children ? colors.nodeParent : colors.nodeLeaf)) .attr("stroke", (d) => (d._children ? colors.red : "none")) .attr("stroke-width", (d) => (d._children ? 1.5 : 0)) .attr("filter", (d) => (d._children ? "url(#node-shadow)" : null)) .on("click", onClick); // Multi-line text labels nodeEnter.each(function (d) { const isParent = !!d._children; const lines = d.labelLines; const text = d3 .select(this) .append("text") .attr("text-anchor", "middle") .attr("fill", isParent ? colors.textParent : colors.textLeaf) .attr("font-weight", isParent ? 600 : 400) .attr("font-size", isParent ? `${fontSize + 1}px` : `${fontSize}px`) .attr("stroke-linejoin", "round") .attr("stroke-width", 3) .attr("stroke", colors.bg) .attr("paint-order", "stroke") .style("cursor", "pointer") .on("click", (event) => onClick(event, d)); if (isParent) { lines.forEach((line, i) => { text .append("tspan") .attr("x", 0) .attr( "dy", i === 0 ? `${-(lines.length - 1) * lineHeight - 12}px` : `${lineHeight}px` ) .text(line); }); } else { lines.forEach((line, i) => { text .append("tspan") .attr("x", 0) .attr("dy", i === 0 ? `${12}px` : `${lineHeight}px`) .attr("alignment-baseline", "hanging") .text(line); }); } }); // Transition to new positions node .merge(nodeEnter) .transition(transition) .attr("transform", (d) => `translate(${d.x},${d.y})`) .attr("fill-opacity", 1) .attr("stroke-opacity", 1); node .exit() .transition(transition) .remove() .attr("transform", (d) => `translate(${source.x},${source.y})`) .attr("fill-opacity", 0) .attr("stroke-opacity", 0); // ── Links ──────────────────────────────────────────────────────── const link = gLink.selectAll("path").data(links, (d) => d.target.id); const linkEnter = link .enter() .append("path") .attr("d", (d) => { const o = { x: source.x0, y: source.y0 }; return diagonal({ source: o, target: o }); }); link.merge(linkEnter).transition(transition).attr("d", diagonal); link .exit() .transition(transition) .remove() .attr("d", (d) => { const o = { x: source.x, y: source.y }; return diagonal({ source: o, target: o }); }); // Stash old positions for transition root.eachBefore((d) => { d.x0 = d.x; d.y0 = d.y; }); } // ── Initial state ────────────────────────────────────────────────── root.x0 = 0; root.y0 = 0; root.descendants().forEach((d, i) => { d.id = i; d._children = d.children; if (d.depth && d.data.name.length !== 7) d.children = null; }); update(null, root); return svg.node(); } 35:T7a6,academicAffairs = ({ name: "Vice Provost for Academic Affairs & DDAD", children: [ { name: "Associate Faculty Director for Student Success", children: [] }, { name: "Assistant Vice Provost for Academic Affairs", children: [ { name: "Sr. Associate Director of Academic Affairs", children: [ { name: "Academic Advisor, Discover+", children: [] } ] }, { name: "Associate Director of Academic Affairs & Thesis Examiner", children: [ { name: "Sr. Assistant Director of Academic Affairs", children: [] }, { name: "Graduate & Transfer Programs Advisor", children: [] } ] }, { name: "Assistant Director of AMP & Joint Programs", children: [ { name: "Pathway and Bridge Program Advisor", children: [] }, { name: "Academic Advisor, Special Programs (Coursera)", children: [] } ] }, { name: "Academic Advisor", children: [] }, { name: "Software Technical Manager", children: [] }, { name: "Office Manager", children: [ { name: "AA Student Workers", children: [] } ] } ] }, { name: "Academic Success Coordinator", children: [ { name: "Academic Coaches and ARC Student Workers", children: [] } ] }, { name: "Associate Director of Leadership Programs", children: [ { name: "Leadership Mentors & Coaches", children: [] } ] } ] })36:T5ff,hr = ({ name: "CHRO", person: "Amit Thomas", children: [ { name: "SEO Mgr", person: "Kathryn Potts", children: [ { name: "SEO Associate", person: "Terence Allen", children: [] }, { name: "SEO & HR Assistant", person: "Jada Allen", children: [] } ] }, { name: "HR Mgr", person: "Melissa Munoz Rush", children: [ { name: "HRBP", person: "Brian Steen", children: [] }, { name: "HR Generalist", person: "Ed Wright", children: [] }, { name: "HR Associate", person: "Nicole Sheppard", children: [] } ] }, { name: "Asst. Dir HRIS", person: "George Lara", children: [ { name: "HRIS II", person: "Kristi Harreld", children: [] }, { name: "HRIS I", person: "Marko Lazovic", children: [] }, { name: "HRIS I", person: "Alaina Hicks", children: [] } ] }, { name: "Benefits Mgr", person: "Vacant", children: [ { name: "Benefits Associate", person: "Vacant", children: [] }, { name: "Benefits Coordinator", person: "Jackie Perez", children: [] } ] } ] })37:T1e6b,it = ({ name: "CIO", person: "Vaishnav, Sejal", children: [ { name: "Sr. Director, Project Management Off", person: "Atkinson, Anthony", children: [ { name: "Project Manager", person: "Loretto, Paul", children: [] }, { name: "Sr. Project Manager", person: "McDermott, Molly", children: [] }, { name: "Project Manager", person: "Salinas, Carlos", children: [] } ] }, { name: "Manager, Production Support", person: "Batson, Timothy", children: [ { name: "Integration Architect", person: "Atturi, Aparna", children: [] }, { name: "Technical Business Analyst", person: "Bozzetti, Benito", children: [] }, { name: "Business Analyst", person: "Vacant", children: [ { name: "Application Engineer - Level 2", person: "Dhuvala, Chandana", children: [] }, { name: "Ellucian Managed Services", person: "Ellucian Managed Services", children: [] } ] }, { name: "Business Analyst", person: "Gallardo, Natalia", children: [] }, { name: "Integration Engineer, Level 1", person: "Kim, Bori", children: [] }, { name: "Enterprise App Administrator, III", person: "Lagunas, Anthoula", children: [] }, { name: "Integration Engineer, Level II", person: "Lennert, Kristin", children: [] } ] }, { name: "Associate CIO, User Technical Services", person: "Breese, Eric", children: [ { name: "IT Director", person: "Vacant", children: [] }, { name: "Manager, Support Desk", person: "Buford, Rudi", children: [ { name: "Support Desk Technician II", person: "CruzZavala, Brandon", children: [] }, { name: "Support Desk Technician II", person: "Kall, Bret", children: [] }, { name: "Support Desk Technician II", person: "Smith, William", children: [] } ] }, { name: "Manager, Identity & Access Mgmt", person: "Hogan, Brian", children: [] }, { name: "Director, Technical Services", person: "Makowski, Mikayla", children: [ { name: "System Engineer", person: "Braden, Andrew", children: [] }, { name: "System Administrator", person: "Gonzalez, Juan", children: [] }, { name: "Senior Systems Engineer", person: "Mousa, Jamal", children: [] }, { name: "System Engineer", person: "Norris, Jonathan", children: [] } ] }, { name: "Manager, Audio-Visual Technologies", person: "Paul, Jhirmack", children: [ { name: "AV Technician", person: "Jackson, Alton", children: [] }, { name: "TV Station Engineer", person: "Korey, Jeffrey", children: [] } ] } ] }, { name: "Mngr, Insti Rprtng/Data Gvrnce", person: "Vacant", children: [ { name: "Data Analyst", person: "Gupta, Tanvi", children: [] }, { name: "Business Intelligence Analyst, I", person: "Vacant", children: [] }, { name: "Sr. Bus. Intelligence Analyst", person: "Vacant", children: [] }, { name: "IR Specialist", person: "Vacant", children: [] }, { name: "Report Writer, Level III", person: "Vacant", children: [] } ] }, { name: "Director, Academic Technology Serv.", person: "Kazibut, John", children: [ { name: "Media Producer/Production Mgr.", person: "Cantu, Robert", children: [] }, { name: "Multimedia Producer/Editor", person: "Davis, Lanique Ann", children: [] }, { name: "AV Systems Engineer", person: "Ciurej, Richard", children: [] }, { name: "Production Coordinator", person: "Guzman, Jose", children: [] }, { name: "Multimedia Specialist", person: "Burosh, Bobbi", children: [] }, { name: "Multimedia Specialist", person: "Cadet, Jean", children: [] }, { name: "Multimedia Specialist", person: "Martin, Tonishea", children: [] }, { name: "Multimedia Specialist", person: "Pitts, Christopher", children: [] } ] }, { name: "Director, Cyber-Tech Security", person: "Vacant", children: [ { name: "Security Analyst Operation", person: "Patil, Hansil", children: [] }, { name: "Security Analyst Compliance", person: "Djossou, Marlene", children: [] } ] }, { name: "Associate CIO, Infrastructure", person: "Oyewole, Ibukun", children: [ { name: "Network Manager", person: "Bucurica, Adrian", children: [ { name: "Network Engineer", person: "Chiu, Jack", children: [] }, { name: "Senior Network Engineer", person: "Rose, David", children: [] }, { name: "Network Engineer", person: "Vacant", children: [] } ] }, { name: "Information Systems Manager", person: "Eichhorst, Frederick", children: [ { name: "Systems Administrator", person: "Gandhi, Upendra", children: [] }, { name: "Systems Administrator - Linux", person: "Kamran, Babar", children: [] }, { name: "VMware / Windows Administrator", person: "Mui, Haley", children: [] }, { name: "Database Administrator", person: "Shen, Jie", children: [] }, { name: "Linux Administrator - Research", person: "Tufts, Jim", children: [] }, { name: "Voice-Services Engineer", person: "Shields, Kristin", children: [] } ] } ] }, { name: "Director, Office of CIO", person: "Provost, Christine", children: [] } ] })38:T4f0,pritzker = ({ name: "Executive Director", person: "Philip Troyk", children: [ { name: "Director for Strategic Initiatives", person: "Natacha DePaola", children: [ { name: "Associate Director for Fellowships", person: "Abhinav Bhushan", children: [ { name: "Fellowship Program Coordinator", person: "TBD", children: [] } ] }, { name: "Associate Director for Translational Research", person: "Michael Barry", children: [] }, { name: "RES-MATCH Co-Coordinators", person: "Michael Barry, Oscar Juarez", children: [] }, { name: "Associate Director of NeuroOrganoid Laboratory", person: "Jialing Xiang", children: [] }, { name: "Administrative Assistant", person: "Karen Caruso", children: [] } ] }, { name: "Faculty Steering Committee", person: "Jialing Xiang, Natacha DePaola, John Georgiadis", children: [] }, { name: "Advisory Board", person: null, children: [] } ] })39:T64d,president = ({ name: "President", person: "Raj Echambadi", children: [ { name: "Provost, Senior Vice President for Academic Affairs", person: "Elizabeth Hudson", children: [] }, { name: "Vice President for Finance, Chief Financial Officer, and Treasurer", person: "Jeremy V. Fine", children: [] }, { name: "Associate Vice President of HEA Compliance and Title IX Compliance Coordinator", person: "Virginia Foster", children: [] }, { name: "Chief of Staff and Vice President for Strategy", person: "Jess Goode", children: [] }, { name: "Vice President and General Counsel", person: "Walter Hazlitt", children: [] }, { name: "Chief Human Resources Officer", person: "Amit Thomas", children: [] }, { name: "Vice President for Advancement", person: "Sean Campbell", children: [] }, { name: "University Ombudsperson", person: "Marsha Ross-Jackson", children: [] }, { name: "Executive Director, Ed Kaplan Family Institute for Innovation and Tech Entrepreneurship", person: "Maryam Saleh", children: [] }, { name: "Chief Learning and Innovation Officer", person: "Norma Scagnoli", children: [] }, { name: "Vice President for Enrollment Management and Student Affairs", person: "Mallik Sundharam", children: [] }, { name: "Vice President for Administration", person: "Bruce Watts", children: [] } ] })3a:T4719,data = ({ name: "President", person: "Raj Echambadi", children: [ { name: "Provost, Senior Vice President for Academic Affairs", person: "Elizabeth Hudson", children: [ { name: "Vice Provost of Faculty Affairs", person: "Jamshid Mohammadi", children: [] }, { name: "Vice Provost for Academic Strategy", person: "Jeremy Alexis", children: [] }, { name: "Vice Provost for Academic Transformation", person: "Kevin W. Cassel", children: [] }, { name: "Vice Provost for Academic Affairs and DDAD", person: "Jeff Wereszczynski", children: [ { name: "Associate Faculty Director for Student Success", person: null, children: [] }, { name: "Assistant Vice Provost for Academic Affairs", person: null, children: [ { name: "Sr. Associate Director of Academic Affairs", person: null, children: [ { name: "Academic Advisor, Discover+", person: null, children: [] } ] }, { name: "Associate Director of Academic Affairs & Thesis Examiner", person: null, children: [ { name: "Sr. Assistant Director of Academic Affairs", person: null, children: [] }, { name: "Graduate & Transfer Programs Advisor", person: null, children: [] } ] }, { name: "Assistant Director of AMP & Joint Programs", person: null, children: [ { name: "Pathway and Bridge Program Advisor", person: null, children: [] }, { name: "Academic Advisor, Special Programs (Coursera)", person: null, children: [] } ] }, { name: "Academic Advisor", person: null, children: [] }, { name: "Software Technical Manager", person: null, children: [] }, { name: "Office Manager", person: null, children: [ { name: "AA Student Workers", person: null, children: [] } ] } ] }, { name: "Academic Success Coordinator", person: null, children: [ { name: "Academic Coaches and ARC Student Workers", person: null, children: [] } ] }, { name: "Associate Director of Leadership Programs", person: null, children: [ { name: "Leadership Mentors & Coaches", person: null, children: [] } ] } ] }, { name: "Vice Provost for Research", person: "Jeff Terry", children: [] }, { name: "Vice Provost for Accreditation and Assessment", person: "Nick Menhart", children: [] }, { name: "Dean of Libraries", person: "Devin Savage", children: [] }, { name: "Executive Director, Pritzker Institute of Biomedical Science and Engineering", person: "Philip Troyk", children: [ { name: "Director for Strategic Initiatives", person: "Natacha DePaola", children: [ { name: "Associate Director for Fellowships", person: "Abhinav Bhushan", children: [ { name: "Fellowship Program Coordinator", person: "TBD", children: [] } ] }, { name: "Associate Director for Translational Research", person: "Michael Barry", children: [] }, { name: "RES-MATCH Co-Coordinators", person: "Michael Barry, Oscar Juarez", children: [] }, { name: "Associate Director of NeuroOrganoid Laboratory", person: "Jialing Xiang", children: [] }, { name: "Administrative Assistant", person: "Karen Caruso", children: [] } ] }, { name: "Faculty Steering Committee", person: "Jialing Xiang, Natacha DePaola, John Georgiadis", children: [] }, { name: "Advisory Board", person: null, children: [] } ] } ] }, { name: "Vice President for Finance, Chief Financial Officer, and Treasurer", person: "Jeremy V. Fine", children: [] }, { name: "Associate Vice President of HEA Compliance and Title IX Compliance Coordinator", person: "Virginia Foster", children: [] }, { name: "Chief of Staff and Vice President for Strategy", person: "Jess Goode", children: [] }, { name: "Vice President and General Counsel", person: "Walter Hazlitt", children: [] }, { name: "Chief Human Resources Officer", person: "Amit Thomas", children: [ { name: "SEO Mgr", person: "Kathryn Potts", children: [ { name: "SEO Associate", person: "Terence Allen", children: [] }, { name: "SEO & HR Assistant", person: "Jada Allen", children: [] } ] }, { name: "HR Mgr", person: "Melissa Munoz Rush", children: [ { name: "HRBP", person: "Brian Steen", children: [] }, { name: "HR Generalist", person: "Ed Wright", children: [] }, { name: "HR Associate", person: "Nicole Sheppard", children: [] } ] }, { name: "Asst. Dir HRIS", person: "George Lara", children: [ { name: "HRIS II", person: "Kristi Harreld", children: [] }, { name: "HRIS I", person: "Marko Lazovic", children: [] }, { name: "HRIS I", person: "Alaina Hicks", children: [] } ] }, { name: "Benefits Mgr", person: "Vacant", children: [ { name: "Benefits Associate", person: "Vacant", children: [] }, { name: "Benefits Coordinator", person: "Jackie Perez", children: [] } ] } ] }, { name: "Vice President for Advancement", person: "Sean Campbell", children: [] }, { name: "University Ombudsperson", person: "Marsha Ross-Jackson", children: [] }, { name: "Executive Director, Ed Kaplan Family Institute for Innovation and Tech Entrepreneurship", person: "Maryam Saleh", children: [] }, { name: "Chief Learning and Innovation Officer", person: "Norma Scagnoli", children: [] }, { name: "Vice President for Enrollment Management and Student Affairs", person: "Mallik Sundharam", children: [] }, { name: "Vice President for Administration", person: "Bruce Watts", children: [] }, { name: "CIO", person: "Vaishnav, Sejal", children: [ { name: "Sr. Director, Project Management Off", person: "Atkinson, Anthony", children: [ { name: "Project Manager", person: "Loretto, Paul", children: [] }, { name: "Sr. Project Manager", person: "McDermott, Molly", children: [] }, { name: "Project Manager", person: "Salinas, Carlos", children: [] } ] }, { name: "Manager, Production Support", person: "Batson, Timothy", children: [ { name: "Integration Architect", person: "Atturi, Aparna", children: [] }, { name: "Technical Business Analyst", person: "Bozzetti, Benito", children: [] }, { name: "Business Analyst", person: "Vacant", children: [ { name: "Application Engineer - Level 2", person: "Dhuvala, Chandana", children: [] }, { name: "Ellucian Managed Services", person: "Ellucian Managed Services", children: [] } ] }, { name: "Business Analyst", person: "Gallardo, Natalia", children: [] }, { name: "Integration Engineer, Level 1", person: "Kim, Bori", children: [] }, { name: "Enterprise App Administrator, III", person: "Lagunas, Anthoula", children: [] }, { name: "Integration Engineer, Level II", person: "Lennert, Kristin", children: [] } ] }, { name: "Associate CIO, User Technical Services", person: "Breese, Eric", children: [ { name: "IT Director", person: "Vacant", children: [] }, { name: "Manager, Support Desk", person: "Buford, Rudi", children: [ { name: "Support Desk Technician II", person: "CruzZavala, Brandon", children: [] }, { name: "Support Desk Technician II", person: "Kall, Bret", children: [] }, { name: "Support Desk Technician II", person: "Smith, William", children: [] } ] }, { name: "Manager, Identity & Access Mgmt", person: "Hogan, Brian", children: [] }, { name: "Director, Technical Services", person: "Makowski, Mikayla", children: [ { name: "System Engineer", person: "Braden, Andrew", children: [] }, { name: "System Administrator", person: "Gonzalez, Juan", children: [] }, { name: "Senior Systems Engineer", person: "Mousa, Jamal", children: [] }, { name: "System Engineer", person: "Norris, Jonathan", children: [] } ] }, { name: "Manager, Audio-Visual Technologies", person: "Paul, Jhirmack", children: [ { name: "AV Technician", person: "Jackson, Alton", children: [] }, { name: "TV Station Engineer", person: "Korey, Jeffrey", children: [] } ] } ] }, { name: "Mngr, Insti Rprtng/Data Gvrnce", person: "Vacant", children: [ { name: "Data Analyst", person: "Gupta, Tanvi", children: [] }, { name: "Business Intelligence Analyst, I", person: "Vacant", children: [] }, { name: "Sr. Bus. Intelligence Analyst", person: "Vacant", children: [] }, { name: "IR Specialist", person: "Vacant", children: [] }, { name: "Report Writer, Level III", person: "Vacant", children: [] } ] }, { name: "Director, Academic Technology Serv.", person: "Kazibut, John", children: [ { name: "Media Producer/Production Mgr.", person: "Cantu, Robert", children: [] }, { name: "Multimedia Producer/Editor", person: "Davis, Lanique Ann", children: [] }, { name: "AV Systems Engineer", person: "Ciurej, Richard", children: [] }, { name: "Production Coordinator", person: "Guzman, Jose", children: [] }, { name: "Multimedia Specialist", person: "Burosh, Bobbi", children: [] }, { name: "Multimedia Specialist", person: "Cadet, Jean", children: [] }, { name: "Multimedia Specialist", person: "Martin, Tonishea", children: [] }, { name: "Multimedia Specialist", person: "Pitts, Christopher", children: [] } ] }, { name: "Director, Cyber-Tech Security", person: "Vacant", children: [ { name: "Security Analyst Operation", person: "Patil, Hansil", children: [] }, { name: "Security Analyst Compliance", person: "Djossou, Marlene", children: [] } ] }, { name: "Associate CIO, Infrastructure", person: "Oyewole, Ibukun", children: [ { name: "Network Manager", person: "Bucurica, Adrian", children: [ { name: "Network Engineer", person: "Chiu, Jack", children: [] }, { name: "Senior Network Engineer", person: "Rose, David", children: [] }, { name: "Network Engineer", person: "Vacant", children: [] } ] }, { name: "Information Systems Manager", person: "Eichhorst, Frederick", children: [ { name: "Systems Administrator", person: "Gandhi, Upendra", children: [] }, { name: "Systems Administrator - Linux", person: "Kamran, Babar", children: [] }, { name: "VMware / Windows Administrator", person: "Mui, Haley", children: [] }, { name: "Database Administrator", person: "Shen, Jie", children: [] }, { name: "Linux Administrator - Research", person: "Tufts, Jim", children: [] }, { name: "Voice-Services Engineer", person: "Shields, Kristin", children: [] } ] } ] }, { name: "Director, Office of CIO", person: "Provost, Christine", children: [] } ] } ] })3b:[] 2f:{"title":"Illinois Tech Org Chart","cells":[{"id":0,"value":"# Illinois Tech Org Chart","pinned":false,"hidden":false,"mode":"md"},{"id":91,"value":"viewof expandAll = Inputs.toggle({ label: \"Open/Close Everything?\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"---\n### Zoom/Pan\nDouble-click to zoom in steps, scroll to smoothly zoom, click on bold nodes to expand, click and drag to pan.","pinned":false,"hidden":false,"mode":"md"},{"id":109,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"---\n### More traditional style","pinned":false,"hidden":false,"mode":"md"},{"id":102,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"---\n### D3 Default Styles","pinned":false,"hidden":false,"mode":"md"},{"id":48,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"---\n### Illinois Tech Branding","pinned":false,"hidden":false,"mode":"md"},{"id":65,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"provost = ({\n name: \"Provost, Senior Vice President for Academic Affairs, and Chief Academic Officer\",\n person: \"Elizabeth Hudson\",\n children: [\n {\n name: \"Vice Provost of Faculty Affairs\",\n person: \"Jamshid Mohammadi\",\n children: []\n },\n {\n name: \"Vice Provost for Academic Strategy\",\n person: \"Jeremy Alexis\",\n children: []\n },\n {\n name: \"Vice Provost for Academic Transformation\",\n person: \"Kevin W. Cassel\",\n children: []\n },\n {\n name: \"Vice Provost for Academic Affairs\",\n person: \"Jeff Wereszczynski\",\n children: []\n },\n {\n name: \"Vice Provost for Research\",\n person: \"Jeff Terry\",\n children: []\n },\n {\n name: \"Vice Provost for Accreditation and Assessment\",\n person: \"Nick Menhart\",\n children: []\n },\n {\n name: \"Dean of Libraries\",\n person: \"Devin Savage\",\n children: []\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"viewof selectedFont = Inputs.select(\n [\n \"Roboto Slab\",\n \"Source Sans Pro\",\n \"Alegreya\",\n \"Inter\",\n \"Lato\",\n \"Laila\",\n \"Merriweather\",\n \"PT Serif\",\n \"Roboto Slab\",\n \"Rubik\",\n \"Crimson Text\"\n ],\n {\n label: \"Desired font\",\n // options:,\n value: \"Source Serif Pro\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"parseFont = selectedFont.split(\" \").join(\"+\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"style = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3b","stdlib":"1","titling":"auto"}