2a:null 2b:["$","title",null,{"children":"VISVAR Publications & Authors | fheyen | Observable"}] 30:T620,{ // Workaround, otherwise matrix will be empty initially... await delay(2); const chartWidth = Math.min(width, authorNodes.length * 60); const chartHeight = Math.min(width, authorNodes.length * 40); let sortFn; if (sortingMode === "Name") { sortFn = (a, b) => (a.name < b.name ? -1 : 1); } else if (sortingMode === "Publications") { sortFn = (a, b) => b.paperSet.size - a.paperSet.size; } const domain = [...authorNodes].sort(sortFn).map((d) => d.name); return Plot.plot({ width: chartWidth, height: chartHeight, marginLeft: 110, marginBottom: 110, padding: 0, // grid: true, x: { // axis: false, tickRotate: 90, // tickFormat: (d) => getInitals(d), tickFormat: (d) => getShortName(d), domain }, y: { tickFormat: (d) => getShortName(d), domain }, color: { scheme: "blues" }, marks: [ Plot.cell( [ // To make matrix symmetric, add links with inverted source and target ...authorLinks, ...authorLinks.map((d) => { return { ...d, source: d.target, target: d.source }; }) ], { x: (d) => d.target.name, y: (d) => d.source.name, fill: "strength", // fill: "#666", title: (d) => `${d.source.name} and ${d.target.name} have ${ d.strength } publication${d.strength === 1 ? "" : "s"} together` } ) ] }); }31:Ta8f,function publicationGraph( nodes, links, width, height, linkLimit, peopleColors ) { const margin = 50; // Normalize weights to [0, 1] (not needed for Jaccard) const maxWeight = d3.max(links, (d) => d.strength); links = links.map((d) => { return { ...d, normalizedStrength: d.strength / maxWeight }; }); const simulation = d3 .forceSimulation(nodes) .force( "link", d3 .forceLink(links) .id((d) => d.id) .strength((d) => d.normalizedStrength) ) .force("charge", d3.forceManyBody(-100)); // .force("collide", d3.forceCollide(20)); // .force("center", d3.forceCenter(width / 2, height / 2)); const scaleX = d3.scaleLinear().range([margin, width - margin]); const scaleY = d3.scaleLinear().range([margin, height - margin]); const radius = 10; const labelFn = (d) => { const name = getShortName(d["First Author"]); const year = d["Date"].slice(0, 4); return `${name} ${year} ${d["Title"]}`; }; const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const link = svg .append("g") .attr("stroke", "rgba(0, 0, 0, 0.05)") .selectAll("line") .data(links) .join("line") .attr("stroke-width", (d) => d.strength < linkLimit ? 0 : d.normalizedStrength * 10 ); const node = svg .append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle") .data(nodes) .join("circle") .attr("r", radius) .attr("fill", (d) => { const name = d["First Author"]; if (peopleColors?.has(name)) return peopleColors.get(name); if (name === "Michael Sedlmair") return "lightblue"; if (visvarMembers.has(name)) return "#ccc"; return "#eee"; }); // .call(drag(simulation, scaleX, scaleY)); node.append("title").text(labelFn); const text = svg .append("g") .selectAll("text") .data(nodes) .join("text") .attr("fill", "black") .style("pointer-events", "none") .style("user-select", "none") .attr("alignment-baseline", "central") .style("font-size", "8px") .text((d) => labelFn(d).slice(0, 25)); simulation.on("tick", () => { scaleX.domain(d3.extent(nodes, (d) => d.x)); scaleY.domain(d3.extent(nodes, (d) => d.y)); link .attr("x1", (d) => scaleX(d.source.x)) .attr("y1", (d) => scaleY(d.source.y)) .attr("x2", (d) => scaleX(d.target.x)) .attr("y2", (d) => scaleY(d.target.y)); node.attr("cx", (d) => scaleX(d.x)).attr("cy", (d) => scaleY(d.y)); text.attr("x", (d) => scaleX(d.x) + radius).attr("y", (d) => scaleY(d.y)); }); invalidation.then(() => simulation.stop()); return svg.node(); }32:Taf3,function authorGraph(nodes, links, width, height, linkLimit, peopleColors) { // Normalize weights to [0, 1] (not needed for Jaccard) const maxWeight = d3.max(links, (d) => d.strength); links = links.map((d) => { return { ...d, normalizedStrength: d.strength / maxWeight }; }); const margin = 50; const simulation = d3 .forceSimulation(nodes) .force( "link", d3 .forceLink(links) .id((d) => d.id) .strength((d) => d.normalizedStrength) ) .force("charge", d3.forceManyBody(-100)) .force( "collide", d3.forceCollide((d) => { if (d.name === "Michael Sedlmair") return 60; if (visvarMembers.has(d.name)) return 20; return 0; }) ); // .force("center", d3.forceCenter(width / 2, height / 2)); const scaleX = d3.scaleLinear().range([margin, width - margin]); const scaleY = d3.scaleLinear().range([margin, height - margin]); const getRadius = (d) => { if (d.name === "Michael Sedlmair") return 18; if (visvarMembers.has(d.name)) return 12; return 8; }; const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const link = svg .append("g") .attr("stroke", "rgba(0,0, 0, 0.05)") .selectAll("line") .data(links) .join("line") .attr("stroke-width", (d) => d.strength < linkLimit ? 0 : d.normalizedStrength * 10 ); const node = svg .append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle") .data(nodes) .join("circle") .attr("r", getRadius) .attr("fill", (d) => { if (peopleColors?.has(d.name)) return peopleColors.get(d.name); if (d.name === "Michael Sedlmair") return "lightblue"; if (visvarMembers.has(d.name)) return "#ccc"; return "#eee"; }); // .call(drag(simulation, scaleX, scaleY)); node.append("title").text((d) => d.name); const text = svg .append("g") .selectAll("text") .data(nodes) .join("text") .attr("fill", "black") .style("pointer-events", "none") .style("user-select", "none") .attr("alignment-baseline", "central") .style("font-size", "8px") .text((d) => getShortName(d.name)); simulation.on("tick", () => { scaleX.domain(d3.extent(nodes, (d) => d.x)); scaleY.domain(d3.extent(nodes, (d) => d.y)); link .attr("x1", (d) => scaleX(d.source.x)) .attr("y1", (d) => scaleY(d.source.y)) .attr("x2", (d) => scaleX(d.target.x)) .attr("y2", (d) => scaleY(d.target.y)); node.attr("cx", (d) => scaleX(d.x)).attr("cy", (d) => scaleY(d.y)); text .attr("x", (d) => scaleX(d.x) + getRadius(d)) .attr("y", (d) => scaleY(d.y)); }); invalidation.then(() => simulation.stop()); return svg.node(); }33:[{"id":"f6c3e0efd23d91b779fd6447306fb43cd045ce5cbfdcf74156a12d2678ce28d94ead2cd3ea8bbb796ad89b6abce02a46d77c854fe880aca9dd0af33c6c8e31d6","href":"https://static.observableusercontent.com/files/f6c3e0efd23d91b779fd6447306fb43cd045ce5cbfdcf74156a12d2678ce28d94ead2cd3ea8bbb796ad89b6abce02a46d77c854fe880aca9dd0af33c6c8e31d6","name":"visvar_logo_6@1.svg","type":"image/svg+xml","lastModified":1626800299642.674,"size":6291}] 2e:{"id":"2561ef23315a144e","slug":"visvar-publications","title":"VISVAR Publications & Authors","thumbnail":"e2ab840ea5471ef3c9706adad2d5441e118096f376c15d78c042b37e042d8a37","access_level":"public","create_time":"$D2021-07-09T21:10:12.108Z","update_time":"$D2023-10-16T16:11:40.549Z","view_time":null,"first_public_time":"$D2021-07-20T10:12:53.544Z","fork":false,"stars":7,"starred":false,"owner":{"type":"team","id":"5cbdc37d5634c888","login":"fheyen","name":"","avatar_url":"https://avatars-next.observableusercontent.com/5583b3edc59d97385b9ad17f74c76e9ed15457d372ed96534dbd829f3d95ebd5","tier":"starter_2024"},"version":1044,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ce539535bc3f40fc","login":"fheyen","name":"","avatar_url":"https://avatars-next.observableusercontent.com/5583b3edc59d97385b9ad17f74c76e9ed15457d372ed96534dbd829f3d95ebd5","tier":null}],"members":[{"type":"individual","id":"ce539535bc3f40fc","login":"fheyen","name":"","avatar_url":"https://avatars-next.observableusercontent.com/5583b3edc59d97385b9ad17f74c76e9ed15457d372ed96534dbd829f3d95ebd5","tier":null,"role":"editor"},{"type":"individual","id":"16b80219e8f31ae2","login":"saehm","name":"Rene Cutura","avatar_url":"https://avatars-next.observableusercontent.com/b48037e3320c549ec28ee070509a6a3c882d66b7a8dab79b8c910f07e9f63748","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"VISVAR Publications & Authors","cells":[{"id":880,"value":"html`\n

\n${md`\n# VISVAR Publications & Authors\nThis notebook visualizes publications by the [VISVAR research group of the University of Stuttgart](https://visvar.github.io/), showing relations between them and between the authors.\n`}\n${await FileAttachment(\"visvar_logo_6@1.svg\").image()}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":357,"value":"toc(\"h2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":404,"value":"## Publication Table\n\nThis table contains all the data used in this notebook. Of course it is hard to get much information fom it, that's why visualization is such a useful tool!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7,"value":"viewof selectedPublications = Inputs.table(publications)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":399,"value":"**Selected publications: ${selectedPublications.length}**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":374,"value":"html`\n

\n ${selectedPublications.map(\n (d) =>\n html`\n

\n ${d[\"Title\"]}
\n ${d[\"First Author\"]}, ${d[\"Other Authors\"]}
\n ${d[\"Submission Target\"]} ${d[\"Date\"].slice(0, 4)} ${d[\"Type\"]}\n link\n

`\n )}\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":626,"value":"## Publications over Time\n\nA simple visualization would be a bar chart of the number of publications made in each year:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":985,"value":"Plot.plot({\n width,\n height: 200,\n x: {\n type: \"band\"\n },\n marks: [\n Plot.barY(\n d3.groups(publications, (d) => d.Date.substring(0, 4)),\n {\n x: (d) => d[0],\n y: (d) => d[1].length,\n sort: { x: \"x\", reverse: false }\n }\n ),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":342,"value":"## Co-Author Matrix\n\nThis matrix shows which authors collaborated with which in how many publications. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":940,"value":"viewof sortingMode = Inputs.select([\"Publications\", \"Name\"], {\n label: \"Sorting\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":953,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":138,"value":"## Author Graph\n\nEach node is an author, links are weighted by the number of common publications.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":486,"value":"viewof authorLinkLimit = Inputs.range([1, 10], {\n value: 1,\n step: 1,\n label:\n \"Only show links between authors that co-authored at least X publications\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":181,"value":"authorGraph(\n authorNodes,\n authorLinks,\n width,\n width,\n authorLinkLimit,\n visvarColors\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":124,"value":"## Publication Graph\n\nEach node is a publication, links are weighted by the number of common authors.
A force-directed layout shows publications closer together that have more authors in common.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":145,"value":"publicationGraph(\n publicationNodes,\n publicationLinks,\n width,\n width,\n 0,\n visvarColors\n)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":132,"value":"## Implementation\n\nIn the spirit of open science and open data, below is the full implementation of this notebook.\n\n### TODO\n\n- Allow to filter by date range in years\n- Occlusion? [see](https://observablehq.com/@cscheid/force-directed-graph-with-occlusion) [here](https://observablehq.com/@fil/occlusion)\n\n### Data\n\nExcept for members colors, all data will be kept up to date automatically by fetching from the [VISVAR website](https://visvar.github.io/). ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":409,"value":"showOnlyVisvarFirstAuthor = true","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1026,"value":"showOnlyVisvar = true","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1043,"value":"new Set(publications.map((d) => d.Type))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":203,"value":"visvarMembers = new Set([\n \"Aimee Sousa Calepso\",\n \"Alexander Achberger\",\n \"Benjamin Lee\",\n \"Carlos-Victor Quijano-Chavez\",\n \"Christian Krauter\",\n \"Frank Heyen\",\n \"Hyerim Park\",\n \"Jan Krieglstein\",\n \"Katrin Angerbauer\",\n \"Markus Wieland\",\n \"Melissa Reinelt\",\n \"Michael Sedlmair\",\n \"Natalie Hube\",\n \"Nina Dörr\",\n \"Quynh Quang Ngo\",\n \"Rene Cutura\",\n \"Ruben Bauer\",\n \"Sebastian Rigling\",\n \"Simeon Rau\",\n \"Tobias Rau\",\n \"Xingyao Yu\"\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":639,"value":"visvarColors = new Map(\n [...visvarMembers.values()].map((d, i) => [\n d,\n d3.interpolateRainbow(i / visvarMembers.size)\n ])\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1033,"value":"[...visvarMembers.values()]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":709,"value":"// publications are loaded from website, so always up to date (as far as the website is)\npublications = d3.json(\"https://raw.githubusercontent.com/visvar/visvar.github.io/main/papers.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"authors = new Set(publications.flatMap((d) => getAllAuthors(d)).sort())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":36,"value":"publicationsWithAuthors = publications.map((d) => {\n return {\n ...d,\n authorSet: new Set(getAllAuthors(d))\n };\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":100,"value":"publicationNodes = publicationsWithAuthors\n .filter((d) =>\n showOnlyVisvarFirstAuthor ? visvarMembers.has(d[\"First Author\"]) : true\n )\n .map((d, i) => {\n return { ...d, id: i };\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":109,"value":"publicationLinks = {\n let links = [];\n for (let i = 0; i < publicationNodes.length; ++i) {\n for (let j = i + 1; j < publicationNodes.length; ++j) {\n // Edge weight based on only set intersection\n const weight = d3.intersection(\n publicationNodes[i].authorSet,\n publicationNodes[j].authorSet\n ).size;\n if (weight > 0) {\n links.push({\n source: i,\n target: j,\n strength: weight\n });\n }\n }\n }\n return links;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":149,"value":"authorNodes = Array.from(authors)\n .filter((d) => (showOnlyVisvar ? visvarMembers.has(d) : true))\n .sort()\n .map((d, i) => {\n return {\n name: d,\n id: i,\n paperSet: new Set(\n publicationsWithAuthors.filter((paper) => paper.authorSet.has(d))\n // .map((d) => d[\"Title\"])\n )\n };\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":152,"value":"authorLinks = {\n const authorLinks = [];\n for (let i = 0; i < authorNodes.length; ++i) {\n for (let j = i + 1; j < authorNodes.length; ++j) {\n // Edge weight based on Jaccard index\n // const weight = jaccardIndex(authorNodes[i].paperSet, authorNodes[j].paperSet);\n // Edge weight based on only set intersection\n const weight = d3.intersection(\n authorNodes[i].paperSet,\n authorNodes[j].paperSet\n ).size;\n if (weight > 0) {\n authorLinks.push({\n source: authorNodes[i],\n target: authorNodes[j],\n strength: weight\n });\n }\n }\n }\n return authorLinks;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":552,"value":"### Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":155,"value":"function getAllAuthors(paper) {\n const coauthors = paper[\"Other Authors\"].split(\",\");\n return [paper[\"First Author\"], ...coauthors].map((d) => d.trim());\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":179,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":57,"value":"drag = (simulation, scaleX, scaleY) => {\n function dragstarted(event) {\n if (!event.active) simulation.alphaTarget(0.3).restart();\n event.subject.fx = event.subject.x;\n event.subject.fy = event.subject.y;\n }\n\n function dragged(event) {\n event.subject.fx = event.x;\n event.subject.fy = event.y;\n }\n\n function dragended(event) {\n if (!event.active) simulation.alphaTarget(0);\n event.subject.fx = null;\n event.subject.fy = null;\n }\n\n return d3\n .drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":277,"value":"function getInitals(author) {\n const names = author.split(\" \");\n const firstName = names[0];\n const lastName = names[names.length - 1];\n return `${firstName.slice(0, 1)}${lastName.slice(0, 1)}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":415,"value":"function getShortName(author) {\n const names = author.split(\" \");\n const firstName = names[0];\n const lastName = names[names.length - 1];\n return `${firstName.slice(0, 1)}. ${lastName}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":349,"value":"### Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":348,"value":"import { toc } from \"@aaronkyle/toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":526,"value":"import {rangeSlider} from \"@bumbeishvili/utils\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":729,"value":"import {grid, delay} from \"@fheyen/observable-utils\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2f:"$2e:body"