31:T836,interactive_lab_keywords_graphs = { await visibility(); const singleGraph = labSelectorType === "Dropdown"; const validLabs = labs.filter( (d) => d[keywords_source] && d[keywords_source].length > 0 ); const labsGraph = !singleGraph ? createGraphLabs(width * 0.4, height, simulationLabs) : Inputs.radio( ["all"].concat(validLabs.map((d) => d.name)), { label: "Select lab", value: "all" } ); const keywords = createGraphKeywords( singleGraph ? width : width * 0.7, height ); // create a container let container = document.createElement("div"); container.style.backgroundColor = "white"; // container.style.padding = "30px"; container.style.display = "flex"; container.style.justifyContent = "space-between"; container.style.height = `${height}px`; // append SVGs to the container container.appendChild(labsGraph); container.appendChild(keywords); if (singleGraph) { labsGraph.style.position = "absolute"; labsGraph.style.padding = "30px"; labsGraph.style.backgroundColor = "white"; } if (singleGraph) { labsGraph.addEventListener("input", (event) => { const selectedNode = event.target.value, name = selectedNode == 0 ? "all" : labs[selectedNode].name; keywords.filterNodes( name == "all" ? null : normalizedKeywordsLabsMap.get(name) ); }); } else { labsGraph.addEventListener("input", (event) => { const selectedNode = event.target.value; if (selectedNode) { keywords.filterNodes(normalizedKeywordsLabsMap.get(selectedNode.id)); } }); labsGraph.addEventListener("mouseleave", () => { keywords.filterNodes(null); }); keywords.addEventListener("input", (event) => { const word = event.target.value; if (word && word.length > 0) { labsGraph.filterNodes(word); } }); keywords.addEventListener("mouseleave", () => { labsGraph.filterNodes(null); }); } return Object.assign( container, singleGraph ? {} : { labsSimulation: labsGraph.simulation } ); }32:T4d5,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/sunburst sunburst_interactive = { await visibility(); const data = filterTree(createTree(commonKeywordsTree, "knowledge"), 4); const graph = createGraphLabs(width / 2, height, simulationLabs, true); const sunburst = createSunburst(data, { sWidth: width / 2, height: width / 2 }); // create a container let container = document.createElement("div"); container.style.backgroundColor = "white"; // container.style.padding = "30px"; container.style.display = "flex"; container.style.justifyContent = "space-between"; container.style.height = `${height}px`; // append SVGs to the container container.appendChild(sunburst); container.appendChild(graph); graph.addEventListener("input", (event) => { const selectedNode = event.target.value; if (selectedNode) { const sunburst_weights = labs_trees.get(selectedNode.id).sunburst_weights; sunburst.filterTree(sunburst_weights, selectedNode.id); } else { sunburst.filterTree(null); } }); // graph.addEventListener("mouseleave", () => sunburst.filterTree([])); return Object.assign(container, { ...sunburst }); }33:Tf21,createZoomable = (tree) => { const root = partition(tree); root.each((d) => (d.current = d)); const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, width]) .style("font", "10px sans-serif"); const g = svg .append("g") .attr("transform", `translate(${width / 2},${width / 2})`); const path = g .append("g") .selectAll("path") .data(root.descendants().slice(1)) .join("path") .attr("fill", (d) => { while (d.depth > 1) d = d.parent; return conceptColorScale(d.data.name); }) .attr("fill-opacity", (d) => arcVisible(d.current) ? (d.children ? 0.6 : 0.4) : 0 ) .attr("pointer-events", (d) => (arcVisible(d.current) ? "auto" : "none")) .attr("d", (d) => arc(d.current)); path .filter((d) => d.children) .style("cursor", "zoom-in") .on("click", clicked); const label = g .append("g") .attr("pointer-events", "none") .attr("text-anchor", "middle") .style("user-select", "none") .selectAll("text") .data(root.descendants().slice(1)) .join("text") .attr("dy", "0.35em") .attr("fill-opacity", (d) => +labelVisible(d.current)) .attr("transform", (d) => labelTransform(d.current)) .text((d) => d.data.name); const parent = g .append("g") .datum(root) .attr("pointer-events", "all") .on("click", clicked); const parentCircle = parent .append("circle") .attr("r", radius) .attr("fill", "none"); const title = parent .append("text") .attr("text-anchor", "middle") .attr("font-size", "larger") .text(tree.name.toUpperCase()); const subTitle = parent .append("text") .attr("text-anchor", "middle") .attr("font-size", "middle") .attr("transform", (d) => `translate(0 , 15)`); function clicked(event, p) { parent .datum(p.parent || root) .attr("cursor", p.data.depth == 0 ? "default" : "zoom-out"); subTitle.text(p.data.name !== root.data.name ? p.data.name : ""); root.each( (d) => (d.target = { x0: Math.max(0, Math.min(1, (d.x0 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI, x1: Math.max(0, Math.min(1, (d.x1 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI, y0: Math.max(0, d.y0 - p.depth), y1: Math.max(0, d.y1 - p.depth) }) ); const t = g.transition().duration(750); // Transition the data on all arcs, even the ones that aren’t visible, // so that if this transition is interrupted, entering arcs will start // the next transition from the desired position. path .transition(t) .tween("data", (d) => { const i = d3.interpolate(d.current, d.target); return (t) => (d.current = i(t)); }) .filter(function (d) { return +this.getAttribute("fill-opacity") || arcVisible(d.target); }) .attr("fill-opacity", (d) => arcVisible(d.target) ? (d.children ? 0.6 : 0.4) : 0 ) .attr("pointer-events", (d) => (arcVisible(d.target) ? "auto" : "none")) .attrTween("d", (d) => () => arc(d.current)); label .filter(function (d) { return +this.getAttribute("fill-opacity") || labelVisible(d.target); }) .transition(t) .attr("fill-opacity", (d) => +labelVisible(d.target)) .attrTween("transform", (d) => () => labelTransform(d.current)); } function arcVisible(d) { return d.y1 <= 3 && d.y0 >= 1 && d.x1 > d.x0; } function labelVisible(d) { return d.y1 <= 3 && d.y0 >= 1 && (d.y1 - d.y0) * (d.x1 - d.x0) > 0.03; } function labelTransform(d) { const x = (((d.x0 + d.x1) / 2) * 180) / Math.PI; const y = ((d.y0 + d.y1) / 2) * radius; return `rotate(${x - 90}) translate(${y},0) rotate(${x < 180 ? 0 : 180})`; } return svg.node(); }34:T1928,function createGraphKeywords(width, height) { let simulationLinks = wordLinks; let simulationNodes = keywordNodes; let nodeSizeScale = d3 .scaleSqrt() .domain(d3.extent(simulationNodes, (d) => d.size)) // Use the range of your link weights .range([15, 60]) // Adjust this range according to your preference .clamp(true); // Ensures that the scale never returns a value outside the output range let fontSizeScale = d3 .scaleSqrt() .domain(d3.extent(simulationNodes, (d) => d.size)) // Use the range of your link weights .range([10, 60]) // Adjust this range according to your preference .clamp(true); // Ensures that the scale never returns a value outside the output range let linkStrengthScale = d3 .scaleLinear() .domain(d3.extent(simulationLinks, (d) => d.weight)) // Use the range of your link weights .range([0.1, 6]) // Adjust this range according to your preference .clamp(true); // Ensures that the scale never returns a value outside the output range let linkDistanceScale = d3 .scaleLinear() .domain(d3.extent(simulationLinks, (d) => d.weight)) // Use the range of your link weights .range([200, 100]) // Adjust this range according to your preference .clamp(true); // Ensures that the scale never returns a value outside the output range let simulation = d3 .forceSimulation(simulationNodes) .force( "link", d3 .forceLink(simulationLinks) .id((d) => d.id) .strength((d) => linkStrengthScale(d.weight)) // Apply the link strength scale here .distance(150) ) .force("charge", d3.forceManyBody().strength(-15000).theta(0.3)) .force( "x", d3 .forceX() .x(width / 2) .strength(1.5) ) .force( "y", d3 .forceY() .y(height / 2) .strength(1.5) ) .force( "collide", d3.forceCollide().radius((d) => nodeSizeScale(d.size) * 3) ) .tick(100); // Create an svg to hold the visualization and apply the zoom behavior to it let svg = d3.create("svg").attr("viewBox", [0, 0, width, height]), g = svg.append("g"); const input = svg.node(); // Create lines for the simulationLinks let link = g .append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .attr("stroke-width", 0.4) .selectAll("line") .data(simulationLinks) .join("line"); // Create circles for the simulationNodes let node = g .append("g") .selectAll("g") .data(simulationNodes) .enter() .append("g") .style("cursor", "move"); node .append("circle") .attr("r", (d) => nodeSizeScale(d.size) * 3) .attr("fill", "transparent"); node .append("circle") .attr("r", (d) => nodeSizeScale(d.size)) .attr("fill", (d) => conceptColorScale(conceptAncestor.get(d.id))) .attr("fill-opacity", 0.8) .attr("stroke", "#fff") .attr("stroke-width", 1.5); node .append("text") .text((d) => d.id) .attr("x", 0) .attr("y", 3) .attr("font-size", (d) => `${fontSizeScale(d.size)}px`); // Add drag behavior to the simulationNodes node.call(drag(simulation)); var filtered = false; node.on("mouseover", (event, d) => { if (!filtered) { node.style("opacity", (o) => { if (d.id == o.id) return 1; else if ( d.connectedKeywords.includes(o.id) || o.connectedKeywords.includes(d.id) ) return 0.5; else return 0.1; }); link.style("opacity", (l) => l.source.id == d.id || l.target.id == d.id ? 1 : 0.1 ); } input.value = d.id; input.dispatchEvent(new Event("input", { bubbles: true })); }); svg.on("click", (event, d) => { node.style("opacity", 1); link.style("opacity", 1); }); svg.on("mouseout", (event, d) => { if (filtered) return; node.style("opacity", 1); link.style("opacity", 1); input.value = []; input.dispatchEvent(new Event("input", { bubbles: true })); }); // Update the positions of the nodes and links at each step of the simulation simulation.on("tick", () => { link .attr("x1", (d) => d.source.x) .attr("y1", (d) => d.source.y) .attr("x2", (d) => d.target.x) .attr("y2", (d) => d.target.y); node.attr("transform", (d) => `translate(${d.x},${d.y})`); }); // Define the drag behavior function drag(simulation) { function dragstarted(event, d) { if (!event.active) simulation.alphaTarget(0.01).restart(); d.fx = d.x; d.fy = d.y; } function dragged(event, d) { d.fx = event.x; d.fy = event.y; } function dragended(event, d) { if (!event.active) simulation.alphaTarget(0); d.fx = null; d.fy = null; } return d3 .drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); } function zoomed({ transform }) { g.attr("transform", transform); } const scaleOpacity = d3.scaleLinear().domain([0, 1]).range([0.5, 1]); function filterNodes(weights) { if (weights == null) { filtered = false; node.style("opacity", 1); link.style("opacity", 1); } else { filtered = true; node.style("opacity", (d) => scaleOpacity(weights.get(d.id)) || 0.05); link.style( "opacity", (l) => (scaleOpacity(weights.get(l.source.id)) || 0.05) * (scaleOpacity(weights.get(l.target.id)) || 0.05) ); } } // Compute the bounds of the graph let xExtent = d3.extent(simulationNodes, (d) => d.x); let yExtent = d3.extent(simulationNodes, (d) => d.y); let dx = xExtent[1] - xExtent[0]; let dy = yExtent[1] - yExtent[0]; let xMid = (xExtent[0] + xExtent[1]) / 2; let yMid = (yExtent[0] + yExtent[1]) / 2; // Compute the scale factor and translation to fit the graph in the viewBox let scale = Math.min(width / dx, height / dy) * 0.85; // 0.85 for padding let translate = [width / 2 - scale * xMid, height / 2 - scale * yMid]; // Then setup the zoom and initial transform let zoom = d3 .zoom() .extent([ [0, 0], [width, height] ]) .scaleExtent([0.15, 3]) .on("zoom", zoomed); svg.call(zoom); svg.call( zoom.transform, d3.zoomIdentity.translate(translate[0], translate[1]).scale(scale) ); return Object.assign(input, { filterNodes }); }35:T40e,simulationLabs = { let simulationLinks = topLinks; let simulationNodes = nodes; let nodeSizeScale = d3 .scaleSqrt() .domain(d3.extent(simulationNodes, (d) => d.size)) // Use the range of your link weights .range([10, 50]) // Adjust this range according to your preference .clamp(true); // Ensures that the scale never returns a value outside the output range const sim = d3 .forceSimulation(simulationNodes) .force( "link", d3 .forceLink(simulationLinks) .id((d) => d.id) .strength((d) => d.weight ** 2) // Apply the link strength scale here .distance(50) ) .force("charge", d3.forceManyBody().strength(-30000)) .force( "x", d3 .forceX() .x(width / 2) .strength(1.25) ) .force( "y", d3 .forceY() .y(height / 2) .strength(1.25) ) .force( "collide", d3.forceCollide().radius((d) => nodeSizeScale(d.size) * 3) ); sim.tick(100); return sim; }36:T158d,function createGraphLabs( width, height, simulation = simulationLabs, selectable = false ) { let simulationLinks = topLinks; let simulationNodes = nodes; let nodeSizeScale = d3 .scaleSqrt() .domain(d3.extent(simulationNodes, (d) => d.size)) // Use the range of your link weights .range([10, 50]) // Adjust this range according to your preference .clamp(true); // Ensures that the scale never returns a value outside the output range // Create an svg to hold the visualization and apply the zoom behavior to it let svg = d3.create("svg").attr("viewBox", [0, 0, width, height]), g = svg.append("g"); const input = svg.node(); // Create lines for the simulationLinks let link = g .append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll("line") .data(simulationLinks) .join("line"); // Create circles for the simulationNodes let node = g .append("g") .selectAll("g") .data(simulationNodes) .enter() .append("g") .style("cursor", "move"); node .append("circle") .attr("r", (d) => nodeSizeScale(d.size) * 3) .style("opacity", 0); let circles = node .append("circle") .attr("r", (d) => nodeSizeScale(d.size)) .attr("fill", "#69b3a2") .attr("stroke", "#fff") .attr("stroke-width", 1.5); node .append("text") .text((d) => d.id) .attr("x", 0) .attr("y", 3) .attr("font-size", "xxx-large"); var selected = null; const onInput = (d) => { input.value = d; input.dispatchEvent(new Event("input", { bubbles: true })); node.style("opacity", (o) => d.id == o.id || d.connectedLabs.includes(o.id) || o.connectedLabs.includes(d.id) ? 1 : 0.3 ); node .selectAll("circle") .attr("fill", (o) => (d.id == o.id ? "green" : "#69b3a2")); link.style("opacity", (l) => l.source.id == d.id || l.target.id == d.id ? 1 : 0.3 ); }; const reset = () => { if (selected) return; input.value = null; input.dispatchEvent(new Event("input", { bubbles: true })); node.style("opacity", 1); link.style("opacity", 1); node.selectAll("circle").attr("fill", "#69b3a2"); }; if (selectable) { node.on("click", (event, d) => { event.stopPropagation(); if (selected == null) { svg.on("click", () => { selected = null; reset(); svg.on("click", null); }); } selected = d; onInput(d); }); node.on("mouseover", (event, d) => { if (selected) return; onInput(d); }); } else { node.on("mouseover", (event, d) => onInput(d)); } // svg.on("mouseclick", () => (selected = null)); svg.on("mouseout", reset).on("click", reset); // Add drag behavior to the simulationNodes if (!selectable) node.call(drag(simulation)); // Update the positions of the nodes and links at each step of the simulation const print = () => { link .attr("x1", (d) => d.source.x) .attr("y1", (d) => d.source.y) .attr("x2", (d) => d.target.x) .attr("y2", (d) => d.target.y); node.attr("transform", (d) => `translate(${d.x},${d.y})`); }; simulation.on("tick." + Math.random(), print); // Define the drag behavior function drag(simulation) { function dragstarted(event, d) { if (!event.active) simulation.alphaTarget(0.6).restart(); d.fx = d.x; d.fy = d.y; } function dragged(event, d) { d.fx = event.x; d.fy = event.y; } function dragended(event, d) { if (!event.active) simulation.alphaTarget(0); d.fx = null; d.fy = null; } return d3 .drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); } function zoomed({ transform }) { g.attr("transform", transform); } function hasCommonElement(array1, array2) { let set = new Set(array1); return array2.some((element) => set.has(element)); } const scaleOpacity = d3.scaleLinear().domain([0, 1]).range([0.6, 1]); function filterNodes(id) { if (!id) { node.style("opacity", 1); link.style("opacity", 1); } else { node.style( "opacity", (d) => scaleOpacity(normalizedKeywordsLabsMap.get(d.id).get(id)) || 0.05 ); link.style( "opacity", (l) => scaleOpacity( normalizedKeywordsLabsMap.get(l.source.id).get(id) * normalizedKeywordsLabsMap.get(l.target.id).get(id) ) || 0.05 ); } } // Compute the bounds of the graph let xExtent = d3.extent(simulationNodes, (d) => d.x); let yExtent = d3.extent(simulationNodes, (d) => d.y); let dx = xExtent[1] - xExtent[0]; let dy = yExtent[1] - yExtent[0]; let xMid = (xExtent[0] + xExtent[1]) / 2; let yMid = (yExtent[0] + yExtent[1]) / 2; // Compute the scale factor and translation to fit the graph in the viewBox let scale = Math.min(width / dx, height / dy) * 0.85; // 0.85 for padding let translate = [width / 2 - scale * xMid, height / 2 - scale * yMid]; // Then setup the zoom and initial transform let zoom = d3 .zoom() .extent([ [0, 0], [width, height] ]) .scaleExtent([0.15, 3]) .on("zoom", zoomed); svg.call(zoom); svg.call( zoom.transform, d3.zoomIdentity.translate(translate[0], translate[1]).scale(scale) ); print(); return Object.assign(input, { filterNodes, simulation }); }37:T1847,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/sunburst createSunburst = ( tree, { id = Array.isArray(tree) ? (d) => d.id : null, // if tabular data, given a d in data, returns a unique identifier (string) parentId = Array.isArray(tree) ? (d) => d.parentId : null, // if tabular data, given a node d, returns its parent’s identifier value = (d) => d.value, // given a node d, returns a quantitative value (for area encoding; null for count) sort = (a, b) => d3.descending( hierarchy_tree_weights.get(a.name), hierarchy_tree_weights.get(b.name) ), // how to sort nodes prior to layout label = (d) => d.name, // given a node d, returns the name to display on the rectangle title = (d, n) => `${n .ancestors() .reverse() .map((d) => d.data.name) .join(".")}\n${n.value.toLocaleString("en")}`, // hover text, // given a node d, returns its hover text linkTarget = "_blank", // the target attribute for links (if any) link, path, children, sWidth = width / 2, height = width / 2, // outer height, in pixels margin = 1, // shorthand for margins marginTop = margin, // top margin, in pixels marginRight = margin, // right margin, in pixels marginBottom = margin, // bottom margin, in pixels marginLeft = margin, // left margin, in pixels padding = 1, // separation between arcs radius = Math.min( sWidth - marginLeft - marginRight, height - marginTop - marginBottom ) / 2, // outer radius fill = "#ccc", // fill for arcs (if no color encoding) fillOpacity = 0.6 // fill opacity for arcs } = {} ) => { const data = tree; // If id and parentId options are specified, or the path option, use d3.stratify // to convert tabular data to a hierarchy; otherwise we assume that the data is // specified as an object {children} with nested objects (a.k.a. the “flare.json” // format), and use d3.hierarchy. const root = path != null ? d3.stratify().path(path)(data) : id != null || parentId != null ? d3.stratify().id(id).parentId(parentId)(data) : d3.hierarchy(data, children); // Compute the values of internal nodes by aggregating from the leaves. value == null ? root.count() : root.sum((d) => Math.max(0, value(d))); // Sort the leaves (typically by descending value for a pleasing layout). if (sort != null) root.sort(sort); // Compute the partition layout. Note polar coordinates: x is angle and y is radius. d3.partition().size([2 * Math.PI, radius])(root); // Construct an arc generator. const arc = d3 .arc() .startAngle((d) => d.x0) .endAngle((d) => d.x1) .padAngle((d) => Math.min((d.x1 - d.x0) / 2, (2 * padding) / radius)) .padRadius(radius / 2) .innerRadius((d) => d.y0) .outerRadius((d) => d.y1 - padding); const svg = d3 .create("svg") .attr("viewBox", [ marginRight - marginLeft - sWidth / 2, marginBottom - marginTop - height / 2, sWidth, height ]) .attr("width", sWidth) .attr("height", height) .attr("style", "max-width: 100%; height: auto; height: intrinsic;") .attr("font-family", "sans-serif") .attr("font-size", ~~(Math.min(height, sWidth) * 0.013) + 4) .attr("text-anchor", "middle"); const cell = svg.selectAll("a").data(root.descendants()).join("g"); const arcs = cell .append("path") .attr("d", arc) .attr( "fill", color ? (d) => d.depth == 0 ? "transparent" : conceptColorScale(d.ancestors().reverse()[1]?.data.name) : fill ) .attr("fill-opacity", fillOpacity); if (label != null) cell .filter((d) => ((d.y0 + d.y1) / 2) * (d.x1 - d.x0) > 10) .append("text") .attr("transform", (d) => { if (!d.depth) return; const x = (((d.x0 + d.x1) / 2) * 180) / Math.PI; const y = (d.y0 + d.y1) / 2; return `rotate(${x - 90}) translate(${y},0) rotate(${ x < 180 ? 0 : 180 })`; }) .style("text-transform", (d) => (d.depth == 0 ? "uppercase" : null)) .attr("dy", "0.32em") .each(function (d) { const angleDiff = d.x1 - d.x0; const text = label(d.data, d); const words = text.split(/\s+/g); let displayText = ""; if (angleDiff < 0.1) { // choose an appropriate threshold for your needs displayText = text.length > 15 ? text.slice(0, 13) + "..." : text; // truncate if text is too long d3.select(this).text(displayText); } else { const tspan = d3.select(this).selectAll("tspan").data(words); tspan .join("tspan") .attr("x", 0) .attr("dy", (d, i) => (i ? "1.2em" : 0)) .text((d) => d); } }); if (title != null) cell.append("title").text((d) => title(d.data, d)); function filterTree(weights, name) { if (weights === null || weights.length == 0) { arcs.attr("fill-opacity", 0.6).attr("stroke", null).style("filter", null); } else { const getWeight = (d) => weights.get(label(d.data)); const getColor = (d) => { const weight = getWeight(d); return `saturate(${weight * 4 ?? 0})`; }; const getOpacity = (d) => getWeight(d) && getWeight(d) > 0.05 ? d3.scaleLinear().domain([0, 1]).range([0.1, 1]).clamp(true)( getWeight(d) ) : 0; arcs .attr("fill-opacity", (d) => { return getOpacity(d); }) .attr("stroke-opacity", (d) => { return getOpacity(d); }) .attr("stroke", (d) => { const angleDiff = d.x1 - d.x0; return d.depth > 2 && angleDiff < 0.1 && getOpacity(d) > 0.01 ? conceptColorScale(d.ancestors().reverse()[1]?.data.name) : null; }); // .style("filter", getSaturate); // .attr("fill-opacity", (d) => // getWeight(d) && getWeight(d) > 0.01 ? 0.6 : 0.2 // ); } } return Object.assign(svg.node(), { filterTree }); }38:T69a,function WordCloud( data, // should be in the form of { text , size} { marginTop = 0, // top margin, in pixels marginRight = 0, // right margin, in pixels marginBottom = 0, // bottom margin, in pixels marginLeft = 0, // left margin, in pixels width = 640, // outer width, in pixels height = 400, // outer height, in pixels maxWords = 250, // maximum number of words to extract from the text fontFamily = "sans-serif", // font family fontScale = 15, // base font size color = null, padding = 0, // amount of padding between the words (in pixels) rotate = 0, // a constant or function to rotate the words invalidation // when this promise resolves, stop the simulation } = {} ) { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("font-family", fontFamily) .attr("text-anchor", "middle") .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); const g = svg .append("g") .attr("transform", `translate(${marginLeft},${marginTop})`); const cloud = d3Cloud() .size([width - marginLeft - marginRight, height - marginTop - marginBottom]) .words(data) .padding(padding) .rotate(rotate) .font(fontFamily) .fontSize((d) => Math.sqrt(d.size) * fontScale) .on("word", ({ size, x, y, rotate, text }) => { g.append("text") .attr("font-size", size) .style("fill", color({ size, x, y, rotate, text })) .attr("transform", `translate(${x},${y}) rotate(${rotate})`) .text(text); }); cloud.start(); invalidation && invalidation.then(() => cloud.stop()); return svg.node(); }39:T706,wordclouds = { const sources = [ "keywords_epfl_graph", "keywords_infoscience", "keywords_epfl_graph_teaching", "keywords_google_scholar" ]; return new Map( sources.map((source) => { const keywordsLabs = labs.map((d) => d[source]); const words = d3 .rollups( keywordsLabs.flat(), (v) => d3.sum(v, (d) => d[1]), (d) => d[0] ) .sort((a, b) => b[1] - a[1]), trimmedWords = words.slice(0, sizeWordCloud), weights = trimmedWords.map((d) => d[1]); let wordSizeScale = d3 .scaleLog() .domain(d3.extent(weights)) // Use the range of your link weights .range([3, 15]); // Adjust this range according to your preference // .clamp(true); // Ensures that the scale never returns a value outside the output range const bubbleChart = BubbleChart(trimmedWords, { label: (d) => [ ...d[0] .split(".") .pop() .split(/(?=[A-Z][a-z])/g), d[1].toLocaleString("en") ].join("\n"), value: (d) => d[1], color: (d) => conceptColorScale(d.group), group: (d) => conceptAncestor.get(d[0]), width }); return [ source, { wordcloud: WordCloud( trimmedWords.map((d) => ({ text: d[0], size: wordSizeScale(d[1]) })), { padding: 3, width, height: 600, color: (d) => conceptColorScale(conceptAncestor.get(d.text)), rotate: verticalWords ? () => 90 * ~~(Math.random() * 2) : 0 } ), bubblechart: bubbleChart } ]; }) ); }3a:Ta07,links = { // Creating an empty array to store network data let networkData = []; // Iterate over all labs for (let i = 0; i < labs.length; i++) { // Compare each lab with every other lab for (let j = i + 1; j < labs.length; j++) { const { name: sourceLab, extentWeight: sourceExtentWeight, [keywords_source]: sourceKeywords } = labs[i]; const { name: targetLab, extentWeight: targetExtentWeight, [keywords_source]: targetKeywords } = labs[j]; // Identify common keywords between the pair of labs const commonKeywords = d3 .rollups( [...sourceKeywords, ...targetKeywords], // If they have common keywords we calculate the mean of both lab weight for this common keywords (v) => v.length > 1 ? d3.mean(v, ([name, value]) => value) : undefined, ([name, value]) => name ) // Filter out any keywords not in common .filter(([name, value]) => value !== undefined) // Sort the common keywords by their mean weight .sort((a, b) => b[1] - a[1]); // // Determine the count of the top 10% of common keywords // const top10KeywordsIndex = Math.max(3, ~~commonKeywords.length); // // Slice out the top 10% of common keywords // const top10Keywords = commonKeywords.slice(0, top10KeywordsIndex); // If there are any common keywords, push a new entry into the network data if (commonKeywords.length > 0) { let sourceKeywordVector = {}, targetKeywordVector = {}; sourceKeywords.forEach(([name, value]) => { sourceKeywordVector[name] = value; }); targetKeywords.forEach(([name, value]) => { targetKeywordVector[name] = value; }); const similarity = cosineSimilarity( sourceKeywordVector, targetKeywordVector ); networkData.push({ source: sourceLab, target: targetLab, common: commonKeywords, keywords: commonKeywords.map(([name, value]) => name), // Calculate the total weight of the top 10% of common keywords // weight: ~~d3.sum(top10Keywords, ([name, value]) => value) similarity, weight: similarity, old_weight: d3.sum(commonKeywords, ([name, value]) => value) }); } } } // Return the network data return networkData .sort((a, b) => b.similarity - a.similarity) .map((d, index) => ({ ...d, index })); }3b:T578,labs_trees = { const t0 = performance.now(); const map = new Map([ ...labs .map((d) => { const keywords = d[keywords_source], weights = keywords.map((d) => d[1]), extent = d3.extent(weights), normalize = d3.scaleLinear().domain(extent).range([0, 1]), normalized_keywords = keywords.map(([name, value]) => [ name, normalize(value) ]), filtered_keywords = normalized_keywords.filter( (d) => d[1] > sunburstThreshold ); return { ...d, filtered_keywords }; }) .filter((d) => d.filtered_keywords.length > 0) .map((d) => { const fullTree = createTree(d.filtered_keywords, d.name); return [ d.name, { full: fullTree, small: filterTree(fullTree, 3), sunburst_weights: createSunburstWeightsFromTree(fullTree, d.name), sunburst: createSunburst(filterTree(fullTree, 4), { sWidth: width / 3, height: width / 3 }) // groups } ]; }) // [ // "default", // { // full: {}, // small: {}, // sunburst: createSunburst(createTree([], "No lab selected")) // } // ] ]); console.log("labs_tree", performance.now() - t0, "milliseconds"); return map; }3c:T486,matrix = { const t0 = performance.now(); // Start of performance time // create a 2D array with size equal to number of unique keywords let matrix = Array.from({ length: keywordList.length }, () => new Array(keywordList.length).fill(0) ); // create a map for quick keyword lookups let keywordToIndexMap = new Map(); for (let i = 0; i < keywordList.length; i++) { keywordToIndexMap.set(keywordList[i], i); } const keywordsLabs = normalizedKeywordsLabs; keywordsLabs.forEach((keywords) => { for (let i = 0; i < keywords.length; i++) { for (let j = i + 1; j < keywords.length; j++) { let keyword1Index = keywordToIndexMap.get(keywords[i][0]); let keyword2Index = keywordToIndexMap.get(keywords[j][0]); if (keyword1Index === undefined || keyword2Index === undefined) continue; const weight = keywords[i][1] * keywords[j][1]; // increment the co-occurrence count matrix[keyword1Index][keyword2Index] += weight; matrix[keyword2Index][keyword1Index] += weight; } } }); console.log(performance.now() - t0, "milliseconds"); return matrix; }3d:T4d8,wrangled_data = { let fileData = await FileAttachment("all_sources (2).json").json({ typed: true }); return Object.entries(fileData) .map(([name, data]) => ({ name, ...data })) .filter(({ name }) => (removeIIEGE ? name !== "iie-ge" : true)) .map((lab) => { lab.keywords_epfl_graph = Object.entries(lab.keywords_epfl_graph).sort( (a, b) => b[1] - a[1] ); lab.keywords_infoscience = Object.entries(lab.keywords_infoscience).sort( (a, b) => b[1] - a[1] ); lab.keywords_epfl_graph_teaching = Object.entries( lab.keywords_epfl_graph_teaching ).sort((a, b) => b[1] - a[1]); lab.keywords_google_scholar = Object.entries( lab.keywords_google_scholar ).sort((a, b) => b[1] - a[1]); lab.size = Number(lab.size); // lab.keywords = lab[keywords_source].sort((a, b) => b[1] - a[1]); // lab.extentWeight = d3.extent(lab.keywords, (d) => d[1]); // const scale = d3.scaleLinear().domain(lab.extentWeight).range([0, 1]); // lab.normalizedKeywords = lab.keywords.map(([name, value]) => [ // name, // scale(value) // ]); return lab; }); // .filter((d) => d.normalizedKeywords.length > 0); }3e:T1024,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/bubble-chart function BubbleChart( data, { name = ([x]) => x, // alias for label label = name, // given d in data, returns text to display on the bubble value = ([, y]) => y, // given d in data, returns a quantitative size group, // given d in data, returns a categorical value for color title, // given d in data, returns text to show on hover link, // given a node d, its link (if any) linkTarget = "_blank", // the target attribute for links, if any width = 640, // outer width, in pixels height = width / 2, // outer height, in pixels padding = 3, // padding between circles margin = 1, // default margins marginTop = margin, // top margin, in pixels marginRight = margin, // right margin, in pixels marginBottom = margin, // bottom margin, in pixels marginLeft = margin, // left margin, in pixels groups, // array of group names (the domain of the color scale) colors = d3.schemeTableau10, // an array of colors (for groups) color, fill = "#ccc", // a static fill color, if no group channel is specified fillOpacity = 0.7, // the fill opacity of the bubbles stroke, // a static stroke around the bubbles strokeWidth, // the stroke width around the bubbles, if any strokeOpacity // the stroke opacity around the bubbles, if any } = {} ) { // Compute the values. const D = d3.map(data, (d) => d); const V = d3.map(data, value); const G = group == null ? null : d3.map(data, group); const I = d3.range(V.length).filter((i) => V[i] > 0); // Unique the groups. if (G && groups === undefined) groups = I.map((i) => G[i]); groups = G && new d3.InternSet(groups); // Construct scales. const colorScale = G && d3.scaleOrdinal(groups, colors); color = color ? color : G ? (d) => colorScale(G[d.data]) : fill == null ? "none" : fill; // Compute labels and titles. const L = label == null ? null : d3.map(data, label); const T = title === undefined ? L : title == null ? null : d3.map(data, title); // Compute layout: create a 1-deep hierarchy, and pack it. const root = d3 .pack() .size([width - marginLeft - marginRight, height - marginTop - marginBottom]) .padding(padding)(d3.hierarchy({ children: I }).sum((i) => V[i])); const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-marginLeft, -marginTop, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;") .attr("fill", "currentColor") .attr("font-size", 10) .attr("font-family", "sans-serif") .attr("text-anchor", "middle"); const leaf = svg .selectAll("a") .data(root.leaves()) .join("a") .attr( "xlink:href", link == null ? null : (d, i) => link(D[d.data], i, data) ) .attr("target", link == null ? null : linkTarget) .attr("transform", (d) => `translate(${d.x},${d.y})`); leaf .append("circle") .attr("stroke", stroke) .attr("stroke-width", strokeWidth) .attr("stroke-opacity", strokeOpacity) .attr("fill", (d) => color({ ...d, group: G[d.data] })) .attr("fill-opacity", fillOpacity) .attr("r", (d) => d.r); if (T) leaf.append("title").text((d) => T[d.data]); if (L) { // A unique identifier for clip paths (to avoid conflicts). const uid = `O-${Math.random().toString(16).slice(2)}`; leaf .append("clipPath") .attr("id", (d) => `${uid}-clip-${d.data}`) .append("circle") .attr("r", (d) => d.r); leaf .append("text") .attr( "clip-path", (d) => `url(${new URL(`#${uid}-clip-${d.data}`, location)})` ) .selectAll("tspan") .data((d) => `${L[d.data]}`.split(/\n/g)) .join("tspan") .attr("x", 0) .attr("y", (d, i, D) => `${i - D.length / 2 + 0.85}em`) .attr("fill-opacity", (d, i, D) => (i === D.length - 1 ? 0.7 : null)) .text((d) => d); } return Object.assign(svg.node(), { scales: { color } }); }3f:T12e5,// Copyright 2022 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/radial-tree function Tree( data, { // data is either tabular (array of objects) or hierarchy (nested objects) path, // as an alternative to id and parentId, returns an array identifier, imputing internal nodes id = Array.isArray(data) ? (d) => d.id : null, // if tabular data, given a d in data, returns a unique identifier (string) parentId = Array.isArray(data) ? (d) => d.parentId : null, // if tabular data, given a node d, returns its parent’s identifier children, // if hierarchical data, given a d in data, returns its children tree = d3.tree, // layout algorithm (typically d3.tree or d3.cluster) separation = tree === d3.tree ? (a, b) => (a.parent == b.parent ? 1 : 2) / a.depth : (a, b) => (a.parent == b.parent ? 1 : 2), sort, // how to sort nodes prior to layout (e.g., (a, b) => d3.descending(a.height, b.height)) label, // given a node d, returns the display name title, // given a node d, returns its hover text link, // given a node d, its link (if any) linkTarget = "_blank", // the target attribute for links (if any) width = 640, // outer width, in pixels height = 400, // outer height, in pixels margin = 60, // shorthand for margins marginTop = margin, // top margin, in pixels marginRight = margin, // right margin, in pixels marginBottom = margin, // bottom margin, in pixels marginLeft = margin, // left margin, in pixels radius = Math.min( width - marginLeft - marginRight, height - marginTop - marginBottom ) / 2, // outer radius r = 3, // radius of nodes padding = 1, // horizontal padding for first and last column fill = "#999", // fill for nodes fillOpacity, // fill opacity for nodes stroke = "#555", // stroke for links strokeWidth = 1.5, // stroke width for links strokeOpacity = 0.4, // stroke opacity for links strokeLinejoin, // stroke line join for links strokeLinecap, // stroke line cap for links halo = "#fff", // color of label halo haloWidth = 3 // padding around the labels } = {} ) { // If id and parentId options are specified, or the path option, use d3.stratify // to convert tabular data to a hierarchy; otherwise we assume that the data is // specified as an object {children} with nested objects (a.k.a. the “flare.json” // format), and use d3.hierarchy. const root = path != null ? d3.stratify().path(path)(data) : id != null || parentId != null ? d3.stratify().id(id).parentId(parentId)(data) : d3.hierarchy(data, children); stroke = typeof stroke === "function" ? stroke : () => stroke; fill = typeof fill === "function" ? fill : () => fill; // Sort the nodes. if (sort != null) root.sort(sort); // Compute labels and titles. const descendants = root.descendants(); const L = label == null ? null : descendants.map((d) => label(d.data, d)); // Compute the layout. tree() .size([2 * Math.PI, radius]) .separation(separation)(root); const svg = d3 .create("svg") .attr("viewBox", [-marginLeft - radius, -marginTop - radius, width, height]) .attr("width", width) .attr("height", height) .attr("style", "max-width: 100%; height: auto; height: intrinsic;") .attr("font-family", "sans-serif") .attr("font-size", 10); svg .append("g") .attr("fill", "none") .attr("stroke-opacity", strokeOpacity) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-width", strokeWidth) .selectAll("path") .data(root.links()) .join("path") .attr("stroke", stroke) .attr( "d", d3 .linkRadial() .angle((d) => d.x) .radius((d) => d.y) ); const node = svg .append("g") .selectAll("a") .data(root.descendants()) .join("a") .attr("xlink:href", link == null ? null : (d) => link(d.data, d)) .attr("target", link == null ? null : linkTarget) .attr( "transform", (d) => `rotate(${(d.x * 180) / Math.PI - 90}) translate(${d.y},0)` ); node .append("circle") .attr("fill", (d) => (d.children ? stroke(d) : fill(d))) .attr("r", r); if (title != null) node.append("title").text((d) => title(d.data, d)); if (L) node .append("text") .attr("transform", (d) => `rotate(${d.x >= Math.PI ? 180 : 0})`) .attr("dy", "0.32em") .attr("x", (d) => (d.x < Math.PI === !d.children ? 6 : -6)) .attr("text-anchor", (d) => d.x < Math.PI === !d.children ? "start" : "end" ) .attr("paint-order", "stroke") .attr("stroke", halo) .attr("stroke-width", haloWidth) .text((d, i) => L[i]); return svg.node(); }40:[{"id":"84818c6fd4e0cc39e9d92f68180460e9a28cde2f0f7c664ceacc8a2b3fd2c5509241747ff18c9bdb9c73a555b538df41eacfda534907fd292649588ae21d7f9c","href":"https://static.observableusercontent.com/files/84818c6fd4e0cc39e9d92f68180460e9a28cde2f0f7c664ceacc8a2b3fd2c5509241747ff18c9bdb9c73a555b538df41eacfda534907fd292649588ae21d7f9c","name":"tree.json","type":"application/json","lastModified":1686093908783.298,"size":165351},{"id":"dc683f4cb26c492685803fc004e1128f81827c88488baf525d69bcd6e088c18d0372b3a9cdd391155072163015273c45360a4407a504590d13834307af1eb23a","href":"https://static.observableusercontent.com/files/dc683f4cb26c492685803fc004e1128f81827c88488baf525d69bcd6e088c18d0372b3a9cdd391155072163015273c45360a4407a504590d13834307af1eb23a","name":"concept_parent (1).json","type":"application/json","lastModified":1686093908783.298,"size":151085},{"id":"8f805716745d07c38c29ac0f0954aa83ff254988e36fc1bea849318d3bbf812d22166958fd2695ae0956fe9472e190af3581c82dc8f603ba0b7bf7cdeb75a5a3","href":"https://static.observableusercontent.com/files/8f805716745d07c38c29ac0f0954aa83ff254988e36fc1bea849318d3bbf812d22166958fd2695ae0956fe9472e190af3581c82dc8f603ba0b7bf7cdeb75a5a3","name":"all_sources (1).json","type":"application/json","lastModified":1686093908783.298,"size":964609},{"id":"134bde12408ce6580fec9373823e134b6ab9be3892e98631ac46bbd7d8ad92199670f897f41f6a95ff4bdec7bdc85f07dac0a3ac6a48be1773cccb6988623b74","href":"https://static.observableusercontent.com/files/134bde12408ce6580fec9373823e134b6ab9be3892e98631ac46bbd7d8ad92199670f897f41f6a95ff4bdec7bdc85f07dac0a3ac6a48be1773cccb6988623b74","name":"ethz_ifu.json","type":"application/json","lastModified":1686093908783.298,"size":131232},{"id":"85f02bbe58089b39a2ceb02ca09eea2ced62f6800bd386a54518a8591de9688a5f2942b493b03a976933a715aaa5d5ff4a032255ba9114e9ab2bc313cb1e9137","href":"https://static.observableusercontent.com/files/85f02bbe58089b39a2ceb02ca09eea2ced62f6800bd386a54518a8591de9688a5f2942b493b03a976933a715aaa5d5ff4a032255ba9114e9ab2bc313cb1e9137","name":"ethz_usys.json","type":"application/json","lastModified":1686093908783.298,"size":610662},{"id":"32395f60bd94b30029e862f8723c73f33cc864370805f9008b18a6f0fc5d63fa4c70b32a33db1a5833ab8410e009000992b875bc1894a056bc9ff94a3f617738","href":"https://static.observableusercontent.com/files/32395f60bd94b30029e862f8723c73f33cc864370805f9008b18a6f0fc5d63fa4c70b32a33db1a5833ab8410e009000992b875bc1894a056bc9ff94a3f617738","name":"all_sources (2).json","type":"application/json","lastModified":1686310615199.981,"size":817213},{"id":"e113764583de02c0593feffe49031dd69d6863e77d2e0b1698cd03e479fbc923b7cb0df85495d08211610f8cb66b007f76ddf6ba7530c1fa46c5680cacf669f8","href":"https://static.observableusercontent.com/files/e113764583de02c0593feffe49031dd69d6863e77d2e0b1698cd03e479fbc923b7cb0df85495d08211610f8cb66b007f76ddf6ba7530c1fa46c5680cacf669f8","name":"concept_parent (3).json","type":"application/json","lastModified":1686310630445.326,"size":1619116},{"id":"4d0c12c2ac9213cb84b37151280e466c40a210bcc3d1638a1a9ad4be525450c82f2a91731ee5606b0fd77e9751279d1a505e056d3014771a23e81efa5eda878a","href":"https://static.observableusercontent.com/files/4d0c12c2ac9213cb84b37151280e466c40a210bcc3d1638a1a9ad4be525450c82f2a91731ee5606b0fd77e9751279d1a505e056d3014771a23e81efa5eda878a","name":"tree (1).json","type":"application/json","lastModified":1686310643273.995,"size":1708698}] 2f:{"title":"DEV IIE Research Landscape","cells":[{"id":4,"value":"# DEV IIE Research Landscape\n\nSee [our repository](https://github.com/EPFL-ENAC/iie-research-landscape). Press __F__ to start \n\n\n\n\nYou can choose the color scheme with the selector below : \n__WARNING__ If you change the color scheme it will reload everything in the notebook, be careful not to change it too often !\n","pinned":false,"hidden":false,"mode":"md"},{"id":2411,"value":"viewof categoricalScheme = colorSchemePicker({\n title: \"Categorical schemes\",\n height: 500,\n value: \"BankWong\",\n schemes: [\n {\n name: \"BankWong\",\n colors: [\"#0072b2\", \"#e69f00\", \"#56b4e9\", \"#009e73\", \"#f0e442\"]\n },\n {\n name: \"IBMColorblindSafe\",\n colors: [\n \"#648fff\",\n \"#785ef0\",\n \"#dc267f\",\n \"#fe6100\",\n \"#ffb000\",\n \"#000000\",\n \"#ffffff\"\n ]\n },\n {\n name: \"Category10\"\n },\n {\n name: \"Accent\"\n },\n {\n name: \"Dark2\"\n },\n {\n name: \"Paired\"\n },\n {\n name: \"Tableau10\"\n },\n {\n name: \"Pastel1\"\n },\n {\n name: \"Pastel2\"\n },\n {\n name: \"Set1\"\n },\n {\n name: \"Set2\"\n },\n {\n name: \"Set3\"\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2803,"value":"viewof sizeWordCloud = Inputs.range([0, 150], {\n label: \"Number of words in wordcloud\",\n step: 1,\n value: 80\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2834,"value":"viewof verticalWords = Inputs.toggle({\n label: \"Use vertical words\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2858,"value":"viewof wordsVizType = Inputs.radio([\"Wordcloud\", \"Bubblechart\"], {\n label: \"Type of viz\",\n value: \"Wordcloud\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2227,"value":"## Sources\n\nLet's see below how our 4 different sources, __EPFL Graph__, __Infoscience__, __EPFL Teaching__ & __Google Scholar__, differ in keywords. Keywords sizes are porportional to their __score__. They are grouped by __color__ depending on their classification in Wikipedia's concept tree.","pinned":false,"hidden":false,"mode":"md"},{"id":2229,"value":"## EPFL Graph\n\nThe _score_ relating a keyword to a lab is a metric of __how much the lab has published on this concept__ (detected from publication's abstract). ","pinned":false,"hidden":false,"mode":"md"},{"id":1780,"value":"epfl_graph_wordcloud = wordsVizType === \"Wordcloud\"\n ? wordclouds.get(\"keywords_epfl_graph\").wordcloud\n : wordclouds.get(\"keywords_epfl_graph\").bubblechart","pinned":false,"hidden":false,"mode":"ojs"},{"id":2452,"value":"legend()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2232,"value":"## Infoscience\n\nWe count the __number of occurrences__ of each keyword for every publication of current labs.\n","pinned":false,"hidden":false,"mode":"md"},{"id":2217,"value":"infoscience_wordcloud = (await visibility()) || wordsVizType === \"Wordcloud\"\n ? wordclouds.get(\"keywords_infoscience\").wordcloud\n : wordclouds.get(\"keywords_infoscience\").bubblechart","pinned":false,"hidden":false,"mode":"ojs"},{"id":2465,"value":"legend()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2234,"value":"## EPFL Graph Teaching\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":2220,"value":"epfl_graph_teaching_wordcloud = (await visibility()) ||\nwordsVizType === \"Wordcloud\"\n ? wordclouds.get(\"keywords_epfl_graph_teaching\").wordcloud\n : wordclouds.get(\"keywords_epfl_graph_teaching\").bubblechart","pinned":false,"hidden":false,"mode":"ojs"},{"id":2468,"value":"legend()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2236,"value":"## Google scholar\n\nDone by hand. Lab's heads are searched on Google Scholar and their fields of research are added with a __score__ of 1.","pinned":false,"hidden":false,"mode":"md"},{"id":2224,"value":"google_scholar_wordcloud = {\n await visibility();\n\n return wordsVizType === \"Wordcloud\"\n ? wordclouds.get(\"keywords_google_scholar\").wordcloud\n : wordclouds.get(\"keywords_google_scholar\").bubblechart;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2471,"value":"legend()","pinned":false,"hidden":false,"mode":"ojs"},{"id":3396,"value":"## Visualizing Lab-Keyword Interactions via Graphs","pinned":false,"hidden":false,"mode":"md"},{"id":1183,"value":"This project uses __co-occurrence__ and __cosine similarity__ to analyze relationships between labs based on their shared keywords. __Co-occurrence__ reflects how often keyword pairs appear together in a lab's list, and __cosine similarity__ assesses overall keyword distribution similarity between labs. These connections are visualized interactively in two graphs: a __keyword graph__ based on co-occurrence and a __lab graph__ based on cosine similarity. The __weight__ and __cosine similarity__ are also visualized in a correlation graph, providing further insights into shared research interests between labs.","pinned":false,"hidden":false,"mode":"md"},{"id":2652,"value":"viewof labSelectorType = Inputs.radio([\"Dropdown\", \"Graph\"], {\n label: \"Lab selector in viz\",\n value: \"Graph\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1043,"value":"viewof keywords_source = Inputs.radio(\n [\n \"keywords_epfl_graph\",\n \"keywords_infoscience\",\n \"keywords_epfl_graph_teaching\",\n \"keywords_google_scholar\"\n ],\n {\n label: \"Select source data\",\n format: (v) => v.replace(\"keywords_\", \"\").replaceAll(\"_\", \" \"),\n value: \"keywords_epfl_graph\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2173,"value":"htl.html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":2076,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2474,"value":"legend()","pinned":false,"hidden":false,"mode":"ojs"},{"id":3401,"value":"### How it works : \nHover on a lab or keyword to reveal related entities in the second graph; connection strength is conveyed by opacity. Zoom in and out of graphs to explore.","pinned":false,"hidden":false,"mode":"md"},{"id":414,"value":"viewof similarityThreshold = Inputs.range([0, 0.6], {\n label: \"Similarity threshold for lab connections\",\n step: 0.01,\n value: 0.1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":935,"value":"## Concept tree visualisation : sunburst","pinned":false,"hidden":false,"mode":"md"},{"id":1198,"value":"viewof fteWeighted = Inputs.toggle({\n label: \"FTE computed weight\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1207,"value":"Here's the concept tree visualized as a sunburst. It shows the fields of research from EPFL IIE, sizes are calculated either by keywords weights or by wheight x FTE in the lab depending on the toggle above this cell. ","pinned":false,"hidden":false,"mode":"md"},{"id":1304,"value":"Inputs.bind(\n Inputs.radio(\n [\n \"keywords_epfl_graph\",\n \"keywords_infoscience\",\n \"keywords_epfl_graph_teaching\",\n \"keywords_google_scholar\"\n ],\n {\n label: \"Select source data\",\n format: (v) => v.replace(\"keywords_\", \"\").replaceAll(\"_\", \" \"),\n value: \"keywords_epfl_graph\"\n }\n ),\n viewof keywords_source\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1924,"value":"fullscreen = htl.html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1468,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":3424,"value":"### How it works : \nHover over a lab to reveal linked concepts in the sunburst; opacity indicates connection strength. Zoom to investigate the labs graph. The sunburst fills a Wikipedia concept tree with lab weights, showcasing lab-concept links.","pinned":false,"hidden":false,"mode":"md"},{"id":2777,"value":"## Precise sunburst (to depth 5)","pinned":false,"hidden":false,"mode":"md"},{"id":2781,"value":"viewof preciseSunburstLab = {\n const validLabs = labs.filter(\n (d) => d[keywords_source] && d[keywords_source].length > 0\n );\n\n return Inputs.radio(\n validLabs.map((d) => d.name),\n\n { label: \"Select lab\", value: validLabs[0].name }\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3323,"value":"viewof showZoomable = Inputs.toggle({\n label: \"Show zoomable sunburst\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2785,"value":"{\n const lab = labs.find((d) => d.name == preciseSunburstLab);\n\n if (showZoomable) {\n return createZoomable(\n filterTree(labs_trees.get(preciseSunburstLab).full, 4)\n );\n } else {\n return createSunburst(labs_trees.get(preciseSunburstLab).full, {\n sWidth: width,\n height: width\n });\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3429,"value":"### How it works : \nSelect a lab to generate its unique \"concept sunburst\". Click on concepts to delve deeper into the tree. Arc sizes represent the concept's weight for the chosen lab.","pinned":false,"hidden":false,"mode":"md"},{"id":3309,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2205,"value":"## Compare labs","pinned":false,"hidden":false,"mode":"md"},{"id":2255,"value":"Inputs.bind(\n Inputs.radio(\n [\n \"keywords_epfl_graph\",\n \"keywords_infoscience\",\n \"keywords_epfl_graph_teaching\",\n \"keywords_google_scholar\"\n ],\n {\n label: \"Select source data\",\n format: (v) => v.replace(\"keywords_\", \"\").replaceAll(\"_\", \" \"),\n value: \"keywords_epfl_graph\"\n }\n ),\n viewof keywords_source\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2769,"value":"viewof sunburstThreshold = Inputs.range([0, 0.6], {\n label: \"Sunburst weights threshold (concept with > weights visible)\",\n step: 0.01,\n value: 0.05\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2269,"value":"htl.html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":2252,"value":"{\n await visibility();\n const labs = Array.from(labs_trees);\n const container = html`

`;\n\n labs.forEach(([name, d]) =>\n d.full.sum > 0 ? container.appendChild(d.sunburst) : \"\"\n );\n\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2291,"value":"## Compare sources","pinned":false,"hidden":false,"mode":"md"},{"id":2297,"value":"htl.html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":2295,"value":"{\n await visibility();\n const container = html`

`;\n\n const sources = [\n \"keywords_epfl_graph\",\n \"keywords_infoscience\",\n \"keywords_epfl_graph_teaching\",\n \"keywords_google_scholar\"\n ];\n\n sources.map((source) => {\n const words = d3\n .rollups(\n labs.map((d) => d[source]).flat(),\n (v) => d3.sum(v, (d) => d[1]),\n (d) => d[0]\n )\n .sort((a, b) => b[1] - a[1]),\n weights = words.map((d) => d[1]);\n\n const data = createTree(\n words,\n source.replace(\"keywords_\", \"\").replaceAll(\"_\", \" \"),\n 4\n );\n const sunburst = createSunburst(data, {\n sWidth: width * 0.45,\n height: height * 0.45\n });\n\n container.appendChild(sunburst);\n });\n\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2322,"value":"## Compare EPFL IIE with ETHZ IFU & USYS","pinned":false,"hidden":false,"mode":"md"},{"id":2359,"value":"htl.html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":2351,"value":"{\n await visibility();\n const container = html`

`;\n\n const instituts = [\n [\n \"EPFL IIE\",\n d3\n .rollups(\n labs.map((d) => d[\"keywords_infoscience\"]).flat(),\n (v) => d3.sum(v, (d) => d[1]),\n (d) => d[0]\n )\n .sort((a, b) => b[1] - a[1])\n ],\n [\"ETHZ IFU\", keywordsIfu],\n [\"ETHZ USYS\", keywordsUsys]\n ];\n\n instituts.forEach(([name, words]) => {\n const weights = words.map((d) => d[1]);\n const data = createTree(words, name, 4);\n const sunburst = createSunburst(data, {\n sWidth: width * 0.45,\n height: height * 0.6\n });\n\n container.appendChild(sunburst);\n });\n\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2363,"value":"## Compare EPFL with ETHZ ","pinned":false,"hidden":false,"mode":"md"},{"id":2372,"value":"htl.html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":2368,"value":"{\n const container = html`

`;\n\n const instituts = [\n [\n \"EPFL\",\n d3\n .rollups(\n labs.map((d) => d[\"keywords_infoscience\"]).flat(),\n (v) => d3.sum(v, (d) => d[1]),\n (d) => d[0]\n )\n .sort((a, b) => b[1] - a[1])\n ],\n [\"ETHZ\", keywordsEthz]\n ];\n\n instituts.forEach(([name, words]) => {\n const weights = words.map((d) => d[1]);\n const data = createTree(words, name, 4);\n const sunburst = createSunburst(data, {\n sWidth: width * 0.45,\n height: height\n });\n\n container.appendChild(sunburst);\n });\n\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1041,"value":"### Tidy tree","pinned":false,"hidden":false,"mode":"md"},{"id":937,"value":"chart = {\n await visibility();\n return Tree(JSON.parse(JSON.stringify(hierarchy_tree_small)), {\n label: (d) => d.name,\n fill: (d) => {\n // console.log(d.ancestors());\n return d.depth == 0\n ? \"grey\"\n : conceptColorScale(d.ancestors().reverse()[1].data.name) ?? \"grey\";\n },\n stroke: (d) => {\n if (d.source) {\n return (\n conceptColorScale(\n d.source.depth === 0\n ? d?.target?.data.name\n : conceptAncestor.get(d?.source?.data.name)\n ) ?? \"grey\"\n );\n } else {\n if (d.depth == 0) return \"grey\";\n return (\n conceptColorScale(d.ancestors().reverse()[1].data.name) ?? \"grey\"\n );\n }\n },\n width: width,\n height: width,\n margin: 200\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3121,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":3080,"value":"# Code","pinned":false,"hidden":false,"mode":"md"},{"id":1075,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":3331,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1080,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":2820,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1774,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":2212,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":541,"value":"viewof removeIIEGE = Inputs.toggle({\n label: \"Remove IIE GE lab (improves result)\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"## Network","pinned":false,"hidden":false,"mode":"md"},{"id":2826,"value":"keywordNodes = topOverallKeywords.map(([name, value]) => ({\n id: name,\n size: value,\n connectedKeywords: Object.values(keywordLinks.get(name) ?? []).map(\n ({ source, target }) => (source == name ? target : source)\n )\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"nodes = labs.map(({ name, size, ...data }) => ({\n id: name,\n size: Math.max(1, size + 1),\n topKeywords: data[keywords_source].slice(0, 8).map((d) => d[0]),\n connectedLabs: Object.values(labLinks.get(name) ?? []).map(\n ({ source, target }) => (source == name ? target : source)\n ),\n ...data\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":688,"value":"topKeywordsByLab = d3\n .rollups(\n normalizedKeywordsLabs.map((d) => d.slice(0, 3)).flat(),\n (v) => d3.sum(v, (o) => o[1]),\n (d) => d[0]\n )\n .sort((a, b) => b[1] - a[1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"labLinks = {\n let labLinks = new Map();\n\n for (let link of links) {\n if (!labLinks.has(link.source)) {\n labLinks.set(link.source, []);\n }\n if (!labLinks.has(link.target)) {\n labLinks.set(link.target, []);\n }\n labLinks.get(link.source).push(link);\n labLinks.get(link.target).push(link);\n }\n\n for (let [lab, links] of labLinks) {\n labLinks.set(\n lab,\n links.filter((d) => d.similarity > similarityThreshold)\n );\n }\n return labLinks;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1216,"value":"function cosineSimilarity(lab1, lab2) {\n let sum = 0, sum1 = 0, sum2 = 0;\n for(let keyword in lab1) {\n sum += lab1[keyword] * (lab2[keyword] || 0);\n sum1 += lab1[keyword] * lab1[keyword];\n }\n for(let keyword in lab2) {\n sum2 += lab2[keyword] * lab2[keyword];\n }\n return sum / (Math.sqrt(sum1) * Math.sqrt(sum2));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":284,"value":"topLinks = [].concat(...Array.from(labLinks.values()))","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"d3.extent(links, (d) => d.weight)","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"graphHeight = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":891,"value":"## Concept tree","pinned":false,"hidden":false,"mode":"md"},{"id":777,"value":"concept_tree = {\n const json = await FileAttachment(\"tree (1).json\").json();\n\n // delete json.knowledge[\"social sciences\"];\n // delete json.knowledge[\"humanities\"];\n return json;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3204,"value":"concept_tree_clean = {\n const toArray = (name, object) => {\n const isKeyword = name.includes(\"(keyword)\");\n if (isKeyword) name = name.replace(\" (keyword)\", \"\");\n const entries = Object.entries(object);\n if (entries.length > 0)\n return {\n name,\n children: entries.map((d) => toArray(d[0], d[1])),\n isKeyword\n };\n return { name, isKeyword };\n };\n\n return toArray(\"knowledge\", concept_tree.knowledge);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3278,"value":"concept_tree_clean_string = JSON.stringify(concept_tree_clean)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1115,"value":"function createTree(keywords, rootname = \"knowledge\", limit_depth) {\n const mapWeights = new Map(keywords);\n\n function toHierarchy(root, depth) {\n if (!root.children) {\n // if (!root.isKeyword) console.log(root);\n root.value = mapWeights.get(root.name) || 0;\n } else {\n root.children.forEach((child) => toHierarchy(child, depth + 1));\n // root.children = root.children.filter((d) => d.value && d.value > 0);\n root.sum = d3.sum(root.children, (d) => d.value ?? d.sum ?? 0);\n }\n\n root.depth = depth;\n return root;\n }\n\n const tree = toHierarchy(\n { ...JSON.parse(concept_tree_clean_string), name: rootname },\n 0\n );\n\n return limit_depth != undefined ? filterTree(tree, limit_depth) : tree;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1154,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":2640,"value":"legend = () => Swatches(d3.scaleOrdinal(mainConcepts, categoricalScheme))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1445,"value":"commonKeywordsTree = d3\n .rollups(\n labs\n .map((d) =>\n d[keywords_source].map(([name, value]) => [\n name,\n value * fteWeighted ? value * d.size : value\n ])\n )\n .flat(),\n (v) => d3.sum(v, (d) => d[1]),\n (d) => d[0]\n )\n .sort((a, b) => b[1] - a[1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":945,"value":"hierarchy_tree_small = filterTree(\n createTree(commonKeywordsTree, \"knowledge\"),\n 3\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2598,"value":"non_hierarchized_keywords = commonKeywords\n .map(([name, value]) => name)\n .filter((d) => !hierarchy_tree_concepts.includes(d))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2594,"value":"hierarchy_tree_concepts = d3_hierarchy_tree\n .descendants()\n .map((d) => d.data.name)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2605,"value":"hierarchy_tree_leaves = d3_hierarchy_tree.leaves().map((d) => d.data.name)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1341,"value":"hierarchy_tree = createTree(commonKeywordsTree, \"knowledge\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1823,"value":"conceptAncestor = new Map(\n d3_hierarchy_tree.children\n .map((concept) =>\n concept.descendants().map((d) => [d.data.name, concept.data.name])\n )\n .flat()\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1843,"value":"mainConcepts = hierarchy_tree.children.map((d) => d.name)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1890,"value":"hierarchy_tree_weights = {\n const hierarchy = d3.hierarchy(hierarchy_tree);\n const max = hierarchy.data.sum;\n const pairs = hierarchy\n .descendants()\n .map(({ data: { name, sum, value } }) => [name, sum ?? value]);\n\n return new Map(\n d3.rollups(\n pairs,\n (v) => d3.max(v.map((d) => d[1])),\n (d) => d[0]\n )\n );\n\n // .filter(([name, value]) => value > 0)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1879,"value":"secondaryConcepts = hierarchy_tree.children\n .map((d) => d.children)\n .flat()\n .map((d) => [d.name, hierarchy_tree_weights.get(d.name)])\n .sort((a, b) => b[1] - a[1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1841,"value":"conceptColorScale = d3\n .scaleOrdinal()\n .domain(mainConcepts)\n .range(categoricalScheme)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1320,"value":"d3_hierarchy_tree = d3.hierarchy(hierarchy_tree)","pinned":false,"hidden":false,"mode":"ojs"},{"id":778,"value":"concept_parent = {\n const json = await FileAttachment(\"concept_parent (3).json\").json(),\n entries = Object.entries(json);\n\n const keys = entries.flat();\n // return keys.filter((key) => keys.includes(key + \" (keyword)\"));\n // return Object.entries(json).filter(([parent, concept]) => parent);\n\n return new Map(entries);\n\n // const withoutKeywordStr = entries.map(([parent, concept]) => [\n // parent.replace(\" (keyword)\", \"\"),\n // concept\n // ]);\n\n // return new Map(withoutKeywordStr);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1529,"value":"function createSunburstWeights(keywords, name) {\n const tree = createTree(keywords, name);\n createSunburstWeightsFromTree(tree, name);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3137,"value":"function createSunburstWeightsFromTree(tree, name) {\n const weights = new Map();\n const max = tree.sum;\n\n function descend(root) {\n const val = root.sum ?? root.value ?? 0;\n if (val > 0) weights.set(root.name, val / max);\n if (root.children && val > 0) root.children.forEach((d) => descend(d));\n return root;\n }\n\n descend(tree);\n return weights;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3130,"value":"function filterTree(tree, depth) {\n tree = { ...tree };\n if (tree.depth === depth) {\n tree.value = tree.sum;\n delete tree.children;\n return tree;\n } else if (tree.children)\n return {\n ...tree,\n children: tree.children.map((d) => filterTree(d, depth))\n };\n else return tree;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":547,"value":"## Co occurences","pinned":false,"hidden":false,"mode":"md"},{"id":578,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":2920,"value":"normalizedKeywordsLabs = Array.from(normalizedKeywordsLabsMap).map((d) =>\n Array.from(d[1])\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2941,"value":"normalizedKeywordsLabsMap = {\n const t0 = performance.now(); // Start of performance time\n\n const map = new Map(\n labs.map((d) => {\n const list = d[keywords_source];\n const extent = d3.extent(list.map((d) => d[1]));\n const scale = d3.scaleLinear().domain(extent).range([0, 1]);\n return [\n d.name,\n new Map(list.map(([name, value]) => [name, scale(value)]))\n ];\n })\n );\n console.log(\n \"normalizedKeywordsLabsMap\",\n performance.now() - t0,\n \"milliseconds\"\n );\n\n return map;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":606,"value":"keywordList = [...new Set(topOverallKeywords.map((d) => d[0]))] // to map keywords to indices","pinned":false,"hidden":false,"mode":"ojs"},{"id":609,"value":"wordWeightExtent = d3.extent(wordLinks, (d) => d.weight)","pinned":false,"hidden":false,"mode":"ojs"},{"id":647,"value":"keywordLinks = {\n let keywordLinks = new Map();\n\n for (let link of wordLinks) {\n if (!keywordLinks.has(link.source)) {\n keywordLinks.set(link.source, []);\n }\n if (!keywordLinks.has(link.target)) {\n keywordLinks.set(link.target, []);\n }\n keywordLinks.get(link.source).push(link);\n keywordLinks.get(link.target).push(link);\n }\n\n for (let [lab, links] of keywordLinks) {\n links.sort((a, b) => b.weight - a.weight);\n keywordLinks.set(lab, links);\n }\n return keywordLinks;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":759,"value":"mutable hoveredKeywords = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":599,"value":"wordLinks = {\n // initialize an empty array to store the links\n let links = [];\n\n // iterate through each pair of keywords\n for (let i = 0; i < matrix.length; i++) {\n for (let j = i + 1; j < matrix[i].length; j++) {\n // skip the diagonal and lower triangular part\n // if the matrix entry is nonzero, create a link\n if (matrix[i][j] > 0.3) {\n links.push({\n source: keywordList[i], // use the keyword list to get the keyword corresponding to the index\n target: keywordList[j],\n weight: matrix[i][j]\n });\n }\n }\n }\n\n return links.sort((a, b) => b.weight - a.weight);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":682,"value":"commonKeywords = d3\n .rollups(\n normalizedKeywordsLabs.flat(),\n (v) => d3.sum(v, (d) => d[1]),\n (d) => d[0]\n )\n .sort((a, b) => b[1] - a[1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":549,"value":"topOverallKeywords = {\n const fullArray = commonKeywords.slice(0, 250).concat(topKeywordsByLab);\n return d3\n .groups(fullArray, (d) => d[0])\n .map(([name, values]) => [name, Math.max(...values.map(([name, d]) => d))]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2340,"value":"## ETHZ","pinned":false,"hidden":false,"mode":"md"},{"id":2342,"value":"keywordsIfu = d3\n .rollups(\n ethz_ifu.map((d) => d.keywords).flat(),\n (v) => d3.sum(v, (d) => d[1]),\n (d) => d[0]\n )\n .sort((a, b) => b[1] - a[1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2348,"value":"keywordsUsys = d3\n .rollups(\n ethz_usys.map((d) => d.keywords).flat(),\n (v) => d3.sum(v, (d) => d[1]),\n (d) => d[0]\n )\n .sort((a, b) => b[1] - a[1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2365,"value":"keywordsEthz = d3\n .rollups(\n ethz_usys\n .map((d) => d.keywords)\n .concat(ethz_usys.map((d) => d.keywords))\n .flat(),\n (v) => d3.sum(v, (d) => d[1]),\n (d) => d[0]\n )\n .sort((a, b) => b[1] - a[1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1000,"value":"## Zoomable sunburst","pinned":false,"hidden":false,"mode":"md"},{"id":1008,"value":"partition = (data) => {\n const root = d3.hierarchy(data).sum((d) => d.value);\n return d3.partition().size([2 * Math.PI, root.height + 1])(root);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1011,"value":"color = d3.scaleOrdinal(\n d3.quantize(d3.interpolateRainbow, hierarchy_tree_small.children.length + 1)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1014,"value":"format = d3.format(\",d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1017,"value":"radius = width / 6","pinned":false,"hidden":false,"mode":"ojs"},{"id":1020,"value":"arc = d3\n .arc()\n .startAngle((d) => d.x0)\n .endAngle((d) => d.x1)\n .padAngle((d) => Math.min((d.x1 - d.x0) / 2, 0.005))\n .padRadius(radius * 1.5)\n .innerRadius((d) => d.y0 * radius)\n .outerRadius((d) => Math.max(d.y0 * radius, d.y1 * radius - 1))","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"## Data","pinned":false,"hidden":false,"mode":"md"},{"id":49,"value":"sizes = labs.map(({ name, size }) => ({\n lab: name,\n size\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":2324,"value":"ethz_ifu = {\n let fileData = await FileAttachment(\"ethz_ifu.json\").json({\n typed: true\n });\n\n return Object.entries(fileData).map(([name, data]) => ({\n name,\n ...data,\n keywords: Object.entries(data.keywords_research_collection).sort(\n (a, b) => b[1] - a[1]\n )\n }));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2332,"value":"ethz_usys = {\n let fileData = await FileAttachment(\"ethz_usys.json\").json({\n typed: true\n });\n\n return Object.entries(fileData).map(([name, data]) => ({\n name,\n ...data,\n keywords: Object.entries(data.keywords_research_collection).sort(\n (a, b) => b[1] - a[1]\n )\n }));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"labs = wrangled_data","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":2454,"value":"import { Swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2379,"value":"import { colorSchemePicker } from \"@zechasault/color-schemes-and-interpolators-picker\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2189,"value":"import { slide } from \"@mbostock/slide\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":983,"value":"import {Pack} from \"@d3/pack\"\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2846,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs"},{"id":939,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs"},{"id":1776,"value":"d3Cloud = require(\"d3-cloud@1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1230,"value":"import {ForceGraph} from \"@d3/force-directed-graph\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2003,"value":"import { height } from \"@fil/height\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W40","stdlib":"1","titling":"auto"}