2d:null 2e:["$","title",null,{"children":"Tableau Network Visualization | Berkeley MIDS W209 Information Visualization Course | Observable"}] 33:T71b,{ const target = html`

`; yield target; var divElement = document.getElementById('viz1600473864106'); var vizElement = divElement.getElementsByTagName('object')[0]; if (divElement.offsetWidth > 800) { vizElement.style.width = '100%'; vizElement.style.height = divElement.offsetWidth * 0.75 + 'px'; } else if (divElement.offsetWidth > 500) { vizElement.style.width = '100%'; vizElement.style.height = divElement.offsetWidth * 0.75 + 'px'; } else { vizElement.style.width = '100%'; vizElement.style.height = '777px'; } var scriptElement = document.createElement('script'); scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js'; vizElement.parentNode.insertBefore(scriptElement, vizElement); }34: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(); }35:[{"id":"aaca69fda5081491db9e5604c3ef20033a5eff08bf144bfe4e132fd782ff15947ab6deecab096ace9efa5527060055136ba2550247d5f196aee6da3550773f82","href":"https://static.observableusercontent.com/files/aaca69fda5081491db9e5604c3ef20033a5eff08bf144bfe4e132fd782ff15947ab6deecab096ace9efa5527060055136ba2550247d5f196aee6da3550773f82","name":"duto_guerra_tweets.json","type":"application/json","lastModified":1600472336364.516,"size":6717936}] 31:{"id":"2222f473042b351b","slug":"tableau-network-visualization","title":"Tableau Network Visualization","thumbnail":"c1ea42a2095a4636f32e60d6902e1807bd029c377013d0f48be3b875295ce5f5","access_level":"public","create_time":"$D2020-09-18T23:38:56.364Z","update_time":"$D2020-09-19T00:06:53.428Z","view_time":null,"first_public_time":"$D2020-09-19T00:07:08.279Z","has_unpublished_edits":null,"fork":{"id":"2fc63607caf86e07","slug":"d3-network-visualization","title":"D3 Network Visualization","owner":{"id":"70c3e45a1a202b95","login":"berkeleyvis","name":"Berkeley MIDS W209 Information Visualization Course"}},"stars":4,"starred":false,"owner":{"type":"team","id":"70c3e45a1a202b95","login":"berkeleyvis","name":"Berkeley MIDS W209 Information Visualization Course","avatar_url":"https://avatars-next.observableusercontent.com/15549145605863403a5e1a9e52e5f27f9a102749b0a2c648195d93efe07a5f34","tier":"enterprise_2024"},"version":144,"publish_version":144,"role":null,"authored":false,"authors":[{"type":"individual","id":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null}],"members":[{"type":"individual","id":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null,"role":"editor"},{"type":"team","id":"70c3e45a1a202b95","login":"berkeleyvis","name":"Berkeley MIDS W209 Information Visualization Course","avatar_url":"https://avatars-next.observableusercontent.com/15549145605863403a5e1a9e52e5f27f9a102749b0a2c648195d93efe07a5f34","tier":"enterprise_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":73,"collection":null,"type":"notebook","body":{"title":"Tableau Network Visualization","cells":[{"id":0,"value":"md`# Tableau Network Visualization\n\nI didn't think it was possible, but here you have it. Just use D3 for computing the positions, and a lot of hacking to get Tableau to display them jejeje`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"md`## D3 Version`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"viewof selectedTweets = navio(tweets)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"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","output":"$undefined","database":"$undefined"},{"id":104,"value":"color = d3.scaleOrdinal(d3.schemeCategory10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"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","output":"$undefined","database":"$undefined"},{"id":89,"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","output":"$undefined","database":"$undefined"},{"id":72,"value":"opacity.domain()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"height = 400","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"network = {\n const dLinks = new Map();\n\n for (let t of selectedTweets) {\n for (let i = 0; i < t.entities.hashtags.length; i += 1) {\n for (let j = i + 1; j < t.entities.hashtags.length; j += 1) {\n const key = getKey(\n t.entities.hashtags[i].text,\n t.entities.hashtags[j].text\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);\n // return dNodes;\n return network;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"network.nodes","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"network.links\n .map((l, i) => [{ ...l.source, link: i }, { ...l.target, link: i }])\n .flat()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"style = html`