chart_final = { const width = 928; const height = width; // Color palette for drug classes const classColor = d3.scaleOrdinal(d3.schemeTableau10); function classOf(d) { let node = d; while (node.depth > 1) node = node.parent; return node.data.name; } function fillFor(d) { if (d.depth === 0) return "#f7f7f7"; const baseColor = d3.color(classColor(classOf(d))); if (d.depth === 1) return baseColor.darker(0.35).formatHex(); // drug class if (d.depth === 2) return baseColor.brighter(0.35).formatHex(); // generic drug return baseColor.brighter(1.4).formatHex(); // reaction } const pack = data => d3.pack() .size([width, height]) .padding(4) ( d3.hierarchy(data) .sum(d => d.value) .sort((a, b) => b.value - a.value) ); const root = pack(data_SC); const container = d3.create("div") .style("position", "relative") .style("width", "100%") .style("font-family", "system-ui, -apple-system, BlinkMacSystemFont, sans-serif"); // Title block container.append("div") .style("margin", "0 0 10px 0") .html(`

Top 10 Reported Drug Classes for Adverse Reactions

Click circle/background to zoom in/out and explore different drug classes, or search by a specific generic drug name

Hover over circles to view report counts, serious event counts, non-serious event counts and percentage of serious events
(Note: circle size reflects report frequency)

`); // Search UI const filterWrap = container.append("div") .style("position", "absolute") .style("top", "125px") .style("left", "14px") .style("z-index", 10) .style("display", "flex") .style("flex-direction", "column") .style("gap", "4px") .style("font", "13px sans-serif"); const input = filterWrap.append("input") .attr("type", "search") .attr("placeholder", "Find generic drug name...") .attr("list", "generic-drug-list") .style("padding", "7px 10px") .style("border", "1px solid #bbb") .style("border-radius", "7px") .style("background", "white") .style("width", "230px") .style("box-shadow", "0 1px 4px rgba(0,0,0,0.12)"); const drugNames = Array.from(new Set( root.descendants() .filter(d => d.depth === 2) .map(d => d.data.name) )).sort(); const datalist = filterWrap.append("datalist").attr("id", "generic-drug-list"); datalist.selectAll("option") .data(drugNames) .join("option") .attr("value", d => d); const status = filterWrap.append("div") .style("color", "#555") .style("font-size", "12px"); const svg = container.append("svg") .attr("viewBox", `-${width / 2} -${height / 2} ${width} ${height}`) .attr("width", width) .attr("height", height) .attr("style", ` max-width: 100%; height: auto; display: block; background: #f7f7f7; cursor: pointer; border-radius: 12px; `); const node = svg.append("g") .selectAll("circle") .data(root.descendants().slice(1)) .join("circle") .attr("fill", d => fillFor(d)) .attr("pointer-events", "all") .attr("stroke", "rgba(255,255,255,0.75)") .attr("stroke-width", 1) .on("click", (event, d) => focus !== d && (zoom(event, d), event.stopPropagation())); // Floating tooltip const tooltip = container.append("div") .style("position", "absolute") .style("display", "none") .style("pointer-events", "none") .style("background", "rgba(255,255,255,0.97)") .style("border", "1px solid #ccc") .style("border-radius", "8px") .style("padding", "9px 11px") .style("font", "12px sans-serif") .style("line-height", "1.45") .style("box-shadow", "0 3px 10px rgba(0,0,0,0.18)") .style("max-width", "280px") .style("z-index", 20); node .on("mouseover", function(event, d) { d3.select(this) .attr("stroke", "#111") .attr("stroke-width", 2.5); const level = d.depth === 1 ? "Drug Class" : d.depth === 2 ? "Generic Drug" : "Adverse Reaction"; const reports = d.data?.reaction_count ?? d.data?.value ?? d.value ?? "NA"; const seriousCount = d.data?.serious_count ?? "NA"; const nonSeriousCount = d.data?.non_serious_count ?? ( seriousCount !== "NA" && reports !== "NA" ? reports - seriousCount : "NA" ); const seriousPct = d.data?.serious_pct ?? "NA"; tooltip .style("display", "block") .html(` ${d.data.name}
Reports: ${reports}
Serious reports: ${seriousCount}
Non-serious reports: ${nonSeriousCount}
% Serious: ${seriousPct} `); }) .on("mousemove", function(event) { const [x, y] = d3.pointer(event, container.node()); tooltip .style("left", `${x + 15}px`) .style("top", `${y + 15}px`); }) .on("mouseout", function() { d3.select(this) .attr("stroke", "rgba(255,255,255,0.75)") .attr("stroke-width", 1); tooltip.style("display", "none"); }); const label = svg.append("g") .style("font", "14px sans-serif") .attr("pointer-events", "none") .attr("text-anchor", "middle") .selectAll("text") .data(root.descendants()) .join("text") .style("fill-opacity", d => d.parent === root ? 1 : 0) .style("display", d => d.parent === root ? "inline" : "none") .style("fill", "#1a1a1a") .style("stroke", "white") .style("stroke-width", 3.5) .style("paint-order", "stroke fill") .style("stroke-linejoin", "round"); label.each(function(d) { const text = d3.select(this); const words = d.data.name.split(/\s+/); const maxCharsPerLine = 20; const lines = []; let currentLine = ""; for (const word of words) { if ((currentLine + " " + word).trim().length <= maxCharsPerLine) { currentLine = (currentLine + " " + word).trim(); } else { if (currentLine) lines.push(currentLine); currentLine = word; } } if (currentLine) lines.push(currentLine); const lineHeight = 1.1; const startDy = -((lines.length - 1) / 2) * lineHeight; lines.forEach((line, i) => { text.append("tspan") .attr("x", 0) .attr("dy", `${i === 0 ? startDy : lineHeight}em`) .text(line); }); }); svg.on("click", event => zoom(event, root)); let focus = root; let view; zoomTo([focus.x, focus.y, focus.r * 2]); function zoomTo(v) { const k = width / v[2]; view = v; label.attr("transform", d => `translate(${(d.x - v[0]) * k},${(d.y - v[1]) * k})`); node.attr("transform", d => `translate(${(d.x - v[0]) * k},${(d.y - v[1]) * k})`); node.attr("r", d => d.r * k); } function zoom(event, d) { focus = d; const transition = svg.transition() .duration(event.altKey ? 7500 : 750) .tween("zoom", () => { const i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2]); return t => zoomTo(i(t)); }); label .filter(function(d) { return d.parent === focus || this.style.display === "inline"; }) .transition(transition) .style("fill-opacity", d => d.parent === focus ? 1 : 0) .on("start", function(d) { if (d.parent === focus) this.style.display = "inline"; }) .on("end", function(d) { if (d.parent !== focus) this.style.display = "none"; }); } function applyFilter(query) { const q = (query || "").trim().toLowerCase(); if (!q) { node.transition().duration(250) .style("opacity", 1) .attr("stroke-width", 1); status.text(""); return; } const matchingDrugs = root.descendants() .filter(d => d.depth === 2 && d.data.name.toLowerCase().includes(q)); const keep = new Set(); const isMatch = new Set(matchingDrugs); for (const d of matchingDrugs) { keep.add(d); let p = d.parent; while (p) { keep.add(p); p = p.parent; } d.descendants().forEach(x => keep.add(x)); } node.transition().duration(250) .style("opacity", d => keep.has(d) ? 1 : 0.12); node .attr("stroke", d => isMatch.has(d) ? "#111" : "rgba(255,255,255,0.75)") .attr("stroke-width", d => isMatch.has(d) ? 3 : 1); status.text(`${matchingDrugs.length} match${matchingDrugs.length === 1 ? "" : "es"}`); } filterWrap.on("click", event => event.stopPropagation()); input.on("input", function() { applyFilter(this.value); }); // Footer const footer = container.append("div") .style("margin-top", "8px") .style("max-width", `${width}px`) .style("font-size", "12px") .style("color", "#3a3a3a") .style("text-align", "right") footer.append("div") .html("Data from the FDA Adverse Event Reporting System (FAERS): https://open.fda.gov/apis/drug/event/"); footer.append("div") .html("*This work adapts existing visualization example by Mike Bostock: https://observablehq.com/@d3/zoomable-circle-packing") return container.node(); }