2d:null 2e:["$","title",null,{"children":"Enhancing a force directed graph | Malik Koné | Observable"}] 33:T64a,chart = { // create and start a force simulation. // the force simulation will add some x, y, vx, vy, (optionnaly fx, fy) attributes to the nodes // and start applying the declared forces const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id)) // link extremities are by default attracted to each other .force("charge", d3.forceManyBody()) // by default all nodes are repulsing each other .force("center", d3.forceCenter(width /2, height / 2)); // Keeps the nodes center mass in the center // create the svg to draw the shapes const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); // draw the links const link = svg.append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll("line") .data(links) .join("line") .attr("stroke-width", d => Math.sqrt(d.value)); // draw the nodes const node = svg.append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle") .data(nodes) .join("circle") .attr("r", 5) .attr("fill", color) .call(drag(simulation)); // add the name of the node on mouseover node.append("title") .text(d => d.id); // define how to move links and nodes on each simulation tick simulation.on("tick", () => { 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(); } 34:T49b,chart2 = { const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id)) .force("charge", d3.forceManyBody()) .force("center", d3.forceCenter(width / 2, height / 2)); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const link = svg.append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll("line") .data(links) .join("line") .attr("stroke-width", d => Math.log(d.value)); if (toggle_arrow) link.style("marker-end", "url(#suit)") // adding the marker arrow const node = svg.append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle") .data(nodes) .join("circle") .attr("r", 5) .attr("fill", color) .call(drag(simulation)); node.append("title") .text(d => d.id); simulation.on("tick", () => { 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); }); declare_markers(svg); // define a marker to be attached to the links return svg.node(); }35:T535,chart4 = { const center = [width/2, height/2] const simulation = d3.forceSimulation(fnodes) .force("link", d3.forceLink(flinks).id(d => d.id)) .force("charge", d3.forceManyBody()) // we are using force instead of centering to keep the nodes close to each other .force("x", d3.forceX(center[0])) .force("y", d3.forceY(center[1])); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const link = svg.append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll("line") .data(flinks) .join("line") .attr("stroke-width", d=>strokeWidth(d)); // where is link value comming from function strokeWidth(d){ let width = d.value - thresh; return (width > 1)? width**(.5): 1; } const node = svg.append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle") .data(fnodes) .join("circle") .attr("r", 5) .attr("fill", color) .call(drag(simulation)); node.append("title") .text(d => d.id); simulation.on("tick", () => { 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); }); invalidation.then(() => simulation.stop()); return svg.node(); }36:T71c,chart5 = { const fisheye = fisheyeO.circular() .radius(fh_radius) .distortion(fh_distortion); const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id)) .force("charge", d3.forceManyBody()) .force("x", d3.forceX(width/2)) .force("y", d3.forceY(height/2)); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .on("mousemove", d=>fisheye.focus(d3.mouse(this))); const link = svg.append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll("line") .data(links) .join("line") .attr("stroke-width", d=>strokeWidth(d)); function strokeWidth(d){ let width = d.value - thresh; return (width > 0)? width**(.5): 1; } const node = svg.append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle") .data(nodes) .join("circle") .attr("r", 5) .attr("fill", color) .call(drag(simulation)); node.append("title") .text(d => d.id); svg.on("mousemove", function() { fisheye.focus(d3.mouse(this)); node.each(function(d) { d.fisheye = fisheye(d); }) .attr("cx", function(d) { return d.fisheye.x; }) .attr("cy", function(d) { return d.fisheye.y; }) .attr("r", function(d) { return d.fisheye.z * 4.5; }); link.attr("x1", function(d) { return d.source.fisheye.x; }) .attr("y1", function(d) { return d.source.fisheye.y; }) .attr("x2", function(d) { return d.target.fisheye.x; }) .attr("y2", function(d) { return d.target.fisheye.y; }); }) simulation.on("tick", () => { 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(); }37:Tdcd,chart7 = { var neighList, cycleList, toggle=0; const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id)) .force("charge", d3.forceManyBody()) .force("center", d3.forceCenter(width /2, height / 2)); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const linkG = svg.append('g').attr('id', 'links') .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll("line").data(links).join("line") .attr('class','link') .attr("stroke-width", d => Math.sqrt(d.value)) // Adding the arrow marker .style("marker-end", "url(#arrow)"); const nodeG = svg.append('g').attr('id', 'nodes') .selectAll('.node') .data(nodes).enter().append('g') .attr('class', 'node') .call(drag(simulation)); nodeG.on('dblclick', connectedNodes); nodeG.append('circle') .attr("stroke", "#000") .attr("stroke-width", 1) .attr("r", rayon) .attr("fill", d=>cscale(d.group)); nodeG.append('text') .attr('dx', textd.x ) .attr('dy', textd.y ) .attr('fill', "#000") .attr('font-size', `${font_size}px`) .text(d=>d.index); // node.append("title").text(d => d.id); simulation.on("tick", () => { linkG .attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y); d3.selectAll('circle') .attr("cx", d => d.x) .attr("cy", d => d.y); d3.selectAll('text') .attr("x", d => d.x) .attr("y", d => d.y); }); neighList = get_neighList(nodes, links); cycleList = get_cycleList(nodes, links, neighList); function connectedNodes() { if (toggle == 0) { //Reduce the opacity of all but the neighbouring nodes let cv = d3.select(this).node().__data__; //current node nodeG.style("opacity", function (v) { let neighbours = neighList[cv.index]; // debugger; if (typeof neighbours === 'undefined'){ return 0.1; } else{ return neighbours.includes(v.index)? 1: 0.1; } }); linkG.style("opacity", function (e) { return (cv.index === e.source.index)? 1: 0.1; }); //Reduce the op toggle = 1; } else { //Put them back to opacity=1 nodeG.style("opacity", 1); linkG.style("opacity", 1); toggle = 0; } } function connectedCycles() { if (toggle == 0) { // debugger; //Reduce the opacity of all but the nodes in cycles let cv = d3.select(this).node().__data__; //current node let cyclebours = cycleList[cv.index]; nodeG.style("opacity", function (ov) { return (is_node_in_cyclebours(cyclebours, ov))? 1:.1; }); linkG.style("opacity", function (e) { return (is_edge_in_cyclebours(cyclebours, e))? 1: .1; }); //Reduce the op toggle = 1; } else { //Put them back to opacity=1 nodeG.style("opacity", 1); linkG.style("opacity", 1); toggle = 0; } } // define an arrow marker to be attached to the links svg.append("defs") .append("marker") .attr("id", "arrow") .attr("viewBox", "0 0 10 10") .attr("refX", 20) .attr("refY", 5) .attr("markerWidth", 6) .attr("markerHeight", 6) .attr("orient", "auto") .attr('stroke-width', 1) .append("path") .attr("d", "M0,0L10,5L0,10") // define the marker .style("opacity", "1") .style("fill-opacity", "0") .style("stroke", "#000"); return svg.node(); }38:T528,chart8 = { var neighList; const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id)) .force("charge", d3.forceManyBody()) .force("center", d3.forceCenter(width /2, height / 2)); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const linkG = svg.append('g').attr('id', 'links') .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll("line").data(links).join("line") .attr('class','link') .attr("stroke-width", d => Math.sqrt(d.value)); const nodeG = svg.append('g').attr('id', 'nodes') .selectAll('.node') .data(nodes).enter().append('g') .attr('class', 'node') .on('dblclick', releasenode(simulation)) .call(drag_fixed(simulation)); // nodeG nodeG.append('circle') .attr("stroke", "#000") .attr("stroke-width", 1) .attr("r", 5) .attr("fill", d=>cscale(d.group)); nodeG.append("title").text(d => d.id); simulation.on("tick", () => { linkG .attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y); d3.selectAll('circle') .attr("cx", d => d.x) .attr("cy", d => d.y); d3.selectAll('text') .attr("x", d => d.x) .attr("y", d => d.y); }); return svg.node(); }39:T479,fisheyeO = ({ circular: () => { var radius = 200, distortion = 2, k0, k1, focus = [0, 0]; function fisheye(d) { var dx = d.x - focus[0], dy = d.y - focus[1], dd = Math.sqrt(dx * dx + dy * dy); if (!dd || dd >= radius) return {x: d.x, y: d.y, z: dd >= radius ? 1 : 10}; var k = k0 * (1 - Math.exp(-dd * k1)) / dd * .75 + .25; return {x: focus[0] + dx * k, y: focus[1] + dy * k, z: Math.min(k, 10)}; } function rescale() { k0 = Math.exp(distortion); k0 = k0 / (k0 - 1) * radius; k1 = distortion / radius; return fisheye; } fisheye.radius = function(_) { if (!arguments.length) return radius; radius = +_; return rescale(); }; fisheye.distortion = function(_) { if (!arguments.length) return distortion; distortion = +_; return rescale(); }; fisheye.focus = function(_) { if (!arguments.length) return focus; focus = _; return fisheye; }; return rescale(); } }) 3a:[] 31:{"id":"318501fd26857b88","slug":"force-directed-graph-a-to-z","title":"Enhancing a force directed graph","thumbnail":"f0d940edb8dfbbff1adc542ce2470e9fd0e9c11865fc3bbcc3241d9796bed6a3","access_level":"public","create_time":"$D2019-06-16T22:38:05.711Z","update_time":"$D2019-10-09T16:54:34.810Z","view_time":null,"first_public_time":"$D2019-06-25T07:00:19.221Z","has_unpublished_edits":null,"fork":{"id":"a6c00de7c09bdfa1","slug":"force-directed-graph-component","title":"Force-directed graph component","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":16,"starred":false,"owner":{"type":"team","id":"67e45a130f28cdf9","login":"maliky","name":"Malik Koné","avatar_url":"https://avatars-next.observableusercontent.com/7674a5e40b2a6edaa5a2d627bbb5013cbe6fb6986b4d053167e52cfed5441c55","tier":"starter_2024"},"version":1275,"publish_version":1275,"role":null,"authored":false,"authors":[{"type":"individual","id":"d3108f8c2ef2e746","login":"maliky","name":"Malik Koné","avatar_url":"https://avatars-next.observableusercontent.com/7674a5e40b2a6edaa5a2d627bbb5013cbe6fb6986b4d053167e52cfed5441c55","tier":null}],"members":[{"type":"individual","id":"d3108f8c2ef2e746","login":"maliky","name":"Malik Koné","avatar_url":"https://avatars-next.observableusercontent.com/7674a5e40b2a6edaa5a2d627bbb5013cbe6fb6986b4d053167e52cfed5441c55","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":24,"collection":{"id":"2bb334656104620f","slug":"networks","title":"Networks","owner":{"id":"67e45a130f28cdf9","login":"maliky","name":"Malik Koné"}},"type":"notebook","body":{"title":"Enhancing a force directed graph","cells":[{"id":1,"value":"md`# Enhancing a force directed graph\nThis is an adaptation from the tutorial found on http://www.coppelia.io/2014/07/an-a-to-z-of-extra-features-for-the-d3-force-layout/\n\nIt's about adding some usefull function to look at a graph.\n\nPlease, check also my other notebook about exploring d3.force parameters https://observablehq.com/d/352daed420fbb0de`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"md`### The basic shape\n*Code commented*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"md`## A for Arrows`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":832,"value":"viewof toggle_arrow = checkbox({\n description: \"Toggle arrows\",\n options: [{ value: \"toggle\", label: \"On\" }],\n value: \"toggle\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1131,"value":"function declare_markers(svg){\n svg.append(\"defs\").selectAll(\"marker\")\n .data([\"suit\"])\n .enter().append(\"marker\")\n .attr(\"id\", d => d)\n .attr(\"viewBox\", \"0 0 10 10\")\n .attr(\"refX\", 15)\n .attr(\"refY\", 5)\n .attr(\"markerWidth\", 6)\n .attr(\"markerHeight\", 6)\n .attr(\"orient\", \"auto\")\n .attr(\"stroke-width\", 1)\n .append(\"path\")\n .attr(\"d\", \"M0,0L10,5L0,10L5,5L0,0z\") // define the marker\n .style(\"stroke\", \"#000000\")\n .style(\"opacity\", \".8\");\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"md`## B for Breaking links\nRemove links which strengh is lower than threshold`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"viewof thresh = slider({\n title:\"Link threshold\",\n min: 0, \n max: 10, \n step: .1, \n value: 0,\n description: \"remove links which strenght is below threshold (Default 0)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"md`### F for Fisheye`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":844,"value":"html`

F for Fisheye

\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":808,"value":"md`Mouse ove the network.\nWorks best when the network is stablized`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"md`Check https://github.com/d3/d3-plugins/blob/master/fisheye/fisheye.js and https://observablehq.com/@pstuffa/cartesian-fisheye-distortion and absolutly this https://observablehq.com/@benmaier/a-visually-more-appealing-fisheye-function`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"md`## H is for highlighting & L for labels`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":821,"value":"html`

Display the nodes

${viewof fh_distortion}

${viewof fh_radius}

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1110,"value":"md`-Double click to display neigbours of a node`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":578,"value":"md`### P is for pinning down nodes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":804,"value":"md`- Drag a node to fix somewhere \n- Double click on it, to release it`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":619,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1113,"value":"md`## Helper functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1002,"value":"md`##### Pinning helper`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":694,"value":"releasenode = (simulation) => function (d) {\n // unfixing the node\n d.fx=null;\n d.fy=null;\n simulation.alphaTarget(0.3).restart();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":608,"value":"drag_fixed = simulation => {\n\n function dragstarted(d) {\n if (!d3.event.active) simulation.alphaTarget(0.3).restart();\n // simulation.stop();\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 // simulation.resume();\n // d.fx = null;\n //d.fy = null;\n d.fixed = false;\n\n\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","output":"$undefined","database":"$undefined"},{"id":385,"value":"md`#### Higlight functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":457,"value":"function get_neighList(nodes, links){\n // build the list of neighbours for each nodes of the graph\n // returns an array of indexed by nodes\n let neighList = new Array(nodes.length);\n for (let node in nodes){\n\tlet neighbours = new Array();\n\t// on ajoute le noeud de départ par défaut\n\tneighbours.push(+node);\n\tfor (let i=0; i 1) neighList[node] = neighbours;\n }\n // neighList = neighList.filter(d=>typeof d !== 'undefined');\n\n return neighList;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"function get_cycleList(nodes, links, neighList){\n // build the list of cyclebours for each nodes of the graph\n // returns an array of indexed by nodes\n // debugger;\n let cycleList = new Array(nodes.length);\n // debugger;\n for (const node of nodes){\n\tlet cyclebours = new Array();\n\tlet neighbours = neighList[+node.index];\n\t//\tcyclebours.push(+node);\n\tfor (let len=2; len < 5; len++){\n\t let cycles = get_cycles(len, +node.index, neighList);\n\t if (typeof cycles[0] !== []){\n\t\tcycles.map((cycle) => cyclebours.push(cycle));\n\t } \n\t}\n\tif (cyclebours.length) cycleList[node.index] = cyclebours;\n }\n // cycleList = cycleList.filter(d=>typeof d !== 'undefined');\n return cycleList;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"function get_cycles(longueur, vertex, neighList){\n // renvois les cycles commençant en vertex et de longueur définie\n // debugger;\n let paths = get_voisinage_rec(longueur, new Array([vertex]), neighList);\n let cycles = new Array();\n if (typeof paths !== 'undefined'){\n\tpaths.forEach(function(path){\n\t if (path.slice(-1)[0] === vertex) cycles.push(path.slice(0,-1));\n\t});\n }\n return cycles;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"function get_voisinage_rec(distance, voisinages, neighList){\n // Une fonction réccursive qui renvois les chemins exactement de longueur distances\n if (distance === 0)\treturn voisinages;\n let new_voisinages = new Array();\n \n for(let i in voisinages){\n\tlet voisinage = voisinages[i];\n\tlet cv = voisinage.slice(-1)[0]; // current vertex\n\tlet voisins = neighList[cv];\n\t\n\tif (typeof voisins !== 'undefined'){\n\t voisins.forEach(function(new_voize){\n\t\tif (new_voize != cv){\n\t\t // ajoute au nouveau voisinage l'ancier plus le nouveau voisin\n\t\t new_voisinages.push(voisinage.concat([new_voize]));\n\t\t}\n\t });\n\t distance--;\n\t return get_voisinage_rec(distance, new_voisinages, neighList);\n\t };\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"textd = ({x: -rayon/4-font_size/4, y: rayon/4 + font_size/4})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"function is_node_in_cyclebours(cyclebours, vertex){\n // on parcours les cycle de la nodes touché\n if (typeof cyclebours === \"undefined\") return false;\n for (const cycle of cyclebours){\n\t// si la node en question est dans l'un des cycles c'est ok\n\tif (cycle.includes(vertex.index)) return true;\n }\n return false;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"function is_edge_in_cyclebours(cyclebours, edge){\n // on parcours les cycle de la nodes touché\n let source = edge.source.index;\n let target = edge.target.index;\n if (typeof cyclebours === \"undefined\") return false;\n for (const cycle of cyclebours){\n\t// si la node en question est dans l'un des cycles c'est ok\n\tlet i = cycle.indexOf(source);\n\tif (i < cycle.length -1){\n\t if (cycle[i+1] === target) return true;\n\t /* else if last of list (which does not contain le first element but we know\n\t is a cycle) */\n\t}else if (cycle[0] === target) return true;\n }\n return false;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"toggle = 0 // keeps track of higlight on or off","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1037,"value":"md`Views for higlight`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"viewof font_size = slider({\n title:\"Label's font size in px\",\n min: 1, \n max: 30, \n step: 1, \n value: 12,\n description: \"Default 12\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"viewof rayon = slider({\n title:\"node radius\",\n min: 1, \n max: 30, \n step: 1, \n value: 15,\n description: \"Default 15\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"md`##### Fisheeye functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"rebind = function(target, source) {\n var i = 1, n = arguments.length, method;\n while (++i < n) target[method = arguments[i]] = d3_rebind(target, source, source[method]);\n return target;\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"d3_rebind = (target, source, method) => {\n return function() {\n var value = method.apply(source, arguments);\n return value === source ? target : value;\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":922,"value":"md`for fisheye views`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":813,"value":"viewof fh_radius = slider({\n title:\"Fish eye radius\",\n min: 5, \n max: 100, \n step: 1, \n value: 50,\n description: \"Default 50\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":810,"value":"viewof fh_distortion = slider({\n title:\"Fish eye distortion\",\n min: 1, \n max: 30, \n step: 1, \n value: 5,\n description: \"Default 5\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":991,"value":"md`##### helper for breaking links`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":790,"value":"fnodes = data.nodes.map(d => Object.create(d));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":709,"value":"flinks = {\n let links = data.links.map(createO);\n function createO(d){\n let o = Object.create(d);\n //debugger;\n return o;\n }\n // createO = (d) => Object.create(d); // refactoring the above\n\n links = (thresh)? links.filter(d=> d.value > thresh) : links\n return links;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"nodes = data.nodes.map(d => Object.create(d));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"links = {\n let links = data.links.map(createO);\n function createO(d){\n let o = Object.create(d);\n //debugger;\n return o;\n }\n return links;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"data = d3.json(\"https://gist.githubusercontent.com/mbostock/4062045/raw/5916d145c8c048a6e3086915a6be464467391c62/miserables.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"md`### For display`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"center = [width/2, height/2]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"cscale = d3.scaleOrdinal(d3.schemeCategory10);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"color = {\n const scale = d3.scaleOrdinal(d3.schemeCategory10);\n return d => scale(d.group);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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}\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"import {slider,checkbox, select, text} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 32:"$31:body"

${viewof rayon}

${viewof font_size}