chart = { const svg = this ? d3.select(this).select("svg") : d3.create("svg"); svg .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr( "style", "max-width: 100%; height: auto; height: intrinsic; overflow: visible" ); svg .append("clipPath") .attr("id", "circleClip") .append("circle") .attr("cx", 0) .attr("cy", 0) .attr("r", nodeSize); graph.nodes.map( (d) => (d.r = d.type === "Faculty" ? nodeSize * (d.degree / 2 + 1) : greyNodeSize) ); const chargeScale = d3 .scaleLinear() .domain([20, 160]) .range([width < 800 ? -100 : -200, width < 800 ? -50 : -100]); const chargeStrength = (d) => (nodeSize / 7) * (d.degree > 1 ? 1 : 0.7) * chargeScale(graph.nodes.length); const simulation = d3 .forceSimulation(graph.nodes) .alpha(3) .force( "link", d3 .forceLink(graph.links) .id((d) => d.name) .distance(10) .strength(0.1) ) .force( "charge", d3.forceManyBody().strength(chargeStrength) // .strength((d) => (d.degree*2) * chargeScale(graph.nodes.length)) ) .force("collide", d3.forceCollide((d) => d.r*1.3).iterations(4)) // .force("center", d3.forceCenter(width / 2, height / 2)) .force("x", d3.forceX(width / 2).strength(0.1)) .force("y", d3.forceY(height / 2).strength((0.07 * width) / height)); // -------- HULLS --------- const area = d3.line().curve(d3.curveCardinalClosed); const hp = hullPadding; const getHull = (d) => { const points = d[1] .filter((d) => showGroupingNodes || d.type === "Faculty") .map((n) => [ [n.x - (n.r + hp), n.y], [n.x + n.r + hp, n.y], [n.x, n.y + n.r + hp], [n.x, n.y - (n.r + hp)] ]) .flat(); const hull = d3.polygonHull(points); return hull && area(hull); }; const hullG = this ? svg.select("g#gHulls") : svg.append("g").attr("id", "gHulls"); const hull = hullG .selectAll("path.hull") .data( graph.clusters.filter( ([id, _]) => !excludeKhouryHull || id !== "Khoury College of Computer Sciences" ), (d) => d[0] ) .join("path") .attr("class", "hull") // .attr("d", getHull) .attr("fill", (d) => hullColor(d[0])) .attr("opacity", 0.3) .attr("pointer-events", "none"); // -------- LINKS --------- const linkG = this ? svg.select("g#gLinks") : svg.append("g").attr("id", "gLinks"); const link = linkG .attr("stroke", "#999a") .attr("stroke-opacity", 1) .attr("stroke-width", 0.5) .attr("stroke-linecap", "round") .selectAll("line") .data( graph.links.filter( (d) => showGroupingNodes || d.target.type === "Faculty" ), (d) => `${d.source.name}-${d.target.name}` ) .join("line"); // -------- NODES --------- const nodeG = this ? svg.select("g#gNodes") : svg.append("g").attr("id", "gNodes"); const node = nodeG .selectAll("circle") .data( graph.nodes.filter( (d) => showGroupingNodes || d.type === "Faculty" // hide grey nodes ), (d) => d.name ) .join("circle") .attr("fill", (d) => (d.type !== "Faculty" ? "#999" : hullColor(d.cluster))) // .attr("stroke", "black") .attr("stroke-opacity", 1) .attr("stroke-width", 1) .attr("r", (d) => d.r) .call(drag(simulation)); // -------- LABELS --------- const getNameArray = (d) => (d.nameArray ? d.nameArray : d.name.split(" ")); const fontSizeFn = (d) => fontSize * (d.type === "Faculty" ? d.r / nodeSize / 2 : 1.8); const lineWidth = 1.3; const createLabels = (_data, className = "facultyLabel") => nodeG .selectAll(`text.${className}`) .data(_data, (d) => d.name) .join("text") .attr("class", className) .attr("text-align", "center") .attr("text-anchor", "middle") // .attr( // "dy", // (d) => 5 + d.r + (d.type === "Faculty" ? fontSize : fontSize * 1.6) // ) .attr("font-size", (d) => `${fontSizeFn(d)}pt`) .attr("font-weight", (d) => (d.type === "Faculty" ? "light" : "bolder")) .attr("font-family", "Oswald") .attr("pointer-events", "none") .style("clip-path", (d) => clipLabels && d.type === "Faculty" ? `circle(${d.r}px at 50% 50%)` : "" ) // .text((d) => d.name); .each(function (d) { return ( d3 .select(this) .selectAll("tspan") .data(getNameArray) .join("tspan") .attr("x", 0) // 1.3 for each line, but then move back for centering on y .attr("dy", (d) => fontSizeFn(d) + "pt" ) .attr("dy", "2.3ch") .text((n) => n) ); }) .attr("y", (d) => (getNameArray(d).length / 2) * -lineWidth + "ch"); // Create labels for faculty, so it is behind the image const label = createLabels( graph.nodes.filter((d) => d.type === "Faculty" ? d.degree >= minDegree : 0 ), "facultyLabel" ); // ---------- IMAGES --------------- const images = nodeG .selectAll("image") .data( useImages ? graph.nodes.filter( (d) => d.type === "Faculty" && d.photo && d.photo.toUpperCase().indexOf("JPG") !== -1 ) : [], (d) => d.name ) .join("image") .attr("href", (d) => d.photo) .attr("width", (d) => d.r * 2 - 4) .attr("height", (d) => d.r * 2 - 4) .attr("stroke", "black") .attr("preserveAspectRatio", "xMidYMid slice") .attr("transform", (d) => `translate(-${d.r - 2}, -${d.r - 2})`) .style("clip-path", (d) => `circle(${d.r - 2}px)`) .call(drag(simulation)); function ticked() { link // .attr("display", simulation.alpha() <= 0.1 ? "block" : "none") .attr("x1", (d) => d.source.x) .attr("y1", (d) => d.source.y) .attr("x2", (d) => d.target.x) .attr("y2", (d) => d.target.y); label .attr("transform", (d) => `translate(${d.x}, ${d.y})`) .classed("shadow", simulation.alpha() <= 0.1); labelDepts .attr("transform", (d) => `translate(${d.x}, ${d.y})`) .classed("shadow", simulation.alpha() <= 0.1); node .attr("cx", (d) => d.x) .attr("cy", (d) => d.y) .classed("shadow", simulation.alpha() <= 0.1); useImages && images // .attr("transform", (d) => `translate(${d.x}, ${d.y})`) .attr("x", (d) => d.x) .attr("y", (d) => d.y); hull.attr("d", getHull); } // --------- Department Labels ------------ const labelDepts = createLabels( graph.nodes.filter((d) => d.type !== "Faculty"), "departmentLabel" ); simulation.on("tick", ticked); // ----------- Drag ---------------- function drag(simulation) { 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; } return d3 .drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); } // ----------- /Drag ---------------- invalidation.then(() => simulation.stop()); ticked(); return htl.html`

Khoury Faculty by ${groupBy}

${svg.node()}

`; }