25:["$","title",null,{"children":"Social Network Analysis of Borrowing | Grogu | Observable"}] 49:T9a7,chart = { data.nodes.forEach(function (obj) { obj.label = getLabel(obj.id); obj.hs = getHs(obj.id); obj.as = getAs(obj.id); }); const links = data.links.map(d => Object.create(d)); const nodes = data.nodes.map(d => Object.create(d)); const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id)) .force("charge", d3.forceManyBody().strength(-400)) .force("x", d3.forceX()) .force("y", d3.forceY()); const svg = d3.create("svg") .attr("viewBox", [-width / 2, -height / 2, width, height]) .style("font", "12px sans-serif"); // Per-type markers, as they don't inherit styles. svg.append("defs").selectAll("marker") .data(types) .join("marker") .attr("id", d => `arrow-${d}`) .attr("viewBox", "0 -5 10 10") .attr("refX", 15) .attr("refY", -0.5) .attr("markerWidth", 6) .attr("markerHeight", 6) .attr("orient", "auto") .append("path") .attr("fill", 'grey') .attr("d", "M0,-5L10,0L0,5"); const link = svg.append("g") .attr("fill", "none") .selectAll("path") .data(links) .join("path") .attr("stroke", d => 'grey') .attr("stroke-width", d => +d.betweenness / 25) .attr("marker-end", d => `url(${new URL(`#arrow-${d.type}`, location)})`); function getColor(d) { if (d.label[0] === 'f') { return 'DeepPink'; } else { return 'SteelBlue'; } } function getRadius(d) { let radius = 6; if (chartType === 'hubs') { radius = parseInt(d.hs * 20); } else if (chartType === 'auths') { radius = parseInt(d.as * 20); } return radius; } const node = svg.append("g") .attr("stroke-linecap", "round") .attr("stroke-linejoin", "round") .selectAll("g") .data(nodes) .join("g") .call(drag(simulation)); node.append("circle") .attr("stroke", 'black') .attr("fill", d => getColor(d)) .attr("stroke-width", .5) .attr("r", d => getRadius(d)); node.append("text") .attr("x", 8) .attr("y", "0.31em") .attr("fill", 'black') .text(d => d.label) .clone(true).lower() .attr("fill", "none") .attr("stroke", "white") .attr("stroke-width", 3); simulation.on("tick", () => { link.attr("d", linkArc); node.attr("transform", d => `translate(${d.x},${d.y})`); }); invalidation.then(() => simulation.stop()); return svg.node(); }4a:Te19,{ let caption = html``; if (chartType === 'default') { return html`

` } else if (chartType === 'hubs') { return html`

Nodes are drawn with their sizes proportional to their hub score. Main hubs

have a large number of outgoing links. Top 3 hubs: m15, f19, m18.

` } else { return html`

Nodes are drawn with their sizes proportional to their authority score. Main authorities

have many incoming links. Top 3 authorities: f31, f23, f16.

` } }4b:[] 29:{"id":"95d7407e6fb1cb22","slug":null,"title":"Social Network Analysis of Borrowing","thumbnail":"01160464cc6b7993d2fe0a08899d4e74fb6f96e5edbde8c3380ebe4c2b9c9e22","access_level":"public","create_time":"$D2023-03-01T21:27:37.370Z","update_time":"$D2023-03-01T21:27:37.370Z","view_time":null,"first_public_time":"$D2023-03-01T21:27:37.370Z","has_unpublished_edits":null,"fork":{"id":"c786707441a39259","slug":"social-network-analysis-of-borrowing","title":"Social Network Analysis of Borrowing","owner":{"id":"1d1a2582caf5fc60","login":"markolalovic","name":"Marko Lalovic"}},"stars":0,"starred":false,"owner":{"type":"team","id":"92ff0b9ee3b36fc4","login":"jb22","name":"Grogu","avatar_url":"https://avatars-next.observableusercontent.com/6431d3dad1ce8e0de5dd6442fe2737c4c36c470ec060e2ee54e4dc92b7f105ea","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":466,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2ef1a5e2ab89f6aa","login":"jb22","name":"Grogu","avatar_url":"https://avatars-next.observableusercontent.com/6431d3dad1ce8e0de5dd6442fe2737c4c36c470ec060e2ee54e4dc92b7f105ea","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"2ef1a5e2ab89f6aa","login":"jb22","name":"Grogu","avatar_url":"https://avatars-next.observableusercontent.com/6431d3dad1ce8e0de5dd6442fe2737c4c36c470ec060e2ee54e4dc92b7f105ea","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Social Network Analysis of Borrowing","cells":[{"id":33,"value":"md`# Social Network Analysis of Borrowing`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"md`The network was obtained from 32 students by asking them: *‘From whom would you like to borrow the educational material?’* \n\nThe arc-widths are proportional to material flow. \n\nClick on the buttons below to reveal the key actors in this material borrowing business.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"viewof chartType = options()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"md`## References \nVisualizations are based on the code of M. Bostock: *Mobile Patent Suits*\nhttps://observablehq.com/@d3/mobile-patent-suits\n\n\nData is from the course: *Network Analysis* \nhttp://vlado.fmf.uni-lj.si/pub/networks/doc/ECPR/assign.1/as4.net\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"md`## Imports and Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"function linkArc(d) {\n const r = Math.hypot(d.target.x - d.source.x, d.target.y - d.source.y);\n return `\n M${d.source.x},${d.source.y}\n A${r},${r} 0 0,1 ${d.target.x},${d.target.y}\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"drag = simulation => {\n \n function dragstarted(d) {\n if (!d3.event.active) simulation.alphaTarget(0.3).restart();\n d.fx = d.x;\n d.fy = d.y;\n }\n \n function dragged(d) {\n d.fx = d3.event.x;\n d.fy = d3.event.y;\n }\n \n function dragended(d) {\n if (!d3.event.active) simulation.alphaTarget(0);\n d.fx = null;\n d.fy = null;\n }\n \n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"height = 440","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"options = () => {\n const buttons = html`\n \n `\n buttons.value = 'default';\n\n buttons.default.onclick = event => {\n buttons.value = 'default';\n event.preventDefault();\n buttons.dispatchEvent(new CustomEvent(\"input\")); \n }\n buttons.hubs.onclick = event => {\n buttons.value = 'hubs';\n event.preventDefault();\n buttons.dispatchEvent(new CustomEvent(\"input\")); \n }\n buttons.auths.onclick = event => {\n buttons.value = 'auths';\n event.preventDefault();\n buttons.dispatchEvent(new CustomEvent(\"input\")); \n }\n \n return buttons\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"function getLabel(id) {\n var result = nodes.filter(obj => {\n return obj.id === id\n });\n return result[0].label;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"function getHs(id) {\n var result = nodes.filter(obj => {\n return obj.id === id\n });\n return +result[0].hs;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"function getAs(id) {\n var result = nodes.filter(obj => {\n return obj.id === id\n });\n return +result[0].as;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"nodes = d3.csv('https://gist.githubusercontent.com/markolalovic/2b86f247155a1f40fd47c7a2cfffba1d/raw/797b4cfea46fb8527b63bf0377ed80c5fd4d16db/nodes.csv')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"links = d3.csv('https://gist.githubusercontent.com/markolalovic/d08c56d673750fabac5e07dcd1db7aec/raw/82149b812aff83cc5d315c60437709a11270f29b/links.csv')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"data = ({nodes: Array.from(new Set(links.flatMap(l => [l.source, l.target])), id => ({id})), links})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"types = Array.from(new Set(links.map(d => d.type)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"1"}} 24:null