25:["$","title",null,{"children":"Lana Do - D3 Network Visualization of author co-occurence in Vispubdata dataset | Lana Do's Workspace | Observable"}] 49:T67d,{ // const nodes = network.nodes.map(d => ({ ...d })), // links = network.links.map(l => ({ // source: l.source.id, // target: l.target.id, // value: l.value // })); const nodes = network.nodes, links = network.links; const svg = d3 .create("svg") .attr("id", "graph") .attr("viewBox", [0, 0, width, height]); const lines = svg .selectAll("line") .data(links) .join("line") .style("stroke", "#333") .style("stroke-opacity", l => { console.log(l, opacity(l.value)); return opacity(l.value); }); // const circles = svg // .selectAll("circle") // .data(nodes) // .join("circle") // .attr("r", 3); const text = svg .selectAll("text") .data(nodes) .join("text") .attr("fill", "#333") .style("font-size", d => size(d.value) + "pt") .style("fill", d => color(d.cluster)) .text(d => d.id); const ticked = () => { lines .attr("x1", l => l.source.x) .attr("y1", l => l.source.y) .attr("x2", l => l.target.x) .attr("y2", l => l.target.y); // circles.attr("cx", d => d.x).attr("cy", d => d.y); text.attr("x", d => d.x).attr("y", d => d.y); }; const simulation = d3 .forceSimulation(nodes) .force("charge", d3.forceManyBody().strength(-20)) .force("center", d3.forceCenter(width / 2, height / 2)) // .force("x", d3.forceX(width / 2)) .force("link", d3.forceLink(links).id(d => d.id)) .force("boundary", forceBoundary(3, 3, width, height)) .on("tick", ticked); text.call(drag(simulation)); invalidation.then(() => simulation.stop()); return svg.node(); }4a:[{"id":"e0f39f1fc83dae889635027d1c9c01d85f1fadd29d9888d3a2a069f646d842531fcda8c510d91fc1b1fa462a4fe7a9612e6c2995d9e50e7b175ab935cf729807","href":"https://static.observableusercontent.com/files/e0f39f1fc83dae889635027d1c9c01d85f1fadd29d9888d3a2a069f646d842531fcda8c510d91fc1b1fa462a4fe7a9612e6c2995d9e50e7b175ab935cf729807","name":"IEEE VIS papers 1990-2022 - Main dataset.csv","type":"text/csv","lastModified":1695756931171.262,"size":6416726}] 29:{"id":"808b965f370866d5","slug":null,"title":"Lana Do - D3 Network Visualization of author co-occurence in Vispubdata dataset","thumbnail":null,"access_level":"public","create_time":"$D2023-09-26T19:32:48.078Z","update_time":"$D2024-03-13T00:18:59.507Z","view_time":null,"first_public_time":"$D2023-10-02T14:59:47.483Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"4e7c11e19b2ac953","login":"lana-do-ws","name":"Lana Do's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/9ed17a7761f06beca5349dc4d1aec814ebefb6c14a60f9ab748e41f2da3901a0","tier":"starter_2024","bio":"","following":false},"version":53,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3766413752fb02de","login":"lana-do","name":"Lana Do","avatar_url":"https://avatars-next.observableusercontent.com/92bbaac3d5d9ff2b58a4255775ea4d6197fec6c7b399786750d57e98e4316cb7","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"3766413752fb02de","login":"lana-do","name":"Lana Do","avatar_url":"https://avatars-next.observableusercontent.com/92bbaac3d5d9ff2b58a4255775ea4d6197fec6c7b399786750d57e98e4316cb7","tier":null,"role":"editor"},{"type":"team","id":"4e7c11e19b2ac953","login":"lana-do-ws","name":"Lana Do's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/9ed17a7761f06beca5349dc4d1aec814ebefb6c14a60f9ab748e41f2da3901a0","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Lana Do - D3 Network Visualization of author co-occurence in Vispubdata dataset","cells":[{"id":0,"value":"# Lana Do - D3 Network Visualization of author co-occurence in Vispubdata dataset","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":45,"value":"References: Dr. Guerra Gomez, John Alexis. \"D3 Network Visualization.\" Data Visualization Symposium, 1 Apr. 2021, Berkely, California.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":47,"value":"Data Source: https://sites.google.com/site/vispubdata/home?pli=1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":49,"value":"Insight we can make with the visualization network:\n

Huamin Qu
Hanspeter Pfister
Wei Chan
Yinghui Wu
M. Eduard Groller

\n\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"viewof authors = navio(inputData)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"forceBoundary = require(\"d3-force-boundary\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"color = d3.scaleOrdinal(d3.schemeCategory10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"size = d3\n .scaleLinear()\n .domain(d3.extent(network.nodes, d => d.value))\n .range([4, 18])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"opacity = d3\n .scaleLinear()\n .domain(d3.extent(network.links, d => d.value))\n .range([0.1, 1])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"height = 800","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"drag = simulation => {\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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"network = {\n const dLinks = new Map();\n\n for (let authorData of authors) {\n const author = authorData['AuthorNames-Deduped'].split(';');\n \n for (let i = 0; i < author.length; i++) {\n for (let j = i + 1; j < author.length; j++) {\n const key = getKey(\n author[i], \n author[j]\n );\n if (!dLinks.has(key)) dLinks.set(key, 0);\n\n dLinks.set(key, dLinks.get(key) + 1);\n }\n }\n }\n\n const dNodes = new Map();\n let links = [];\n for (let [l, v] of dLinks) {\n const [source, target] = l.split(\"~\");\n\n const s = findOrAdd(dNodes, source);\n const t = findOrAdd(dNodes, target);\n\n dNodes.set(source, ((s.value += 1), s));\n dNodes.set(target, ((t.value += 1), t));\n links.push({ source: s, target: t, value: v });\n }\n\n const network = { nodes: Array.from(dNodes.values()), links };\n // netClustering.cluster(network.nodes, network.links); // Remove this line\n return network;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"style = html`