2b:null 2c:["$","title",null,{"children":"Uma rede mais interessante | nazareno | Observable"}] 31:T455,chart = { const links = data.links.map(d => Object.create(d)); const nodes = data.nodes.map(d => Object.create(d)); const simulation = nossaForceSimulation(nodes, links).on("tick", ticked); const svg = d3.select(DOM.svg(width, height)) .attr("viewBox", [-width / 2, -height / 2, width, height]); const link = svg.append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll("line") .data(links) .enter().append("line") .attr("stroke-width", d => Math.sqrt(d.value)); const node = svg.append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle") .data(nodes) .enter().append("circle") .attr("r", 5) .attr("fill", color) .call(drag(simulation)); node.append("title") .text(d => d.id); function ticked() { link .attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y); node .attr("cx", d => d.x) .attr("cy", d => d.y); } return svg.node(); }32:[] 2f:{"id":"42e69b9b98371103","slug":"untitled","title":"Uma rede mais interessante","thumbnail":"b6a453130caa272090375b7c6f147cad6b2ea3dcb8f6384bd066ec386810e81e","access_level":"public","create_time":"$D2018-12-06T02:10:28.529Z","update_time":"$D2019-11-29T11:54:51.622Z","view_time":null,"first_public_time":"$D2018-12-06T02:27:58.184Z","fork":{"id":"4e8a30cfc2e0e94e","slug":"exemplo-minimo-de-rede-com-d3","title":"Exemplo mínimo de rede com d3","owner":{"id":"ae10740cf3156280","login":"nazareno","name":"nazareno"}},"stars":1,"starred":false,"owner":{"type":"team","id":"ae10740cf3156280","login":"nazareno","name":"nazareno","avatar_url":"https://avatars-next.observableusercontent.com/34fa5a0508d5de9838d59ff60b81f4badc7d57bd06b438e4891938fd223be2da","tier":"starter_2024"},"version":281,"publish_version":281,"role":null,"authored":false,"authors":[{"type":"individual","id":"84b22fbcd721be76","login":"nazareno","name":"nazareno","avatar_url":"https://avatars-next.observableusercontent.com/34fa5a0508d5de9838d59ff60b81f4badc7d57bd06b438e4891938fd223be2da","tier":null}],"members":[{"type":"individual","id":"84b22fbcd721be76","login":"nazareno","name":"nazareno","avatar_url":"https://avatars-next.observableusercontent.com/34fa5a0508d5de9838d59ff60b81f4badc7d57bd06b438e4891938fd223be2da","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":4,"collection":{"id":"08584841f4612980","slug":"curso-de-vis-redes-com-d3","title":"Visualização de Redes com d3","owner":{"id":"ae10740cf3156280","login":"nazareno","name":"nazareno"}},"type":"notebook","body":{"title":"Uma rede mais interessante","cells":[{"id":255,"value":"md`# Uma rede mais interessante`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1,"value":"html`\n

Esse é um exemplo mais interessante, com os personagens do livro Os Miseráveis ligados pela co-ocorrência em capítulos.

\n\n

O personagem principal é Valjean. Que nó você adivinharia que é ele? Hover funciona.

\n\n

Aqui o principal é entender como diferentes forças (no sentido físico) cooperam para definir o leiaute dos nós e links. Nesse exemplo, são 3: uma que faz os links terem um certo tamanho, uma que afasta ou aproxima nós uns dos outros, e outra que direciona todos os nós para o centro do svg.

\n\n

Mexa nas forças para entendê-las. Melhor ainda, você pode experimentar fácil com os parâmetros também aqui.

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":252,"value":"md`Os dados agora vêm de um json`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":243,"value":"data = d3.json(\"https://gist.githubusercontent.com/mbostock/4062045/raw/5916d145c8c048a6e3086915a6be464467391c62/miserables.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":94,"value":"function nossaForceSimulation(nodes, links) {\n return d3.forceSimulation(nodes)\n .force(\"link\", d3.forceLink(links).id(d => d.id).distance(30))\n .force(\"charge\", d3.forceManyBody().strength(-30)) //teste mudar esse valor pra -500 ou 500\n .force(\"center\", d3.forceCenter(-200, 10)); // teste comentar essa linha e arrastar\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":250,"value":"md`A escala de cores: `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":240,"value":"color = {\n const scale = d3.scaleOrdinal(d3.schemeCategory10);\n return d => scale(d.group); // isso cria uma função que aplica scale() à propriedade group do d passado\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":76,"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"},{"id":32,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"