2d:null 2e:["$","title",null,{"children":"Example of Network from discussion forums in MOOC | Malik Koné | Observable"}] 33:T92b,chart = { const simulation = d3.forceSimulation(nodes); // general simulation parameters if (alpha) simulation.alpha(+alpha); if (alphaMin) simulation.alphaMin(+alphaMin); if (alphaDecay) simulation.alphaDecay(+alphaDecay); if (alphaTarget) simulation.alphaTarget(+alphaTarget); if (velocityDecay) simulation.velocityDecay(+velocityDecay); // simulation forces if (cbforce.indexOf('l') >= 0) simulation.force("link", d3.forceLink(links).id(d => d.id)); if (cbforce.indexOf('m') >= 0) simulation.force("charge",fmany); if (useBoundary) simulation.force("boundary", forceBoundary((-dim.chartW/2)+10, (-dim.chartH/2)+10, (dim.chartW/2)-10, (dim.chartH/2)-10)); if (cbforce.indexOf('x') >= 0) simulation.force("x", d3.forceX()); if (cbforce.indexOf('y') >= 0) simulation.force("y", d3.forceY()); const svg = d3.select(DOM.svg(dim.chartW, dim.chartH)) .attr("viewBox", [-dim.chartW / 2, -dim.chartH / 2, dim.chartW, dim.chartH]) .on("mousemove", d=>fisheye.focus(d3.mouse(this))); const link = svg.append("g") .attr("fill", "black" ) .attr("stroke", "black") .selectAll("line") .data(links).join("line") .attr("stroke", d=>get_color(d).c) .attr("stroke-opacity", d=>get_color(d).opacity) .attr("stroke-width", d => (d.weight +.5)*2); // toggle arrows if (toggle_arrow) link.style("marker-end", "url(#suit)"); const node = svg.append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle") .data(nodes).join("circle") .attr("r", d=> d.nb_thread_open) .attr("fill", d=>get_color(d).c); // dragndfixed if (dragndfixed){ node.on('dblclick', releasenode(simulation)) .call(drag_fixed(simulation)); } else {node.call(drag(simulation));} node.append("title").text(d => d.id); apply_feye(svg, fisheye, node, link) 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); }); // add markers used for arrows declare_markers(svg); return svg.node(); } 34:T49a,fisheyeO = ({ // the fisheye from the plugin 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(); } }) 35:[] 31:{"id":"e0dde68dcaf4b815","slug":"test-with-network-for-discussion-forums","title":"Example of Network from discussion forums in MOOC","thumbnail":"1a94e89bf53e7e8777cc25aa6f54c619889ce19fea513ee254c3a1ab22475a86","access_level":"public","create_time":"$D2019-06-16T20:49:53.931Z","update_time":"$D2019-09-20T08:09:45.334Z","view_time":null,"first_public_time":"$D2019-06-25T07:32:01.435Z","has_unpublished_edits":null,"fork":true,"stars":6,"starred":false,"owner":{"type":"team","id":"67e45a130f28cdf9","login":"maliky","name":"Malik Koné","avatar_url":"https://avatars-next.observableusercontent.com/7674a5e40b2a6edaa5a2d627bbb5013cbe6fb6986b4d053167e52cfed5441c55","tier":"starter_2024"},"version":1782,"publish_version":1782,"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":3,"collection":{"id":"2bb334656104620f","slug":"networks","title":"Networks","owner":{"id":"67e45a130f28cdf9","login":"maliky","name":"Malik Koné"}},"type":"notebook","body":{"title":"Example of Network from discussion forums in MOOC","cells":[{"id":1,"value":"md`# Example of Network from discussion forums in MOOC`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"html`

Controls

\n\n\n\n\n\n\n\n\n\n\n`\n","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":1064,"value":"html`

Simulation parameters

${viewof charge}	${viewof useBoundary}	${viewof cbforce}
${viewof dragndfixed}	${viewof toggle_arrow}
${viewof fh_distortion}	${viewof fh_radius}	${viewof source}

\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1095,"value":"html`

ForceManyBody

${viewof alpha}	${viewof alphaMin}	${viewof alphaDecay}
${viewof alphaTarget}	${viewof velocityDecay}

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":590,"value":"html`

Canvas Marges

${viewof mstrength}

${viewof mdistanceMin}

${viewof mdistanceMax}

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1090,"value":"html`

Link Force, see docs \n

${viewof marge_sup}	${viewof marge_droite}
${viewof marge_inf}	${viewof marge_gauche}

\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"md`#### Exemple de données`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"exemple_d_arete = data.edges[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"exemple_de_noeud = data.nodes[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"md`#### Controling the display`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":552,"value":"dim = {\n let W = width, \n H = 700;\n let marge = ({sup: marge_sup*H, droite: marge_droite*width, \n inf: marge_inf*H, gauche: marge_gauche*width});\n let chartW = W - marge.gauche - marge.droite,\n chartH = H - marge.sup - marge.inf;\n return {W, H, marge, chartW, chartH}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"md`## Bibliothèque de fonctions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1031,"value":"simulation = d3.forceSimulation(nodes)\n.force(\"link\", d3.forceLink(links).id(d => d.id))\n.force(\"charge\", d3.forceManyBody().strength(-charge))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":789,"value":"md`#### Fisheeye stuff`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":761,"value":"fisheye = fisheyeO.circular()\n.radius(fh_radius)\n.distortion(fh_distortion);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":757,"value":"apply_feye = (svg, fisheye, node, link) => svg.on(\"mousemove\", function() {\n // apply the fisheye to the network\n fisheye.focus(d3.mouse(this));\n\n node.each(function(d) { d.fisheye = fisheye(d); })\n .attr(\"cx\", function(d) { return d.fisheye.x; })\n .attr(\"cy\", function(d) { return d.fisheye.y; })\n .attr(\"r\", function(d) { return d.fisheye.z * 4.5; });\n\n link.attr(\"x1\", function(d) { return d.source.fisheye.x; })\n .attr(\"y1\", function(d) { return d.source.fisheye.y; })\n .attr(\"x2\", function(d) { return d.target.fisheye.x; })\n .attr(\"y2\", function(d) { return d.target.fisheye.y; });\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":776,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":855,"value":"md`#### For arrows`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":718,"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":737,"value":"md`#### Drag and Fixe`","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}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":921,"value":"md`### Forces and simulation parameters`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1096,"value":"fmany = {\n let many = d3.forceManyBody().strength(d => mstrength)\n .distanceMin(mdistanceMin)\n .distanceMax(mdistanceMax);\n return many;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1085,"value":"flink = {\n // let center = d3.forceCenter([x, y])\n function distance(){\n // def return 30;\n return flinkDistance;\n }\n\n function strength(link) {\n let dx = (link.source.x - link.target.x)**2,\n dy = (link.source.y - link.target.y)**2;\n if (flinkstrength === 'null'){ \n return null //1 / Math.min(count(link.source), count(link.target)); // default\n } else if (flinkstrength == 'inverse.5'){\n return 1 / (dx + dy)**(.5)\n }else if (flinkstrength == 'inverse1'){\n return 1 / (dx + dy)\n }\n else if (flinkstrength == 'inverse2'){\n return 1 / (dx + dy)**2\n } else if (flinkstrength == 'inverse.3'){\n return 1 / (dx + dy)**(1/3)\n } else if (flinkstrength == 'inverse.25'){\n return 1 / (dx + dy)**(.25)\n }\n else {\n return flinkstrength;\n }\n }\n\n let link = d3.forceLink(links).id(d => d.id)\n .distance(distance);\n if (flinkstrength !== 'default'){ \n link.strength(strength);\n } \n return link;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"forceBoundary = require(\"d3-force-boundary\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":998,"value":"md`### Colors`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"// transforme un tableau de 4 nombre entre 0 et 1 en une couleur rgba\nget_color = d=>{\n let r = Math.round((+d.color[0] * 255)).toString(16);\n let g = Math.round((+d.color[1] * 255)).toString(16);\n let b = Math.round((+d.color[2] * 255)).toString(16);\n let o = +d.color[3] ;\n //debugger;\n return {c: `#${r}${g}${b}`, opacity:o};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":857,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"data = d3.json(dataset[source]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":515,"value":"nodes = data.nodes.map(d => Object.create(d));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":512,"value":"links = data.edges.map(d => Object.create(d));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"dataset2 = ({\"ddl3\":\"https://gist.githubusercontent.com/maliky/b1b177a44e545c7be4f26aea567bbee8/raw/1d3a3e5509a9169dc1783048c45f7b1e823d1671/graph_test.json\",\n \"ddl_c18_prec5\": \"https://gist.githubusercontent.com/maliky/04c48dd876abcf59733ea1cec89a55d4/raw/197b6a713f60667445e5aa679c0bfcc8b6a9e972/ddl_c18_prec5.json\",\n \"ufm_c18_prec1\": \"https://gist.githubusercontent.com/maliky/7df003fae1efea64c0670c390f5fc7a3/raw/a31a292c2d20b2b378ba586b083ce9bee9cc5cea/ufm_c18_prec1.json\"\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"md`### Importations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":733,"value":"import {releasenode, drag_fixed, rebind, d3_rebind} from \"@maliky/force-directed-graph-a-to-z\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1072,"value":"import {viewof alpha, viewof alphaMin, viewof alphaDecay, viewof alphaTarget, viewof velocityDecay} from \"@maliky/testing-the-d3-forces-parameters\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1087,"value":"import {viewof flinkstrength, viewof flinkDistance} from \"@maliky/testing-the-d3-forces-parameters\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1107,"value":"import {dataset} from \"@maliky/rappels-et-bibliotheque-de-notebook-ou-fonction\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1098,"value":"import {viewof mstrength, viewof mdistanceMin, viewof mdistanceMax} from \"@maliky/testing-the-d3-forces-parameters\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"import {slider,checkbox, select, text} from \"@jashkenas/inputs\"","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":1185,"value":"md`## Views`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":784,"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":786,"value":"viewof fh_radius = slider({\n title:\"Fish eye radius\",\n min: 5, \n max: 200, \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":724,"value":"viewof toggle_arrow = checkbox({\n description: \"Toggle arrows\",\n options: [{ value: \"toggle\", label: \"On\" }],\n value: \"toggle\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":741,"value":"viewof dragndfixed = checkbox({\n description: \"Toggle drag and fixed\",\n options: [{ value: \"toggle\", label: \"On\" }],\n value: \"toggle\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"viewof useBoundary = checkbox({\n options: [{ value: \"true\", label: \"Use force Boundary\" }],\n value: \"true\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"viewof charge = slider({\n min: 10, \n max: 1000, \n step: 10, \n value: 200,\n description: \"Repulsion between nodes\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":987,"value":"md`##### Views for Canvas margins`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":596,"value":"viewof marge_inf = slider({\n min: 0, \n max: .25, \n step: .01, \n value: .01, \n format: \".0%\",\n title: \"inférieure\", \n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1051,"value":"viewof cbforce = checkbox({\n title: \"Toggle which force to apply\",\n// description: \"Toggle the forces to apply\",\n options: [\n { value: \"l\", label: \"forceLink\" },\n { value: \"m\", label: \"forceManyBody\" },\n { value: \"x\", label: \"forceX\" },\n { value: \"y\", label: \"forceY\" },\n ],\n value: [\"l\", \"m\", \"x\", \"y\"],\n submit: false\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":593,"value":"viewof marge_droite = slider({\n min: 0, \n max: .25, \n step: .01, \n value: .01, \n format: \".0%\",\n title: \"droite\", \n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":588,"value":"viewof marge_sup = slider({\n min: 0, \n max: .25, \n step: .01, \n value: .01, \n format: \".0%\",\n title: \"supérieure\", \n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":598,"value":"viewof marge_gauche = slider({\n min: 0, \n max: .25, \n step: .01, \n value: .01, \n format: \".0%\",\n title: \"gauche\", \n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"viewof source = select({\n title: \"Dataset source\",\n //description: \"Select the la source du dataset a visualiser\",\n options: Object.keys(dataset),\n value: \"ddl3\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"

${viewof flinkstrength}

${viewof flinkDistance}