29:null 2a:["$","title",null,{"children":"NU Khoury College Faculty | Chris Lindgren | Observable"}] 2f:T1417,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" ); graph.nodes.map( (d) => (d.r = d.type === "Faculty" ? nodeSize + (nodeSize * d.degree) / 3 : greyNodeSize) ); const chargeScale = d3.scaleLinear().domain([20, 150]).range([-150, -50]); const simulation = d3 .forceSimulation(graph.nodes) .alpha(1) .force( "link", d3 .forceLink(graph.links) .id((d) => d.name) .distance(20) .strength(0.2) ) .force( "charge", d3 .forceManyBody() .strength((d) => (d.r / 10) * chargeScale(graph.nodes.length)) ) .force("collide", d3.forceCollide((d) => d.r + 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)) .on("tick", ticked); // -------- HULLS --------- const area = d3.line().curve(d3.curveCardinalClosed); const hp = hullPadding; const getHull = (d) => { debugger; 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(); console.log("hull points", points); 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, (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 label = nodeG .selectAll("text") .data( graph.nodes.filter((d) => d.type === "Faculty" ? d.degree >= minDegree : 1 ), (d) => d.name ) .join("text") .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) => d.type === "Faculty" ? `${fontSize}pt` : `${fontSize * 2.2}pt` ) .attr("font-weight", (d) => (d.type === "Faculty" ? "light" : "bolder")) .attr("font-family", "Oswald") .attr("pointer-events", "none") .text((d) => d.name); 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); node .attr("cx", (d) => d.x) .attr("cy", (d) => d.y) .classed("shadow", simulation.alpha() <= 0.1); hull.attr("d", getHull); } // ----------- 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()}

