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":"8f244c63cc9f4ed3fbc786e58c4e348c25eb44b2843c19060f9993321fbd6421cd0e58311f50e72236ccfdfd8e8360dbaa30320a2fce8d71818cc15dfc139da1","href":"https://static.observableusercontent.com/files/8f244c63cc9f4ed3fbc786e58c4e348c25eb44b2843c19060f9993321fbd6421cd0e58311f50e72236ccfdfd8e8360dbaa30320a2fce8d71818cc15dfc139da1","name":"wordclouds_save.json","type":"application/json","lastModified":1686694410332.626,"size":187172},{"id":"85f02bbe58089b39a2ceb02ca09eea2ced62f6800bd386a54518a8591de9688a5f2942b493b03a976933a715aaa5d5ff4a032255ba9114e9ab2bc313cb1e9137","href":"https://static.observableusercontent.com/files/85f02bbe58089b39a2ceb02ca09eea2ced62f6800bd386a54518a8591de9688a5f2942b493b03a976933a715aaa5d5ff4a032255ba9114e9ab2bc313cb1e9137","name":"ethz_usys.json","type":"application/json","lastModified":1686007253083.257,"size":610662},{"id":"134bde12408ce6580fec9373823e134b6ab9be3892e98631ac46bbd7d8ad92199670f897f41f6a95ff4bdec7bdc85f07dac0a3ac6a48be1773cccb6988623b74","href":"https://static.observableusercontent.com/files/134bde12408ce6580fec9373823e134b6ab9be3892e98631ac46bbd7d8ad92199670f897f41f6a95ff4bdec7bdc85f07dac0a3ac6a48be1773cccb6988623b74","name":"ethz_ifu.json","type":"application/json","lastModified":1686007264414.856,"size":131232},{"id":"715db1223e067f00500780077febc6cebbdd90c151d3d78317c802732252052ab0e367039872ab9c77d6ef99e5f55a0724b35ddc898a1c99cb14c31a379af80a","href":"https://static.observableusercontent.com/files/715db1223e067f00500780077febc6cebbdd90c151d3d78317c802732252052ab0e367039872ab9c77d6ef99e5f55a0724b35ddc898a1c99cb14c31a379af80a","name":"penguins.csv","type":"text/csv","lastModified":1684169111854.58,"size":13506},{"id":"053b094ad400b9906265d5703e73fc1a7689d7bbe649371a4c649d3602a71b30807137ee3a9503542a31d297d1a70906a339ff293ef29123b01f0e54fa9b795c","href":"https://static.observableusercontent.com/files/053b094ad400b9906265d5703e73fc1a7689d7bbe649371a4c649d3602a71b30807137ee3a9503542a31d297d1a70906a339ff293ef29123b01f0e54fa9b795c","name":"all_sources.json","type":"application/json","lastModified":1684169185591.451,"size":775552},{"id":"8f805716745d07c38c29ac0f0954aa83ff254988e36fc1bea849318d3bbf812d22166958fd2695ae0956fe9472e190af3581c82dc8f603ba0b7bf7cdeb75a5a3","href":"https://static.observableusercontent.com/files/8f805716745d07c38c29ac0f0954aa83ff254988e36fc1bea849318d3bbf812d22166958fd2695ae0956fe9472e190af3581c82dc8f603ba0b7bf7cdeb75a5a3","name":"all_sources (1).json","type":"application/json","lastModified":1684792279998.132,"size":964609},{"id":"84818c6fd4e0cc39e9d92f68180460e9a28cde2f0f7c664ceacc8a2b3fd2c5509241747ff18c9bdb9c73a555b538df41eacfda534907fd292649588ae21d7f9c","href":"https://static.observableusercontent.com/files/84818c6fd4e0cc39e9d92f68180460e9a28cde2f0f7c664ceacc8a2b3fd2c5509241747ff18c9bdb9c73a555b538df41eacfda534907fd292649588ae21d7f9c","name":"tree.json","type":"application/json","lastModified":1684792572837.326,"size":165351},{"id":"7a8d0c74e348670cf540aad84bcadce4ed70b6b276b19f91aee08d5c5be8e07b89b75bbe6fca69188e80054c6890795a5439cc47210e4318f0387ef827a9ae85","href":"https://static.observableusercontent.com/files/7a8d0c74e348670cf540aad84bcadce4ed70b6b276b19f91aee08d5c5be8e07b89b75bbe6fca69188e80054c6890795a5439cc47210e4318f0387ef827a9ae85","name":"concept_parent.json","type":"application/json","lastModified":1684792651266.402,"size":151083},{"id":"32395f60bd94b30029e862f8723c73f33cc864370805f9008b18a6f0fc5d63fa4c70b32a33db1a5833ab8410e009000992b875bc1894a056bc9ff94a3f617738","href":"https://static.observableusercontent.com/files/32395f60bd94b30029e862f8723c73f33cc864370805f9008b18a6f0fc5d63fa4c70b32a33db1a5833ab8410e009000992b875bc1894a056bc9ff94a3f617738","name":"all_sources (2).json","type":"application/json","lastModified":1686673611317.909,"size":817213},{"id":"e113764583de02c0593feffe49031dd69d6863e77d2e0b1698cd03e479fbc923b7cb0df85495d08211610f8cb66b007f76ddf6ba7530c1fa46c5680cacf669f8","href":"https://static.observableusercontent.com/files/e113764583de02c0593feffe49031dd69d6863e77d2e0b1698cd03e479fbc923b7cb0df85495d08211610f8cb66b007f76ddf6ba7530c1fa46c5680cacf669f8","name":"concept_parent (3).json","type":"application/json","lastModified":1686673611317.909,"size":1619116},{"id":"4d0c12c2ac9213cb84b37151280e466c40a210bcc3d1638a1a9ad4be525450c82f2a91731ee5606b0fd77e9751279d1a505e056d3014771a23e81efa5eda878a","href":"https://static.observableusercontent.com/files/4d0c12c2ac9213cb84b37151280e466c40a210bcc3d1638a1a9ad4be525450c82f2a91731ee5606b0fd77e9751279d1a505e056d3014771a23e81efa5eda878a","name":"tree (1).json","type":"application/json","lastModified":1686673611317.909,"size":1708698},{"id":"dc683f4cb26c492685803fc004e1128f81827c88488baf525d69bcd6e088c18d0372b3a9cdd391155072163015273c45360a4407a504590d13834307af1eb23a","href":"https://static.observableusercontent.com/files/dc683f4cb26c492685803fc004e1128f81827c88488baf525d69bcd6e088c18d0372b3a9cdd391155072163015273c45360a4407a504590d13834307af1eb23a","name":"concept_parent (1).json","type":"application/json","lastModified":1686048965433.351,"size":151085}] 2f:{"title":"IIE Research Landscape","cells":[{"id":4,"value":"# 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":2842,"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":2841,"value":"viewof verticalWords = Inputs.toggle({\n label: \"Use vertical words\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2840,"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":2830,"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.","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":2827,"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":2824,"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":2823,"value":"## Precise sunburst (to depth 5)","pinned":false,"hidden":false,"mode":"md"},{"id":2822,"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":2821,"value":"viewof showZoomable = Inputs.toggle({\n label: \"Show zoomable sunburst\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2820,"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":2914,"value":"filterTree(labs_trees.get(preciseSunburstLab).full, 4)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2819,"value":"### How it works : \nSelect a lab to display its \"concept sunburst\". Click on concepts to navigate deeper into the tree. Click the center to climb back up. Arc sizes represent the concept weight for the chosen lab.","pinned":false,"hidden":false,"mode":"md"},{"id":2818,"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":2817,"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":"### Concept tree from Wikipedia","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":2812,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":2811,"value":"# Code Section","pinned":false,"hidden":false,"mode":"md"},{"id":1075,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2809,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1080,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":2807,"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":2857,"value":"parser = new DOMParser()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2864,"value":"wordclouds_save_string = new Map(\n (await FileAttachment(\"wordclouds_save.json\").json()).map((d) => [\n d.source,\n {\n wordcloud: parser.parseFromString(d.wordcloud, \"image/svg+xml\")\n .documentElement,\n bubblechart: parser.parseFromString(d.bubblechart, \"image/svg+xml\")\n .documentElement,\n width\n }\n ])\n)","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":2805,"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":2802,"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":2801,"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":2779,"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":2778,"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":2776,"value":"normalizedKeywordsLabs = Array.from(normalizedKeywordsLabsMap).map((d) =>\n Array.from(d[1])\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2775,"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":2770,"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"}