chart4 = { let width = 1300; let height = 1000; if (courses === "Only Math"||courses==="Only Computer Science"){ width = 1300; height = 700 } const courseTypeMap = { "Math and Computer Science": "B", "Only Math": "C", "Only Computer Science": "M" }; const course = courseTypeMap[courses]; const links1 = classes10.links.map(d => ({...d})); const nodes = classes10.nodes .filter(d => !d.id.startsWith(course)) .map(d => ({...d})); const links = links1.filter(link => { const sourceId = typeof link.source === 'object' ? link.source.id : link.source; const targetId = typeof link.target === 'object' ? link.target.id : link.target; return !sourceId.startsWith(course) && !targetId.startsWith(course); }); const nodeById = new Map(nodes.map(node => [node.id, node])); links.forEach(link => { link.source = nodeById.get(link.source); link.target = nodeById.get(link.target); }); const outDegrees = new Map(); links.forEach(link => { const sourceId = link.source.id; outDegrees.set(sourceId, (outDegrees.get(sourceId) || 0) + 1); }); const minRadius = 5; const maxRadius = 15; nodes.forEach(node => { const degree = outDegrees.get(node.id) || 0; node.radius = minRadius + (degree * 2); }); const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links) .id(d => d.id) .distance(d => (d.source.radius + d.target.radius) * 2)) .force("charge", d3.forceManyBody().strength(-300)) .force("center", d3.forceCenter(width / 2, height / 2+20)) .force("x", d3.forceX(width / 2+30).strength(0.03)) .force("y", d3.forceY(height / 2+20).strength(0.03)); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;"); // Add Title svg.append("text") .attr("x", width / 2) .attr("y", 30) .attr("text-anchor", "middle") .style("font-size", "20px") .style("font-weight", "bold") .text(`UM Course Offerings (${courses})`); // Add Subtitle svg.append("text") .attr("x", width / 2) .attr("y", 50) .attr("text-anchor", "middle") .style("font-size", "12px") .style("fill", "#555") .html("This network lists all courses that are pre/corequisites or have prerequisite courses.Any courses with requirements other than courses are listed in the table below instead.Highlight to see all courses that have that node as a direct or indirect pre/corequisite."); // Create markers with closer positioning svg.append("defs").selectAll("marker") .data(["prerequisite-small", "prerequisite-medium", "prerequisite-large", "corequisite-small", "corequisite-medium", "corequisite-large"]) .join("marker") .attr("id", d => d) .attr("viewBox", "0 -5 10 10") .attr("refX", d => { // Reduced refX values for closer arrows const size = d.split("-")[1]; const baseRefX = size === "small" ? 10 : (size === "medium" ? 11 : 12); return baseRefX; }) .attr("refY", 0) .attr("markerWidth", 6) .attr("markerHeight", 6) .attr("orient", "auto") .append("path") .attr("fill", d => d.startsWith("prerequisite") ? "#999" : "#66c2a5") .attr("d", "M0,-5L10,0L0,5"); const link = svg.append("g") .selectAll("line") .data(links) .join("line") .attr("stroke", d => d.type === "prerequisite" ? "#999" : "#66c2a5") .attr("stroke-width", 1.5) .attr("marker-end", d => { const targetRadius = d.target.radius; const size = targetRadius <= 8 ? "small" : (targetRadius <= 12 ? "medium" : "large"); return `url(#${d.type}-${size})`; }); const node = svg.append("g") .selectAll("g") .data(nodes) .join("g") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("position", "absolute") .style("visibility", "hidden") .style("background-color", "white") .style("border", "1px solid #ddd") .style("border-radius", "4px") .style("padding", "10px") .style("font-size", "12px") .style("box-shadow", "0 2px 4px rgba(0,0,0,0.1)"); node.append("circle") .attr("r", d => d.radius) .attr("fill", d => d.id.startsWith("M") ? "#ff7f0e" : "#1f77b4") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .on("mouseover", function(event, d) { d3.select(this).attr("stroke", "#666").attr("stroke-width", 2); tooltip .style("visibility", "visible") .html(` ${d.name || d.id}
Credits: ${d.credits || 'N/A'}
Offered: ${d.offered || 'N/A'}
Prerequisites: ${outDegrees.get(d.id) || 0} `) .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 10) + "px"); }) .on("mousemove", function(event) { tooltip .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 10) + "px"); }) .on("mouseout", function() { d3.select(this).attr("stroke", "#fff").attr("stroke-width", 1.5); tooltip.style("visibility", "hidden"); }); node.append("text") .attr("class", "labels") .attr("x", d => d.radius + 2) .attr("y", "0.31em") .text(d => d.id) .clone(true) .lower() .attr("fill", "none") .attr("stroke", "white") .attr("stroke-width", 3); node.append("circle") .attr("r", d => d.radius) .attr("fill", d => d.id.startsWith("M") ? "#ff7f0e" : "#1f77b4") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .on("mouseover", function(event, d) { d3.select(this).attr("stroke", "#666").attr("stroke-width", 2); // Highlight connected nodes and links const connectedNodes = getConnectedNodes(d); node.style("opacity", o => connectedNodes.has(o.id) ? 1 : 0.1); link.style("opacity", o => connectedNodes.has(o.source.id) && connectedNodes.has(o.target.id) ? 1 : 0.1); // Show tooltip tooltip .style("visibility", "visible") .html(` ${d.name || d.id}
Credits: ${d.credits || 'N/A'}
Offered: ${d.offered || 'N/A'}
Direct Prerequisite for ${outDegrees.get(d.id) || 0} Classes `) .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 10) + "px"); }) .on("mousemove", function(event) { tooltip .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 10) + "px"); }) .on("mouseout", function() { d3.select(this).attr("stroke", "#fff").attr("stroke-width", 1.5); // Reset opacity for all nodes and links node.style("opacity", 1); link.style("opacity", 1); tooltip.style("visibility", "hidden"); }); // Helper function to get all connected nodes recursively function getConnectedNodes(startNode) { const connectedNodes = new Set(); const stack = [startNode]; while (stack.length > 0) { const node = stack.pop(); // If already visited, skip if (connectedNodes.has(node.id)) continue; connectedNodes.add(node.id); // Find all outgoing links (prerequisites) links.forEach(link => { if (link.source === node && !connectedNodes.has(link.target.id)) { stack.push(link.target); // Recursive prerequisite (outward) trace } }); } return connectedNodes; } simulation.on("tick", () => { // Calculate the actual end points for the links link .attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => { const dx = d.target.x - d.source.x; const dy = d.target.y - d.source.y; const angle = Math.atan2(dy, dx); return d.target.x - (d.target.radius * Math.cos(angle)); }) .attr("y2", d => { const dx = d.target.x - d.source.x; const dy = d.target.y - d.source.y; const angle = Math.atan2(dy, dx); return d.target.y - (d.target.radius * Math.sin(angle)); }); node .attr("transform", d => `translate(${d.x},${d.y})`); }); function dragstarted(event) { if (!event.active) simulation.alphaTarget(0.3).restart(); event.subject.fx = event.subject.x; event.subject.fy = event.subject.y; } function dragged(event) { event.subject.fx = event.x; event.subject.fy = event.y; } function dragended(event) { if (!event.active) simulation.alphaTarget(0); event.subject.fx = null; event.subject.fy = null; } const legendWidth = 250; const baseY = 120; // Starting y-position for node size legend const padding = 5; // Padding between circles // Calculate all unique node sizes based on the prerequisite count const uniqueRadii = Array.from(new Set(nodes.map(node => { const degree = outDegrees.get(node.id) || 0; return minRadius + (degree * 2); }))).sort((a, b) => a - b); // Calculate total height based on unique radii and padding const legendHeight = baseY + uniqueRadii.reduce((acc, radius) => acc + 2 * radius + padding, 0); const legendSvg = svg; // Node color legend legendSvg.append("circle") .attr("cx", 20) .attr("cy", 20) .attr("r", 5) .attr("fill", "#ff7f0e"); legendSvg.append("text") .attr("x", 40) .attr("y", 24) .text("Math Course"); legendSvg.append("circle") .attr("cx", 20) .attr("cy", 40) .attr("r", 5) .attr("fill", "#1f77b4"); legendSvg.append("text") .attr("x", 40) .attr("y", 44) .text("Computer Science Course"); // Link color legend legendSvg.append("line") .attr("x1", 10) .attr("y1", 70) .attr("x2", 30) .attr("y2", 70) .attr("stroke", "#999") .attr("stroke-width", 1.5); legendSvg.append("text") .attr("x", 40) .attr("y", 74) .text("Prerequisite Link"); legendSvg.append("line") .attr("x1", 10) .attr("y1", 90) .attr("x2", 30) .attr("y2", 90) .attr("stroke", "#66c2a5") .attr("stroke-width", 1.5); legendSvg.append("text") .attr("x", 40) .attr("y", 94) .text("Corequisite Link"); // Node size legend with dynamic spacing let currentY = baseY; uniqueRadii.forEach((radius, i) => { legendSvg.append("circle") .attr("cx", 20) .attr("cy", currentY + radius) .attr("r", radius) .attr("fill", "#ccc") .attr("stroke", "#fff") .attr("stroke-width", 1.5); legendSvg.append("text") .attr("x", 40) .attr("y", currentY + radius + 4) // Adjust text position .text(`${(radius - minRadius) / 2} Dependent Courses`); currentY += 2 * radius + padding; // Update currentY based on radius and padding }); return legendSvg.node(); return svg.node(); }