`; }30:T4eb,viewof colorInterpolator = { const colorSchemes = [ "interpolateBlues", "interpolateBrBG", "interpolateBuGn", "interpolateBuPu", "interpolateCividis", "interpolateCool", "interpolateCubehelixDefault", "interpolateGnBu", "interpolateGreens", "interpolateGreys", "interpolateInferno", "interpolateMagma", "interpolateOrRd", "interpolateOranges", "interpolatePRGn", "interpolatePiYG", "interpolatePlasma", "interpolatePuBu", "interpolatePuBuGn", "interpolatePuOr", "interpolatePuRd", "interpolatePurples", "interpolateRainbow", "interpolateRdBu", "interpolateRdGy", "interpolateRdPu", "interpolateRdYlBu", "interpolateRdYlGn", "interpolateReds", "interpolateSinebow", "interpolateSpectral", "interpolateString", "interpolateTurbo", "interpolateViridis", "interpolateWarm", "interpolateYlGn", "interpolateYlGnBu", "interpolateYlOrBr", "interpolateYlOrRd" ]; const colors = new Map( [["Custom Turbo", (t) => d3.interpolateTurbo(0.2 + t * 0.8)]].concat( colorSchemes.map((c) => [c, d3[c]]) ) ); return Inputs.select(colors, { label: "Color Scheme", format: (d) => d[0] }); }31:T5f3,graph = { for (let n of dData.values()) { n.degree = 0; } const linksArray = links.objects(); for (let l of linksArray) { const source = dData.get(l.source); // target = dNodes.get(l.target); source.cluster = l.target; // target.cluster = l.target; source.degree += 1; // target.degree += 1; } const getOrCreateNode = (name) => { let node = dConnections.get(name); if (!node) { node = { name, type: "Connection", cluster: name, x: width / 2 + (Math.random() * width) / 10, y: height / 2 + (Math.random() * height) / 10 }; dConnections.set(name, node); } return node; }; // --------- Filter Links and Nodes -------------- const filteredLinks = linksArray.map((l) => { return { source: dData.get(l.source), target: getOrCreateNode(l.target) }; }); const filteredNodesObject = filteredLinks.reduce( (p, l) => { if (!p.set.has(l.source.name)) { p.set.add(l.source.name); p.list.push(l.source); } if (!p.set.has(l.target.name)) { p.set.add(l.target.name); p.list.push(l.target); } return p; }, { set: new Set(), list: [] } ); // Clusters is used for the hulls const clusters = d3.rollups( filteredLinks, (v) => v.map((l) => l.source).concat([v[0].target]), (d) => d.target.name ); return { nodes: filteredNodesObject.list, links: linksArray, clusters: clusters }; }32:[{"id":"6c3cb5ff224b063eccdfe0b20f430ad204c9a9ffb94e05296d430457640f5cf7953c935f11f52770ee216de9380b3cdde984e2dc1fd6f51836e3b6bc8d192ddb","href":"https://static.observableusercontent.com/files/6c3cb5ff224b063eccdfe0b20f430ad204c9a9ffb94e05296d430457640f5cf7953c935f11f52770ee216de9380b3cdde984e2dc1fd6f51836e3b6bc8d192ddb","name":"Faculty_May_2022.csv","type":"text/csv","lastModified":1682016679406.67,"size":32547}] 2d:{"id":"073c49620701af7b","slug":null,"title":"NU Khoury College Faculty","thumbnail":"e536d6221e6873d55bdde5dfb011d2dc5c905db957d6291e3f539aa89f3a57ea","access_level":"public","create_time":"$D2023-04-20T18:51:19.406Z","update_time":"$D2023-04-20T18:51:19.406Z","view_time":null,"first_public_time":"$D2023-04-20T18:51:19.406Z","fork":{"id":"0eea8017bc7a02ac","slug":"khoury-faculty","title":"NU Khoury College Faculty","owner":{"id":"cd3c1e49fc84d010","login":"john-guerra","name":"John Alexis Guerra Gómez"}},"stars":0,"starred":false,"owner":{"type":"team","id":"65672682fc6420ec","login":"lingeringcode","name":"Chris Lindgren","avatar_url":"https://avatars-next.observableusercontent.com/483a12ccaf8f88b785a04ba865ef4c1f31a0356256cb470cb116e7e9b24c2aba","tier":"starter_2024"},"version":1127,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5dd9c3e09645ea29","login":"lingeringcode","name":"Chris Lindgren","avatar_url":"https://avatars-next.observableusercontent.com/483a12ccaf8f88b785a04ba865ef4c1f31a0356256cb470cb116e7e9b24c2aba","tier":null}],"members":[{"type":"individual","id":"5dd9c3e09645ea29","login":"lingeringcode","name":"Chris Lindgren","avatar_url":"https://avatars-next.observableusercontent.com/483a12ccaf8f88b785a04ba865ef4c1f31a0356256cb470cb116e7e9b24c2aba","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"NU Khoury College Faculty","cells":[{"id":0,"value":"# NU Khoury College Faculty\n\nNortheastern University's Khoury College of Computer Science has a very diverse and multidisciplinary set of Faculty. Here you can see professors with affiliations with other departments. Data updated to 2022, we are working on getting it updated.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":329,"value":"viewof groupBy = {\n // `[\"Last Name\",\"First Name\",\"Appointments\",\"Job Profile\",\"Picture URL\",\"Research Areas\",\"Labs and Groups\",\"Institutes and Centers\",\"Date of joining NU\",\"Courses\",\"Campus\",\"Supervisory Organization\",\"Title\",\"Academic Track Type\",\"Degrees\",\"Last School Attended\",\"Year Highest Degree Received\",\"Interdisciplinary Dept 1\",\"Interdisciplinary College 1\",\"Interdisciplinary Dept 2\",\"Interdisciplinary College 2\",\"Interdisciplinary Dept 3\",\"Interdisciplinary College 3\",\"name\",\"selected\",\"__seqId\",\"__i\",\"Appointment\"]`\n\n const attrs = [\n \"Appointment\",\n \"Job Profile\",\n \"Campus\",\n \"Research Areas\",\n \"Academic Track Type\",\n \"Degrees\",\n // \"Labs and Groups\",\n \"Institutes and Centers\",\n \"Supervisory Organization\",\n // \"Last School Attended\"\n ];\n return Inputs.select(attrs, { label: \"Group By\", value: \"Appointment\" });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":436,"value":"viewof selectedTargets = {\n const targetNames = tidyData\n .groupby(groupBy)\n .count()\n .objects()\n .map((d) => d[groupBy])\n .filter((d) => d);\n const selection =\n groupBy === \"Appointment\"\n ? targetNames.filter((d) => d !== \"Khoury College of Computer Sciences\")\n : targetNames;\n return Inputs.checkbox(targetNames, {\n label: \"Show\",\n value: selection,\n format: (d) => html`

${d}

`\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":84,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":498,"value":"viewof height = Inputs.range([200, 1400], {label: \"height\", step:1, value: 600})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":678,"value":"viewof showGroupingNodes = Inputs.toggle({label: \"Show (connecting) grey nodes\", value: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":680,"value":"viewof fontSize = Inputs.range([1, 36], {label: \"Font size\", value: 8, step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":703,"value":"viewof nodeSize = Inputs.range([1, 30], {label: \"Node Size\", value: 8, step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":705,"value":"viewof greyNodeSize = Inputs.range([1, 30], {label: \"Connecting Node Size\", value: 3, step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1004,"value":"viewof hullPadding = Inputs.range([0, 100], {label: \"Hull Padding\", value: 10, step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":774,"value":"viewof minDegree = Inputs.range([0, d3.max(graph.nodes, (d) => d.degree)+1], {\n label: \"Min Degree for Label\",\n value: 2,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":720,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":747,"value":"viewof useShadowsText = Inputs.toggle({label: \"Use Text Shadows\", value: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1079,"value":"viewof useShadowsNodes = Inputs.toggle({label: \"Use Node Shadows\", value: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1027,"value":"Faculty who joined before (WIP):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":798,"value":"viewof minDate = {\n const dates = data\n .map((d) => d.date)\n .filter((d) => d)\n .sort((a, b) => d3.ascending(+a, +b));\n return Scrubber(dates, {\n delay: 500,\n autoplay: false,\n initial: dates.length-1\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":368,"value":"style = html`\n\n\n\n