31: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); }32: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(); }33:[{"id":"aaca69fda5081491db9e5604c3ef20033a5eff08bf144bfe4e132fd782ff15947ab6deecab096ace9efa5527060055136ba2550247d5f196aee6da3550773f82","href":"https://static.observableusercontent.com/files/aaca69fda5081491db9e5604c3ef20033a5eff08bf144bfe4e132fd782ff15947ab6deecab096ace9efa5527060055136ba2550247d5f196aee6da3550773f82","name":"duto_guerra_tweets.json","type":"application/json","lastModified":1600472336364.516,"size":6717936}] 2f:{"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"},{"id":138,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":143,"value":"md`## D3 Version`","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"viewof selectedTweets = navio(tweets)","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":104,"value":"color = d3.scaleOrdinal(d3.schemeCategory10)","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":72,"value":"opacity.domain()","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"height = 400","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":131,"value":"network.nodes","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":50,"value":"style = html`