2b:null 2c:["$","title",null,{"children":"D3 PIM graph | Fabien Benetou | Observable"}] 31:T4df,chart = { const links = data.links.map(d => Object.create(d)); const nodes = data.nodes.map(d => Object.create(d)); 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.sqrt(d.value)); 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); }); invalidation.then(() => simulation.stop()); return svg.node(); }32:T60b,chart_with_link = { const links = data.links.map(d => Object.create(d)); const nodes = data.nodes.map(d => Object.create(d)); 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.sqrt(d.value)); 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)) .on("mouseenter", (evt, d) => { link .attr("display", "none") .filter(l => l.source.id === d.id || l.target.id === d.id) .attr("display", "block"); }) .on("mouseleave", evt => { link.attr("display", "block"); }); 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(); }33:T102e,chartFromSubData = (data, width, height, embeddedPageName, rawgraphpath) => { let graphpath = "" if (rawgraphpath && rawgraphpath.length > 0) graphpath = rawgraphpath.split(":") if (embeddedPageName && graphpath && graphpath.length > 0){ let pathDecay = 0 for (let newNode in graphpath){ newNode = Number(newNode) if ( data.nodes.filter(e => e.id == graphpath[newNode]).length == 0) data.nodes.push({id:graphpath[newNode], group:colorFromPageName(graphpath[newNode])}) if (graphpath[newNode+1]) data.links.push({ source : graphpath[newNode+1], target: graphpath[newNode], value: 10-(++pathDecay)}) } data.links.push({ source : graphpath[0], target: embeddedPageName, value: 10}) } // note that this WILL create side effect, we should NOT be modifying data directly here (!) const links = data.links.map(d => Object.create(d)); const nodes = data.nodes.map(d => Object.create(d)); 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 => d.value) 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)) .on('click', (event, d) => { if (window.location.origin.includes("fabien.benetou.fr")){ let olderPath = "" if (rawgraphpath && rawgraphpath.length>0) olderPath = ":" + rawgraphpath location.href = baseURL + d.id.replace(".","/") + "?graphpath=" + embeddedPageName + olderPath } else { window.open(baseURL + d.id.replace(".","/") ) } }) .attr("stroke", d => { return (d.id == embeddedPageName) ? '#ccc' : '#fff' }) 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()); if (window.location.origin.includes("fabien.benetou.fr")){ svg.append("a") .attr("xlink:href","https://observablehq.com/@utopiah/d3-pim-graph") .attr("target","_blank") .append("polygon") .attr("points", `0,0 0,10 10,0`) .attr("fill", "#aaa") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .on("mouseover", (event, d) => { this.setAttribute("fill", "#000")}) .on("mouseout", (event, d) => { this.setAttribute("fill", "#aaa")}) .append("title") .text("🔬 For details on interpretation visit\nhttps://observablehq.com/@utopiah/d3-pim-graph") svg.append("text") .attr("x", width-10) .attr("y", "10") .text("↗️") .on("click", (event, d) => { svg.node().style = "position: fixed; opacity: 0.5; top: -400px;" document.querySelector("#revert-side-bar-graph").setAttribute("opacity", 1) }) // the -400 offset brings the graph to the center of the page but also make the buttons disappear .append("title") .text("↗️ graph as fullscreen overlay") svg.append("text") .attr("id", "revert-side-bar-graph") .attr("x", width-10) .attr("y", height/2) .attr("opacity", 0) .text("x") .on("click", (event, d) => { svg.node().style = "" document.querySelector("#revert-side-bar-graph").setAttribute("opacity", 0) }) .append("title") .text("revert to sidebar") } return svg.node(); }34:T4b3,coerceData = (startPage="Fabien.Principle", maxDepth=2) => { let myNodes = [] let myLinks = [] let depth = 0 let toExplore = [startPage] let toAdd = [] while (toExplore.length & depth < maxDepth){ for (let node of toExplore){ // console.log("opening", node, "depth", depth) toExplore = toExplore.filter(item => item !== node) if (wiki.Nodes[node] && wiki.Nodes[node].Targets){ // console.log("adding", wiki.Nodes[node].Targets) toExplore = [ ...toExplore, ...wiki.Nodes[node].Targets] // toAdd.push(...wiki.Nodes[node].Targets) } if (!toAdd.includes(node)) toAdd.push(node) } depth++ } toAdd.map( page => myNodes.push({ id:page, group:colorFromPageName(page) }) ) toAdd.map( n => { let page = wiki.Nodes[n]; if (page && page.Targets){ for (var j=0; j e.id ).includes(page.Targets[j])){ // console.log(page, page.Group, page.Label, page.Id) myLinks.push({source: page.Group+"."+page.Label, target: page.Targets[j], value: 1}); } } } }) return {nodes:myNodes, links:myLinks} }35:T780,previewChartFromSubData = (data, width, height, embeddedPageName, rawgraphpath) => { // note that this has been stripped out of annotations and trails, // see chartFromSubData() for the complete version const baseURL = 'https://fabien.benetou.fr/' const baseURLImage = 'https://vatelier.benetou.fr/MyDemo/newtooling/textures/fabien.benetou.fr_' const extension = '.png' const links = data.links.map(d => Object.create(d)); const nodes = data.nodes.map(d => Object.create(d)); 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 => d.value) const rectSize = 10 const node = svg.append("g") .selectAll("image") .data(nodes) .join("image") .attr("width", rectSize) .call(drag(simulation)) .attr("href", d => baseURLImage + d.id.replace(".","_") + extension ) .attr("style", d => "outline: 1px solid #ccc;" ) // consider instead color or colorFromPageName(d.id) .on('click', d => window.open(baseURL + d.id.replace(".","/") , '_blank', 'toolbar=0,location=0,menubar=0')) 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("x", d => d.x-rectSize/2) .attr("y", d => d.y-rectSize/2); }); invalidation.then(() => simulation.stop()); return svg.node(); }36:T905,zoomChart = (pageName, exploratoryDepth, width, height) => { // chart / chartFromSubData( subgraph, width, height/2 ) / previewChartFromSubData let startx = 0 let starty = 0 let ed = exploratoryDepth let displayText = false let zoom = zoomLevel - 5 if (zoom == 0) { zoom = 1 } else if (zoom < 0) { startx += zoom *zoom * 300 starty += zoom *zoom * 100 zoom = -1/(zoom-1) displayText = true } else if (zoom >= 1){ ed += zoom startx -= zoom * zoom * 100 starty -= zoom * zoom * 50 } let data = coerceData(pageName, ed) const links = data.links.map(d => Object.create(d)); const nodes = data.nodes.map(d => Object.create(d)); 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", [startx, starty, width*zoom, height*zoom]); const link = svg.append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll("line") .data(links) .join("line") .attr("stroke-width", d => d.value) const node = svg.append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("g") .data(nodes) .enter().append("g") // modified to add a group then the text within it // but still not text is displayed // even while modifying coordinates to match the ellipsis // inspired by https://bl.ocks.org/heybignick/3faf257bbbbc7743bb72310d03b86ee8 .append("circle") .attr("r", 5) .attr("fill", color) .call(drag(simulation)) if (displayText){ console.log("displayText",displayText) let labels = node.append("text") .text(function(d) { return d.id; }) .attr('x', 6) .attr('y', 3); } 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(); }37:T753,multipleLinkTypeChartFromSubData = (data, width, height, embeddedPageName, rawgraphpath) => { let modifiableData = JSON.parse(JSON.stringify(data)) modifiableData.links[0].value = 2 // note that this has been stripped out of annotations and trails, // see chartFromSubData() for the complete version const baseURL = 'https://fabien.benetou.fr/' const links = modifiableData.links.map(d => Object.create(d)); const nodes = modifiableData.nodes.map(d => Object.create(d)); // return links 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 => d.value) .attr("stroke-dasharray", d => (d.value==2) ? 5.5 : 0 ); // alternative links e.g. backlink, pagelist, etc // could become dashed bezier curves 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)) .attr("stroke", d => { return (d.id == embeddedPageName) ? '#ccc' : '#fff' }) 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(); }38:T8e5,curvedLinksChartFromSubData = (data, width, height, embeddedPageName, rawgraphpath) => { let modifiableData = JSON.parse(JSON.stringify(data)) modifiableData.links[0].value = 2 modifiableData.links[9].value = 2 for (let a of modifiableData.links){ for (let b of modifiableData.links){ if (a != b && a.target == b.source && b.target == a.source && (a.value != 1 || b.value != -1 ) ) a.value = -1 } } // note that this has been stripped out of annotations and trails, // see chartFromSubData() for the complete version const baseURL = 'https://fabien.benetou.fr/' const links = modifiableData.links.map(d => Object.create(d)); const nodes = modifiableData.nodes.map(d => Object.create(d)); console.log(links) // return links 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("fill", "none") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll("path") .data(links) .join("path") // .attr("stroke-width", d => d.value) .attr("stroke-dasharray", d => (d.value==2) ? 5.5 : 0 ); 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)) .attr("stroke", d => { return (d.id == embeddedPageName) ? '#ccc' : '#fff' }) node.append("title") .text(d => d.id); simulation.on("tick", () => { link.attr("d", d => `M${d.target.x} ${d.target.y} Q${(d.target.x+d.source.x)/2+10*d.value} ${(d.target.y+d.source.y)/2} ${d.source.x} ${d.source.y} /* ${d} */ `) // should make the other direction with opposite offset // unfortunately they become perfectly simmetrical so the result is not really visible node .attr("cx", d => d.x) .attr("cy", d => d.y); }); invalidation.then(() => simulation.stop()); return svg.node(); }39:T664,md`# Upcoming explorations - temporal version based on https://observablehq.com/@d3/temporal-force-directed-graph - ~~opening pages directly from click~~✓ - ~~preserving trail (add the path as a URL parameter)~~✓ - ~~displaying the trail~~ - might have to add nodes if they are not present - image preview and neighbors unfolding on mouse over, - display history along the ellipsis stroke, - full screen view but with predefined selections and zoom in areas that are "interesting" to facilitating untangling the knot - having a past analysis easy browsable. - graph analysis - centrality - betweneness cf https://twitter.com/utopiah/status/1158011946471481344 and https://twitter.com/xavigimenez/status/1281491944112357381 - different visuals for different zoom level - ~~replaced symbols by a page preview and with a colored outline of the group.~~✓ - ~~reversible sticky fullscreen mode with e.g. CSS fixed position~~✓ - consider { pointer-events: none; } on the SVG or elements to keep interacting with the page - other links - explicit - anchors - full and partial transclusion (between 2 anchors or lines) https://pmwiki.org/wiki/PmWiki/IncludeOtherPages - lists https://pmwiki.org/wiki/PmWiki/PageLists - VR generated https://fabien.benetou.fr/PIMVRdata/Tools?action=source - implicit - co-edition cf https://fabien.benetou.fr/MemoryRecalls/ImprovingPIM#TimelyCoeditions https://fabien.benetou.fr/MemoryRecalls/ImprovingPIM#ImplicitLinking - semantic (NLP, topic modeling, TF-IDF, etc) cf https://fabien.benetou.fr/MemoryRecalls/ImprovingPIM#KeywordsDistribution `3a:[] 2f:{"id":"aed8e22cceef54a2","slug":"d3-pim-graph","title":"D3 PIM graph","thumbnail":"8a32ca3cf83c6898c8a5f1508ab459eb9b20bcabca181cc1b7dd2d36e64716e0","access_level":"public","create_time":"$D2020-07-07T13:15:56.850Z","update_time":"$D2022-02-11T17:36:08.436Z","view_time":null,"first_public_time":"$D2020-07-07T16:39:20.192Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"571c54f23a22112c","login":"utopiah","name":"Fabien Benetou","avatar_url":"https://avatars-next.observableusercontent.com/0bac47d5eff199771ce966f6c35b81d0456f55f761089445a09ea05e73e51aab","tier":"starter_2024"},"version":1392,"publish_version":1392,"role":null,"authored":false,"authors":[{"type":"individual","id":"fa8cd470e660c7d6","login":"utopiah","name":"Fabien Benetou","avatar_url":"https://avatars-next.observableusercontent.com/0bac47d5eff199771ce966f6c35b81d0456f55f761089445a09ea05e73e51aab","tier":null}],"members":[{"type":"individual","id":"fa8cd470e660c7d6","login":"utopiah","name":"Fabien Benetou","avatar_url":"https://avatars-next.observableusercontent.com/0bac47d5eff199771ce966f6c35b81d0456f55f761089445a09ea05e73e51aab","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"D3 PIM graph","cells":[{"id":0,"value":"md`# D3 PIM graph\n\nFrom [a D3v3 BlockBuilder test](https://blockbuilder.org/Utopiah/7b3cbee942e9ef8fe9dc4c2918125242) updated to [latest D3 and with Observable interaction](https://observablehq.com/@d3/force-directed-graph?collection=@d3/d3-force).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":107,"value":"md`JSON graph of my PIM, wiki [fabien.benetou.fr](https://fabien.benetou.fr) running PmWiki generated daily :`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"dataURL = 'https://vatelier.benetou.fr/MyDemo/newtooling/wiki_graph.json'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":238,"value":"pageName = \"Wiki.VirtualRealityInterface\" // \"Wiki.VirtualRealityInterface\" or \"Fabien.Principle\" etc","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":297,"value":"md`You can get the list of pages via https://fabien.benetou.fr/Site/AllRecentChanges or use as default _Fabien.Principle_.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":617,"value":"md`You can change the depth of exploration from the starting page but be cautious, after a depth of 3 it can become demanding on your computer.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":242,"value":"viewof exploratoryDepth = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":332,"value":"md`Displaying a connected subgraph of **${subgraph.nodes.length} pages** and **${subgraph.links.length} links** with a **depth of ${exploratoryDepth}**.\n\nNote that a the sufficient depth to reach all connected pages will depend on your starting page.\n\nA depth of 1 is sufficient starting from the index _Site.AllRecentChanges_ except that the index and group index have been removed to keep only manually created links.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":144,"value":"chartFromSubData( subgraph, width, height/2 )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":470,"value":"md`Hover on a node to get the page name. Click on the node to open the related page in a new tab. Note that if you click on the central node you should see a similar visualization (minus the colors) on the new page.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":115,"value":"md`Number of pages to display, from 1 to ~1200 :`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":41,"value":"viewof MaxPages = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":455,"value":"baseURL = \"https://fabien.benetou.fr/\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1341,"value":"md`Link highlight`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1315,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":118,"value":"md`Color are assigned based on a hash of the wiki page group.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":483,"value":"md`Trail of last pages visited`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":593,"value":"md`Here is an [example with multiple loops in a trail of visited pages](https://fabien.benetou.fr/Wiki/Numbers?graphpath=Wiki.3DVisualization:Tools.VirtualReality:Main.HomePage:Wiki.Numbers:Main.HomePage:Tools.Shaders:Tools.VirtualReality:VR.VR:Wiki.VirtualRealityInterface:Main.HomePage) with **${loopGraphPathExample.length} nodes** but only a **subset of ${new Set(loopGraphPathExample).size} is unique**.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":595,"value":"chartFromSubData( coerceData(\"Wiki.Numbers\", exploratoryDepth), width, height/2, \"Wiki.Numbers\", loopGraphPathExample.join(\":\") )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":667,"value":"md`The thickness of the edge represent the order of visit. From thickest as the most recent to the thiness as the oldest visited edge.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":656,"value":"md`Note that in this mode or in embbed mode, when there is an explicit starting node, it has a different outside layer color that other nodes.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":599,"value":"loopGraphPathExample = [\n \"Wiki.3DVisualization\",\n \"Tools.VirtualReality\",\n \"Main.HomePage\",\n \"Wiki.Numbers\",\n \"Main.HomePage\",\n \"Tools.Shaders\",\n \"Tools.VirtualReality\",\n \"VR.VR\",\n \"Wiki.VirtualRealityInterface\",\n \"Main.HomePage\"\n]\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":141,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":133,"value":"md`next step\n- smaller versions for embedding, focusing on a subgraph related to the current page (partly done, seems some page can be missing) or group and tooltip for details`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":38,"value":"width = 960","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":39,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":127,"value":"md`Raw data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"wiki = fetch(dataURL).then(response => {\n if (!response.ok) throw new Error(response.status);\n return response.json();\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":130,"value":"md`Coerced data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":43,"value":"data = {\n let myNodes = []\n let myLinks = []\n \n var dictionary = wiki.Nodes;\n var keys = [];\n keys = Object.keys(dictionary);\n var links = [];\n for (var i=0; i (((a << 5) - a) + b.charCodeAt(0))|0, 0)\n})\n }\n \n for (var i=0; i e.id ).includes(page.Targets[j]))\n if (myNodes.map(e=> e.id ).includes(page.Targets[j]))\n myLinks.push({source: page.Id, target: page.Targets[j], value: 1});\n }\n }\n } \n return {nodes:myNodes, links:myLinks}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":524,"value":"colorFromPageName = (page) => {\n return page.split('.')[0].split('').reduce((a,b) => (((a << 5) - a) + b.charCodeAt(0))|0, 0)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":146,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":333,"value":"subgraph = coerceData(pageName, exploratoryDepth)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":750,"value":"explorationsMd = md`## Explorations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":762,"value":"md`### Visual previsialisation of content\n\nAdding the rendered preview of the content and have the group as a border color.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":755,"value":"previewChartFromSubData( subgraph, 200, 150 )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":751,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1183,"value":"md`### Multiple zoom level\n\nBeing able to play with \n- SVG viewbox to zoom in/out\n- number of nodes\n- mode of display of node\n - image as complete content (highest zoom level)\n - ellipse with name (intermediary)\n - ellipse (lowest zoom level)\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1190,"value":"md`Zoom level :`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1188,"value":"viewof zoomLevel = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1202,"value":"zoomChart( pageName, exploratoryDepth, width, height )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1289,"value":"svg`