2f:T1f60,chart = { const scale = 1.03; const scaleWord = 1.2; const sw = 0.4; const so = 0.95; const k = 2; // 2^k colors segments per curve const myColor = blackWhite ? (d) => (darkMode ? "white" : "black") : colorFunc(colorNumber, colorRotation, colorSeed, darkenFactor); // Specify the chart’s dimensions. const width = 1500; const height = width; const cx = width * 0.5; // adjust as needed to fit const cy = height * 0.5; // adjust as needed to fit const radius = Math.min(width, height) / 2 - 135; // Create a radial cluster layout. The layout’s first dimension (x) // is the angle, while the second (y) is the radius. const tree = d3 .cluster() .size([2 * Math.PI, radius]) .separation((a, b) => { // Find shared ancestor at depth 2 and depth 3 const depth2Ancestor = a .ancestors() .find((ancestor) => ancestor.depth === 2); const depth3Ancestor = a .ancestors() .find((ancestor) => ancestor.depth === 3); const bDepth2Ancestor = b .ancestors() .find((ancestor) => ancestor.depth === 2); const bDepth3Ancestor = b .ancestors() .find((ancestor) => ancestor.depth === 3); // If both have a common ancestor at depth 3 if (depth3Ancestor && depth3Ancestor === bDepth3Ancestor) { return 0.6; // Moderate separation for shared depth 3 ancestor } // If both have a common ancestor at depth 2 if (depth2Ancestor && depth2Ancestor === bDepth2Ancestor) { return 0.7; // Larger separation for shared depth 2 ancestor } // Default separation for other cases return 1; }); // Sort the tree and apply the layout. const root = tree(hierarchie); root.leaves().forEach((leaf) => { leaf.outgoing = []; leaf.incoming = []; const link = links.find((node) => node.file === leaf.data.name); if (link) { link.links.forEach((targetLink) => { const targetNode = root.find((d) => d.data.name === targetLink.file); if (targetNode) { leaf.outgoing.push([leaf, targetNode]); console.log(targetNode); } }); } links.forEach((node) => { node.links.forEach((link) => { if (link.file === leaf.data.name) leaf.incoming.push([node, leaf]); }); }); leaf.degree = leaf.incoming.length + leaf.outgoing.length; }); console.log(root); // Creates the SVG container. const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-cx * scale, -cy * scale, width * scale, height * scale]) .attr("style", "width: 100%; height: auto; font: 10px sans-serif;"); if (darkMode) svg .append("rect") .attr("x", -width / 2) .attr("y", -height / 2) .attr("width", width) .attr("height", height) .attr("fill", "black"); // Append links. if (structure) svg .append("g") .attr("fill", "none") .attr("stroke", "#555") .attr("stroke-opacity", 0.4) .attr("stroke-width", 1.5) .selectAll() .data(root.links()) .join("path") .attr( "d", d3 .linkRadial() .angle((d) => d.x) .radius((d) => d.y) ) .attr("stroke", (d) => myColor( d.target.ancestors().find((ancestor) => ancestor.depth == colorDepth) ) ); // Append nodes. svg .append("g") .selectAll() .data(root.leaves()) .join("circle") .attr( "transform", (d) => `rotate(${(d.x * 180) / Math.PI - 90}) translate(${d.y},0)` ) .attr("fill", (d) => (d.children ? "#555" : "#999")) .attr("r", (d) => 1 + 0.05 * d.degree) .attr("fill", (d) => { const col = myColor( d.ancestors().find((ancestor) => ancestor.depth == colorDepth) ); return d.children ? col : darkMode ? darken(col, 0.8) : lighten(col, 0); // return d.children ? col : darkMode ? darken(col, 0.8) : lighten(col, 0.8); }); // Append labels. svg .append("g") .attr("stroke-linejoin", "round") .attr("stroke-width", 3) .selectAll() .data(root.leaves()) .join("text") .attr( "transform", (d) => `rotate(${(d.x * 180) / Math.PI - 90}) translate(${d.y},0) rotate(${ d.x >= Math.PI ? 180 : 0 })` ) .attr("dy", "0.31em") .attr("x", (d) => d.x < Math.PI === !d.children ? 6 * scaleWord : -6 * scaleWord ) .attr("text-anchor", (d) => d.x < Math.PI === !d.children ? "start" : "end" ) .attr("font-size", (d) => 9.5 + 0.05 * d.degree) .attr("paint-order", "stroke") .attr("stroke", darkMode ? "black" : "white") .attr("fill", "currentColor") .attr("fill", (d) => { const col = myColor( d.ancestors().find((ancestor) => ancestor.depth == colorDepth) ); return darkMode ? lighten(col, 0.4) : col; }) .text((d) => d.height == 0 ? links.find((node) => node.file == d.data.name).title : d.depth ); if (edge) svg .append("g") .attr("fill", "none") .attr("stroke-width", sw) .attr("stroke-opacity", so) .selectAll("path") .data(root.leaves().flatMap((leaf) => leaf.outgoing)) .join("path") .style("mix-blend-mode", darkMode ? "normal" : "multiply") .style("opacity", so) .attr("d", ([i, o]) => line(i.path(o))) .each(function (d) { d.path = this; }) .attr("stroke", (d) => lighten( myColor( d[1].ancestors().find((ancestor) => ancestor.depth == colorDepth) ), LighenFactor ) ); const g = svg.append("g"); const drawRingAround = ( level = 2, radiusCat = 1000, catRadius = 50, fontSize = 10, offAngle = 0, withText = false, withEdges = true, cornerRadius = 5, arrayName ) => { let leaves = root.leaves(); let currentCategory = leaves[0] .ancestors() .find((ancestor) => ancestor.depth == level).data.name; console.log(currentCategory); let currentColor = myColor( leaves[0].ancestors().find((ancestor) => ancestor.depth == colorDepth) ); let currentFirstX = leaves[0].x; let currentLastX = leaves[0].x; let catArray = []; for (let i = 1; i < leaves.length; i++) { if ( leaves[i].ancestors().find((ancestor) => ancestor.depth == level).data .name !== currentCategory ) { catArray.push({ color: currentColor, name: currentCategory, start: currentFirstX, end: currentLastX }); currentColor = myColor( leaves[i].ancestors().find((ancestor) => ancestor.depth == colorDepth) ); currentCategory = leaves[i] .ancestors() .find((ancestor) => ancestor.depth == level).data.name; currentFirstX = leaves[i].x; } currentLastX = leaves[i].x; } catArray.push({ color: currentColor, name: currentCategory, start: currentFirstX, end: currentLastX }); const catData = catArray.map((d, i) => { return { color: d.color, text: withText ? arrayName[i] : "", //d.name, startAngle: (d.start / Math.PI) * 180, endAngle: (d.end / Math.PI) * 180 }; }); drawRing(g, { fontSize: fontSize, r: radiusCat, innerR: catRadius, opacity: 0, padAngle: 0, endsPadAngle: -offAngle, opaque: false, //radial: true, cornerRadius: cornerRadius, data: catData, strokeWidth: withEdges ? undefined : 0 }); }; drawRingAround(2, 618, 150, 10, 0.8, false, true, undefined); drawRingAround(2, 743, 30, 12, 0.8, true, false, undefined, paliCategories); drawRingAround(3, 621, 125, 10, 0.5, false, true, 3); drawRingAround(3, 725, 30, 8, 0.5, true, false, 3, categories); return svg.node(); }30:Te2f,html`

Click to expand

${md` \`\`\`js const fs = require('fs-extra'); const path = require('path'); const { JSDOM } = require('jsdom'); function toTitleCase(str) { return str .toLowerCase() // Convert the entire string to lowercase .split(' ') // Split the string into words .map(word => word.charAt(0).toUpperCase() + word.slice(1)) // Capitalize the first letter of each word .join(' '); // Join the words back into a string } // Example usage const input = "hello world, THIS is a test!"; const titleCased = toTitleCase(input); console.log(titleCased); // Output: "Hello World, This Is A Test!" // Function to check if a URL is internal (relative to the root) function isInternalLink(url) { return !/^https?:\/\//i.test(url) && !url.startsWith('//') && !url.startsWith('data:'); } // Function to filter links based on additional conditions function shouldIncludeLink(href) { // Exclude links starting with "dic" or "table" return !(href.startsWith('../dic') || href.startsWith('../table')); } // Recursive function to traverse directories function traverseDirectory(dir, callback) { fs.readdirSync(dir).forEach((file) => { const filePath = path.join(dir, file); if (fs.statSync(filePath).isDirectory()) { traverseDirectory(filePath, callback); } else { callback(filePath); } }); } // Function to parse HTML files and extract links and title function extractLinksAndTitleFromHTML(filePath, basePath) { const content = fs.readFileSync(filePath, 'utf8'); const dom = new JSDOM(content); const document = dom.window.document; const links = []; const title = document.querySelector('title')?.textContent.trim() || 'Untitled'; const firstH2 = document.querySelector('h2')?.textContent.trim() || 'No H2 found'; document.querySelectorAll('a[href]').forEach((link) => { const parent = link.closest('p[align="center"]'); if (parent) { return; // Ignore links inside

} const href = link.getAttribute('href'); if (isInternalLink(href) && shouldIncludeLink(href)) { const absoluteHref = path.resolve(basePath, href); links.push({ file: href.split('/').pop(), //absoluteHref: absoluteHref, // title: link.textContent.trim(), // attributes: Array.from(link.attributes).reduce((acc, attr) => { // acc[attr.name] = attr.value; // return acc; // }, {}) }); } }); return { title, firstH2, links }; } // Main script function main() { const websiteFolder = './wtb'; // Replace with your folder path const outputJSON = './links.json'; const basePath = path.resolve(websiteFolder); const allPages = []; traverseDirectory(basePath, (filePath) => { if (filePath.endsWith('.html') || filePath.endsWith('.htm')) { const relativePath = path.relative(basePath, filePath); const { title, firstH2, links } = extractLinksAndTitleFromHTML(filePath, basePath); allPages.push({ file: relativePath.split('/').pop(), // title: title, title: toTitleCase(firstH2), links: links, }); } }); fs.writeFileSync(outputJSON, JSON.stringify(allPages, null, 2), 'utf8'); console.log(\`Links, firstH2 and titles extracted to \${outputJSON}\`); } main(); \`\`\` `}

`31:T16f4,html`

Click to expand

${md` \`\`\`py import networkx as nx import json import os # Load your JSON data with open('links.json', 'r') as file: data = json.load(file) # Create a directed graph directed_graph = nx.DiGraph() # Add nodes and edges for entry in data: source_file = entry["file"] source_title = entry["title"] directed_graph.add_node(source_file, title=source_title) for link in entry["links"]: target_file = link["file"] directed_graph.add_edge(source_file, target_file) # Convert to an undirected graph and merge multiple edges into one undirected_graph = nx.Graph() # Add edges while merging for u, v in directed_graph.edges(): if undirected_graph.has_edge(u, v): # If the edge already exists, you could sum weights or leave as a single edge. undirected_graph[u][v]["weight"] += 1 else: undirected_graph.add_edge(u, v, weight=1) # Add node attributes to the undirected graph # for node, data in directed_graph.nodes(data=True): # undirected_graph.nodes[node].update(data) # Calculate metrics for the entire undirected graph print("Metrics for the undirected graph:") print(f"Number of nodes: {undirected_graph.number_of_nodes()}") print(f"Number of edges: {undirected_graph.number_of_edges()}") print(f"Density: {nx.density(undirected_graph):.4f}") # Degree distributions degrees = dict(undirected_graph.degree()) average_degree = sum(degrees.values()) / len(degrees) print(f"Average degree: {average_degree:.2f}") # Identify the largest connected component largest_component = max(nx.connected_components(undirected_graph), key=len) main_component = undirected_graph.subgraph(largest_component).copy() # Metrics for the main component print("\nMetrics for the main component:") print(f"Number of nodes: {main_component.number_of_nodes()}") print(f"Number of edges: {main_component.number_of_edges()}") print(f"Density: {nx.density(main_component):.4f}") ## SPLIT GRAPH ## # Append the split_graph function def split_graph(graph, log_file_path="graph_split_log.txt", output_dir="split_results"): # Ensure the output directory exists if not os.path.exists(output_dir): os.makedirs(output_dir) removed_edges = [] remaining_subgraphs = [] communities = [] # To store the hierarchical structure with open(log_file_path, "w") as log_file: def recursive_split(subgraph, level=0): log_file.write(f"[Level {level}] Processing subgraph with {subgraph.number_of_nodes()} nodes and {subgraph.number_of_edges()} edges.\n") print(f"[Level {level}] Nodes: {subgraph.number_of_nodes()}, Edges: {subgraph.number_of_edges()}") # Calculate edge betweenness centrality without normalization edge_bc = nx.edge_betweenness_centrality(subgraph, normalized=False) # Filter edges based on the given conditions valid_edges = [ (edge, bc) for edge, bc in edge_bc.items() if bc > 1 and subgraph.degree(edge[0]) > 1 and subgraph.degree(edge[1]) > 1 ] if not valid_edges: # Save the subgraph to file subgraph_filename = os.path.join(output_dir, f"subgraph_level_{level}_{len(remaining_subgraphs)}.graphml") nx.write_graphml(subgraph, subgraph_filename) remaining_subgraphs.append(subgraph) # Save the subgraph as a community community = { "parent": f"Community_Level_{level}_{len(remaining_subgraphs)}", "children": list(subgraph.nodes) } communities.append(community) log_file.write(f"[Level {level}] Subgraph saved to {subgraph_filename}.\n") return # Find and remove the edge with the highest betweenness centrality edge_to_remove, max_bc = max(valid_edges, key=lambda x: x[1]) log_file.write(f"[Level {level}] Removing edge {edge_to_remove} with betweenness centrality {max_bc}.\n") removed_edges.append(edge_to_remove) # Remove the edge and split the graph into connected components subgraph.remove_edge(*edge_to_remove) components = [subgraph.subgraph(c).copy() for c in nx.connected_components(subgraph)] for component in components: recursive_split(component, level + 1) # Start the recursive splitting recursive_split(graph) # Save the list of removed edges edges_file = os.path.join(output_dir, "removed_edges.json") with open(edges_file, "w") as f: json.dump(removed_edges, f, indent=4) # Save the communities to a JSON file communities_file = os.path.join(output_dir, "communities.json") with open(communities_file, "w") as f: json.dump(communities, f, indent=4) log_file.write(f"\nSplitting process complete. Removed edges saved to {edges_file}\n") log_file.write(f"Communities saved to {communities_file}\n") print(f"\nSplitting process complete. Removed edges saved to {edges_file}\n") print(f"Communities saved to {communities_file}") return removed_edges, remaining_subgraphs, communities # Apply the split function edges_removed, subgraphs, communities = split_graph(main_component) # Output summary print("\nEdges removed during the splitting process:") for edge in edges_removed: print(edge) print(f"\nNumber of remaining subgraphs: {len(subgraphs)}") for i, sg in enumerate(subgraphs): print(f"Subgraph {i + 1}: {sg.number_of_nodes()} nodes, {sg.number_of_edges()} edges") print("\nHierarchical Communities:") for community in communities: print(community) \`\`\` `}

`32:T885,hierarchie = { let communities = communitiesH; const links = removed_edges; let r = 0; links.reverse().forEach((link) => { // Finding Communities let a = link[0], b = link[1]; let comA = communities.find((com) => com.find((node) => node.data.name == a) ); let comB = communities.find((com) => com.find((node) => node.data.name == b) ); // Merginig if coms are different if (comA != comB) { let heightA = comA.find((node) => node.depth == 0).height; let heightB = comB.find((node) => node.depth == 0).height; if (heightB != heightA) { if (heightB > heightA) { const comTemp = comB, temp = b, heightTemp = heightB; comB = comA; comA = comTemp; b = a; a = temp; heightB = heightA; heightA = heightTemp; } // comA is heigher than comB // we have to merge at heightB + 1 // we need to find the sub tree of comA that contains the node a const nodeA = comA.find((node) => node.data.name == a); const ancestorA = nodeA .ancestors() .find((ancestor) => ancestor.height == heightB + 1); comB.parent = ancestorA; ancestorA.children.push(comB); comA = d3.hierarchy(comA); // recompute the hierarchy comA.each((d) => (d.data = { ...d.data.data, children: d.children })); // fixes the glitch communities = communities.filter((com) => com != comB); } else { // we need to add a common new ancestor to both communities let comC = d3.hierarchy({ name: "C-" + heightA + "-" + r }); comC.children = [comA, comB]; comC = d3.hierarchy(comC); comC.each((d) => (d.data = { ...d.data.data, children: d.children })); // fixes the glitch communities.push(comC); communities = communities.filter((com) => com != comA && com != comB); r++; } } console.table(communities.length); }); let comF = d3.hierarchy(communities[0]); comF.each((d) => (d.data = { ...d.data.data, children: d.children })); // fixes the glitch return comF; }33:T5a21,drawRing = (svgOrigin, ringParam) => { const defaultParam = { // Geometry // cx: 0, // Angles are mesured from top like a clock in deg cy: 0, r: 100, innerR: 20, padAngle: 1, // Angle Padding (actually work linear) startPadAngle: null, // used with customD3 old one not used here... endPadAngle: null, // need uncomment at the arc() function padRadius: null, // arcline = padRadius x padAngle (default sqrt(innerRadius * innerRadius + outerRadius * outerRadius)) padLinear: false, // Linear Padding (not used) cornerRadius: 0, // Aspect // radial: false, // Direction of text strokeWidth: 0.6, strokeColor: false, strokeFade: false, fontSize: 12, lineHeight: 0, fontName: "sans-serif", letterSpacing: 0, flipLetters: false, // Upside Down flipLines: false, // Top & Bottom //bold: selectedFont != "Cormorant SC" ? 400 : 700, bottomAdjust: 0, // Line Height topAdjust: 0, // Line height // Coloring // color: "black", fade: 0, fadeLimit: 30, // Turn the background dark and letters white opacity: 1, opacityLimit: 0.8, // same (could have a variable switchColor) darkenFactor: 0, opaque: true, // Add white background behind ring gradientID: false, gradientR: 50, gradientI: 0, gradientX: 50, gradientY: 50, gradientFX: 50, gradientFY: 50, invertGradient: false, // Divisions // div: 1, // |-endsPadAngle-|-1-|-2-|-n-|-4-|-div-|-endsPadAngle-| n: 1, // Segment num gPadAngle: 0, // parallel end-padding for the group (this changes the center of the arc... -_-) needs custom d3 gPadRadius: null, // arcline = padRadius x padAngle (default sqrt(innerRadius * innerRadius + outerRadius * outerRadius)) startGPadAngle: null, endGPadAngle: null, //gR: 0, // carefull padAngle at ends of group still needs padAngle endsPadAngle: 0, // Angle End Padding endsPadLinear: false, // Linear End Padding startRatio: 0, // |sR*L|-1-|-2-|-n-|-4-|-div-|L-eR*L| endRatio: 1, // L : arcLength/square side depends on R and angles padRatio: 0, // |sR*L|-startPadRatio-|-text-|-endPadRatio-|L-eR*L| startPadRatio: false, // padRatio by default endPadRatio: false, // padRatio by default // Square Style // square: false, squareEnds: false, centerRadius: true, // Radius is mesured from origin to center of cells. centerInnerR: true, // Inner Radius is mesured from center of cells. innerSide: false, // length of inner side, overwrite angles and padAngle padSquare: 0, // Padding between div cells tilted: false, // Angle of cells wall (not used) arrowEnd: false, // end in an arrow arrowStart: false, arrowFactor: 1, // Polygone Coloring // polyId: false, // Identify the poly polyPad: 0, // inner Padding polyOpacity: 1, polyFade: 0, polyOpaque: true, centerText: "", up: 0 }; //const d3 = customD3; // customD3old; // Global Constants & function const pi = Math.PI; const dTR = (deg) => (pi / 180) * deg; // deg to rad const rTD = (rad) => (180 / pi) * rad; // rad to deg const modPi = (angle) => angle % (2 * pi); const sin = (x) => Math.sin(x); const cos = (x) => Math.cos(x); const atan = (x) => Math.atan(x); const sqrt = (x) => Math.sqrt(x); // Color Functions const fading = (color, f) => { const { l, c, h } = d3.lch(color); return d3.lch(l + f, c, h); }; const darken = (color, f) => fading(color, -f); // Create Ring const svg = d3.create("svg"); // For Filling Polygone later let arrPoints = []; let d2 = {}; // alternative data point const background = svg.append("g").attr("id", "background"); ringParam.data.forEach((dOrigin, index) => { // d will be our main data element const structuredClone = (val) => JSON.parse(JSON.stringify(val)); const d = structuredClone(dOrigin); // Index for adding text to arc const id = DOM.uid("p-" + d.index); // define local parameter for each data according to priority // d.origin (data) > ring Param > Default Param for (const p in defaultParam) { dOrigin[p] != undefined ? (d[p] = dOrigin[p]) : ringParam[p] != undefined ? (d[p] = ringParam[p]) : (d[p] = defaultParam[p]); } //if (check.includes("outlineOnly")) (d.opacity = 0), (d.polyOpacity = 0); // All to Rad ! d.startAngle = dTR(d.startAngle); d.endAngle = dTR(d.endAngle); d.padAngle = dTR(d.padAngle); d.gPadAngle = dTR(d.gPadAngle); d.startPadAngle = dTR(d.startPadAngle); d.endPadAngle = dTR(d.endPadAngle); d.endsPadAngle = dTR(d.endsPadAngle); // Definition let a = d.startAngle, b = d.endAngle, c = (b - a) / 2; if (d.endsPadLinear) d.endsPadAngle = Math.abs( Math.atan(Math.tan(c) - d.endsPadLinear / d.r) - c ); a = d.startAngle + d.endsPadAngle; b = d.endAngle - d.endsPadAngle; c = (b - a) / 2; let e = (a + b) / 2, R = d.r, Rs = R * cos(c), r = d.innerR, rs = r * cos(c); const div = d.div, n = d.n, polyPad = d.polyPad; // by default d.padRatio d.startPadRatio = d.startPadRatio !== false ? d.startPadRatio : d.padRatio; d.endPadRatio = d.endPadRatio !== false ? d.endPadRatio : d.padRatio; // CenterText if (d.centerText != "") { d.text = ""; d.startAngle = 0; d.endAngle = 0; d.strokeWidth = 0; d.opacity = 0; d.opaque = false; } // with group padding NEEDS CUSTOM D3 let sgp = d.startGPadAngle === null ? d.gPadAngle : dTR(d.startGPadAngle), egp = d.endGPadAngle === null ? d.gPadAngle : dTR(d.endGPadAngle), rp = d.gPadRadius ? d.gPadRadius : sqrt(r * r + R * R); sgp = rp * sin(sgp); egp = rp * sin(egp); const ca = sgp == 0 ? 0 : atan(sin(b - a) / (egp / sgp + cos(b - a))), gr = sgp == 0 ? egp / sin(b - a) : sgp / sin(ca); if (sgp != 0 || egp != 0) (d.cx += gr * sin(a + ca)), (d.cy -= gr * cos(a + ca)), (d.gcx = -d.cx), (d.gcy = -d.cy), (R -= gr); // console.log(d.text, a, ca, R, gr, r, rp, sgp, egp); // OuterSquare if (d.square) { if (d.centerRadius) R = R / cos(c); if (d.innerSide) { Rs = R * cos(c); R = Math.sqrt((d.innerSide * d.innerSide) / 4 + Rs * Rs); a = e - Math.atan(d.innerSide / 2 / Rs); b = e + Math.atan(d.innerSide / 2 / Rs); c = (b - a) / 2; } if (d.centerInnerR) r = r / cos(c); Rs = R * cos(c); rs = r * cos(c); } else { // Calculate angles when division is made const thetaDiv = (b - a) / div, thetaStart = a + (n - 1) * thetaDiv, thetaEnd = a + n * thetaDiv; a = thetaStart; b = thetaEnd; c = (b - a) / 2; e = (a + b) / 2; } // At the bottom ? e = modPi(e); const atBottom = e > pi / 2 && e < (3 * pi) / 2, atLeft = e > pi && e < 2 * pi; // Start drawing here const g = svg .append("g") .attr("class", "arcLabel") .attr("transform", `translate(${d.cx}, ${d.cy})`); // Gradient // //Append a defs (for definition) element to your SVG const defs = g.append("defs"); // //Append a radialGradient element to the defs and give it a unique id // const radialGradient = defs // .append("radialGradient") // .attr("id", "radial-gradient-" + d.gradientID) // .attr("cx", d.gradientX + "%") //The x-center of the gradient // .attr("cy", d.gradientY + "%") //The y-center of the gradient // .attr("r", d.gradientR + "%"); //The radius of the gradient // if (d.gradientFX) radialGradient.attr("fx", d.gradientFX + "%"); //The x-center of the gradient // if (d.gradientFY) radialGradient.attr("fy", d.gradientFY + "%"); //The x-center of the gradient // //Add colors to make the gradient // radialGradient // .append("stop") // .attr("offset", d.gradientI + "%") // .attr( // "stop-color", // d.invertGradient ? fading(d.color, d.fade) : "#FFFFFF" // ); // radialGradient // .append("stop") // .attr("offset", "100%") // .attr( // "stop-color", // d.invertGradient ? "#FFFFFF" : fading(d.color, d.fade) // ); //radialGradient.attr("circle at 10%"); // SQUARE SHAPE // // Square Calculation (y axis is inverted & angle start at the top !) const OA00x = R * sin(a), OA00y = R * -cos(a), OAddx = R * sin(b), OAddy = R * -cos(b), OB00x = (R + r) * sin(a), OB00y = (R + r) * -cos(a), OBddx = (R + r) * sin(b), OBddy = (R + r) * -cos(b); const OA0x = OA00x + (d.startRatio + d.padAngle + d.startPadRatio) * (OAddx - OA00x), OA0y = OA00y + (d.startRatio + d.padAngle + d.startPadRatio) * (OAddy - OA00y), OAdx = OA00x + (d.endRatio - d.padAngle - d.endPadRatio) * (OAddx - OA00x), OAdy = OA00y + (d.endRatio - d.padAngle - d.endPadRatio) * (OAddy - OA00y); const OA0xP = (R - polyPad) * sin(a), OA0yP = (R - polyPad) * cos(a), OAdxP = (R - polyPad) * sin(b), OAdyP = (R - polyPad) * cos(b); const OAix = (i) => (1 - i / div) * OA0x + (i / div) * OAdx, OAiy = (i) => (1 - i / div) * OA0y + (i / div) * OAdy, OAixP = (i) => (1 - i / div) * OA0xP + (i / div) * OAdxP, OAiyP = (i) => (1 - i / div) * OA0yP + (i / div) * OAdyP; const OB0tx = OA0x + OB00x - OA00x, OB0ty = OA0y + OB00y - OA00y, OB0txP = OA0xP + OB00x - OA00x, OB0tyP = OA0yP + OB00y - OA00y, OBdtx = OAdx + OBddx - OAddx, OBdty = OAdy + OBddy - OAddy; const OBix = (i) => (1 - i / div) * OB0tx + (i / div) * OBdtx, OBiy = (i) => (1 - i / div) * OB0ty + (i / div) * OBdty, A0B0x = (1 / 2) * (OB0tx - OA0x + OBdtx - OAdx), A0B0y = (1 / 2) * (OB0ty - OA0y + OBdty - OAdy), A0A1x = OAix(1) - OA0x, A0A1y = OAiy(1) - OA0y, px = (A0A1x * d.padSquare) / 100, py = (A0A1y * d.padSquare) / 100; if (d.square) { // Square Path g.append("path") .attr("display", d.square ? "" : "none") .attr( "d", //d3.line().curve(d3.curveCardinalClosed.tension(0.8))([ d3.line().curve(d3.curveLinearClosed)([ // first point n <= 1 ? [OAix(n - 1), OAiy(n - 1)] : [OAix(n - 1) + px, OAiy(n - 1) + py], // second start arrow point d.squareEnds || d.arrowStart ? [ OAix(n - 1) + (1 / 2) * A0B0x - (1 / 2) * A0B0y * (d.arrowStart ? 1 : 0) * d.arrowFactor + px * (n <= 1 ? 0 : 1), OAiy(n - 1) + (1 / 2) * A0B0y + (1 / 2) * A0B0x * (d.arrowStart ? 1 : 0) * d.arrowFactor + py * (n <= 1 ? 0 : 1) ] : n <= 1 // copy of first point ? [OAix(n - 1), OAiy(n - 1)] : [OAix(n - 1) + px, OAiy(n - 1) + py], // third point n <= 1 ? d.squareEnds || d.arrowStart ? [OAix(n - 1) + A0B0x, OAiy(n - 1) + A0B0y] : [OB0tx, OB0ty] : [OAix(n - 1) + A0B0x + px, OAiy(n - 1) + A0B0y + py], // fourth point n == div ? d.squareEnds || d.arrowEnd ? [OAix(n) + A0B0x, OAiy(n) + A0B0y] : [OBdtx, OBdty] : [OAix(n) + A0B0x - px, OAiy(n) + A0B0y - py], // fifth end arrow point d.squareEnds || d.arrowEnd ? [ OAix(n) + (1 / 2) * A0B0x - (1 / 2) * A0B0y * (d.arrowEnd ? 1 : 0) * d.arrowFactor - px * (n == div ? 0 : 1), OAiy(n) + (1 / 2) * A0B0y + (1 / 2) * A0B0x * (d.arrowEnd ? 1 : 0) * d.arrowFactor - py * (n == div ? 0 : 1) ] : n == div // copy of fourth point ? [OAix(n), OAiy(n)] : [OAix(n) - px, OAiy(n) - py], // sixth point n == div ? [OAix(n), OAiy(n)] : [OAix(n) - px, OAiy(n) - py] ]) ) .style("stroke", d.stokeColor ? d.strokeColor : d.color) .style("stroke-width", d.strokeWidth) .style("fill", fading(d.color, d.fade)) .style("fill-opacity", d.opacity) .clone() .lower() .style("fill", d.opaque ? "white" : "") .style("fill-opacity", d.opaque ? 1 : 0); } // fill polygone if ( d.polyId != d2.polyId || (index == ringParam.data.length - 1 && d.polyId) ) { if (index == ringParam.data.length - 1 && d.polyId) arrPoints.push([OAixP(1), OAiyP(1)]); // Gradient // //Append a radialGradient element to the defs and give it a unique id // const radialGradient = defs // .append("radialGradient") // .attr("id", "radial-gradient-" + d2.gradientID) // .attr("cx", d2.gradientX + "%") //The x-center of the gradient // .attr("cy", d2.gradientY + "%") //The y-center of the gradient // .attr("r", d2.gradientR + "%"); //The radius of the gradient // //Add colors to make the gradient // radialGradient // .append("stop") // .attr("offset", d2.gradientI + "%") // .attr("stop-color", d2.invertGradient ? d2.color : "#FFFFFF"); // radialGradient // .append("stop") // .attr("offset", "100%") // .attr("stop-color", d2.invertGradient ? "#FFFFFF" : d2.color); // background // .append("g") // .append("path") // .attr("transform", `translate(${d2.cx}, ${d2.cy}) rotate(180)`) // .attr("d", d3.line().curve(d3.curveLinearClosed)(arrPoints)) // .style("stroke", d2.color) // .style("stroke-width", d2.strokeWidth) // .style( // "fill", // d2.gradientID // ? "url(#radial-gradient-" + d2.gradientID + ")" // : fading(d2.color, d2.polyFade) // ) // .style("fill-opacity", d2.polyOpacity) // .clone() // .lower() // .style("fill", d2.polyOpaque ? "white" : "") // .style("fill-opacity", d2.polyOpaque ? 1 : 0); arrPoints = []; } // arrPoints.push([OB0txP, OB0tyP]); // outside of polygone arrPoints.push([OAixP(1), OAiyP(1)]); for (const p in d) { d2[p] = d[p]; } // Adding Center Text for polygone const centerText = g .append("text") .style("font-weight", d.bold) .style("fill", darken(d.color, d.darkenFactor)) //.style("fill", check.includes("outlineOnly") ? black : "white") .attr("font-family", d.fontName) .attr("font-size", d.fontSize); const titleLines = d.centerText.split("//"); if (titleLines.length == 1) // one line break centerText .text(d.centerText) .attr("text-anchor", "middle") .attr("dy", -d.up + "em"); if (titleLines.length == 2) // one line break centerText .text(titleLines[0]) .attr("text-anchor", "middle") .attr("dy", "-0.8" - d.up + "em") .clone(true) .text(titleLines[1]) .attr("dy", "0.6" - d.up + "em"); if (titleLines.length == 3) // two line breaks centerText .text(titleLines[0]) .attr("text-anchor", "middle") .attr("dy", -1.2 - d.up + "em") .clone(true) .text(titleLines[1]) .attr("dy", 0.1 - d.up + "em") .clone(true) .text(titleLines[2]) .attr("dy", 1.4 - d.up + "em"); // Function that split lines and add spacing const lines = d.text?.split("//"); const numberOfLines = lines?.length; const line = (d, n) => numberOfLines > 1 ? lines[n - 1].split("").join("\u200A".repeat(d.letterSpacing)) : d.text?.split("").join("\u200A".repeat(d.letterSpacing)); // Arc // // Arc (!square) cases where lines needs: // - flipping: radial && !atLeft // - reverse path: !radial && atBottom // - lower dy: !radial && atBottom if (!d.square) { g.append("path") .style( "stroke", d.strokeColor ? d.strokeFade ? fading(d.strokeColor, d.strokeFade) : d.strokeColor : d.strokeFade ? fading(d.color, d.strokeFade) : d.color ) .style("stroke-width", d.strokeWidth) // .style("fill", fading(d.color, d.fade)) .style( "fill", d.gradientID ? "url(#radial-gradient-" + d.gradientID + ")" : fading(d.color, d.fade) ) .style("fill-opacity", d.opacity) .attr( "d", d3 .arc() .innerRadius(R) .outerRadius(R + r) //.altCX(d.gcx) //.altCY(d.gcy) //.gR(gr) .padAngle(d.padAngle) // .startPadAngle(d.startPadAngle) // old custom // .endPadAngle(d.endPadAngle) .startAngle(a) .endAngle(b) .cornerRadius(d.cornerRadius) .padRadius(d.padRadius) ) .clone() .lower() .style("fill", d.opaque ? "white" : "") .style("fill-opacity", d.opaque ? 1 : 0); if (!d.radial) { // If Arc not radial // Adding Arc path for text g.append("path") .attr("id", id) .style("fill", "none") .attr("d", () => { const context = d3.path(); context.arc( 0, 0, R, (atBottom ? b : a) - pi / 2, (atBottom ? a : b) - pi / 2, atBottom ); return context.toString(); }); g.append("text") .style( "fill", d.opacity < d.opacityLimit || d.fade > d.fadeLimit ? darken(d.color, d.opacity * d.darkenFactor) : "white" ) .style("font-size", d.fontSize) .style("font-weight", d.bold ? d.bold : "normal") .attr("font-family", d.fontName) .attr("dy", (d.innerR / 2) * (atBottom ? +1 : -0.9)) .attr("dominant-baseline", "middle") .attr("text-anchor", "middle") .append("textPath") .attr("startOffset", "50%") .attr("xlink:href", "#" + id) .text(numberOfLines == 1 ? line(d, 1) : "") .select(function () { return this.parentNode; }) .clone() .attr( "dy", (d.innerR / 2) * (atBottom ? +0.7 + d.bottomAdjust : -1.3 + d.topAdjust) ) .append("textPath") .attr("startOffset", "50%") .attr("xlink:href", "#" + id) .text(numberOfLines > 1 ? line(d, 1) : "") .select(function () { return this.parentNode; }) .clone() .attr( "dy", (d.innerR / 2) * (atBottom ? +1.5 + d.topAdjust : -0.55 + d.bottomAdjust) ) .append("textPath") .attr("startOffset", "50%") .attr("xlink:href", "#" + id) .text(numberOfLines > 1 ? line(d, 2) : ""); } } // Square Style or Radial if (d.radial || d.square) { function labelTransform(d, twoLines = 0) { // 0 middle, 1 up, 2 down // For arc radial transform const f = modPi(e - pi / 2); // clockwise from base const df = c / 3; const f2 = twoLines == 0 // Middle Line ? f : twoLines == 1 // Top Line ? d.flipLines ^ !atLeft ^ atBottom ^ (atBottom && !atLeft) // sorry for that but I have no time to think about it, it works ? f + df : f - df : d.flipLines ^ !atLeft ^ atBottom ^ (atBottom && !atLeft) // Bottom Line ? f - df : f + df; // For square transformations const cornerX = OAix(n - 1); const cornerY = OAiy(n - 1); const halfWayX = d.radial ? twoLines == 0 // Middle line ? (OAix(1) - OAix(0)) / 2 : twoLines == 1 // Top Line ? ((OAix(1) - OAix(0)) * 4) / 6 : ((OAix(1) - OAix(0)) * 2) / 6 : (OAix(1) - OAix(0)) / 2; const halfWayY = d.radial ? twoLines == 0 ? (OAiy(1) - OAiy(0)) / 2 : twoLines == 1 ? ((OAiy(1) - OAiy(0)) * 4) / 6 : ((OAiy(1) - OAiy(0)) * 2) / 6 : (OAiy(1) - OAiy(0)) / 2; const heightLineX = d.radial ? A0B0x / 2 : twoLines == 0 // Middle line ? A0B0x / (atBottom ? 1.8 : 2.2) : twoLines == 1 // Top Line ? (A0B0x * 4) / 6 : (A0B0x * 2) / 6; // Bottom Line const heightLineY = d.radial ? A0B0y / 2 : twoLines == 0 ? A0B0y / (atBottom ? 1.8 : 2.2) : twoLines == 1 ? (A0B0y * 4) / 6 : (A0B0y * 2) / 6; return d.square ? `translate(${cornerX + halfWayX + heightLineX}, ${cornerY + halfWayY + heightLineY} ) rotate( ${ rTD(f) + (d.flipLetters ? 180 : 0) + (d.radial ? 0 : 90) + (atBottom ? 180 : 0) + (atLeft && d.radial ? 180 : 0) } )` : `rotate(${rTD(f2)}) translate(${R + r / 2},0) rotate(${ (d.flipLetters ? 180 : 0) + atLeft ? 180 : 0 // arc radial })`; } const topLine = !d.flipLines ^ (!d.radial && atBottom) ^ (d.radial && !atLeft); // square cases where needs flipping // square && !radial && atBottom // square && radial && !atLeft g.append("text") .style( "fill", d.opacity < d.opacityLimit || d.fade > d.fadeLimit ? darken(d.color, d.opacity * d.darkenFactor) : "white" ) .style("font-size", d.fontSize) .style("font-weight", d.bold ? d.bold : "normal") .attr("font-family", d.fontName) .attr("dominant-baseline", "middle") .attr("text-anchor", "middle") .text(line(d, topLine ? 1 : 2)) .attr( "transform", numberOfLines > 1 ? labelTransform(d, 1) : labelTransform(d, 0) ) .clone() .text(numberOfLines > 1 ? line(d, topLine ? 2 : 1) : "") .attr("transform", labelTransform(d, 2)); } }); const svgRing = svg.node().innerHTML; svgOrigin.append("g").html(svgRing); }34:T7a1,// Function that give a scale of # (colorNum) according to rainbow. It can rotate the array, shuffle them with a seed or darken // shuffleSeed = require("https://bundle.run/shuffle-seed@1.1.6") colorFunc = (colorNum, rotateNum = 0, seed = false, dark = false) => { function darken(color, k = 1) { const { l, c, h } = d3.lch(color); return d3.lch(l - 30 * k, c, h); } const rotate = (arr, d) => { for (let i = d; i < arr.length; i++) arr.unshift(arr.pop()); return arr; }; const colors = rotate( d3.quantize(d3.interpolateRainbow, colorNum + 1).slice(0, -1), rotateNum ); const colorsDark = colors.map((color) => darken(color, dark).toString()); const colorsCopy = JSON.parse(JSON.stringify(colors)); const colorsCopyDark = JSON.parse(JSON.stringify(colorsDark)); // const shuffeledColors = colorsCopy.sort(() => { // old methode doesn't required shuffleSeed // const randomTrueOrFalse = Math.random() > 0.5; // return randomTrueOrFalse ? 1 : -1; // }); // return shuffeled ? d3.scaleOrdinal(shuffeledColors) : d3.scaleOrdinal(colors); // if (seed != false) { // if (dark == false) { // return d3.scaleOrdinal(shuffleSeed.shuffle(colorsCopyDark, seed)); // } else { // return d3.scaleOrdinal(shuffleSeed.shuffle(colorsCopy, seed)); // } // } else { // if (dark != false) { // return d3.scaleOrdinal(colorsDark); // } else { // return d3.scaleOrdinal(colors); // } // } if (dark != false) { // either true or is a number if (seed != false) { // either true or is a number return d3.scaleOrdinal(shuffleSeed.shuffle(colorsCopyDark, seed)); } else { // return d3.scaleOrdinal(colorsCopyDark); } } else { if (seed != false) { // either true or is a number return d3.scaleOrdinal(shuffleSeed.shuffle(colorsCopy, seed)); } else { return d3.scaleOrdinal(colors); } } }35:[{"id":"699eb84f511adab5942830483a9d2896faa7b7329ae609077d596b4aef6d102420394e4b4c9989c9f1938c4744e6d2b23e401dd4a3b817afab39d5b1edf6fa75","href":"https://static.observableusercontent.com/files/699eb84f511adab5942830483a9d2896faa7b7329ae609077d596b4aef6d102420394e4b4c9989c9f1938c4744e6d2b23e401dd4a3b817afab39d5b1edf6fa75","name":"untitled.json","type":"application/json","lastModified":1735468155654.046,"size":4179},{"id":"537f2f60b6b16fb0c7750baab4359d3bca54cb5945781d4213d6feb1c4fce2046d029ee831ca3028a702b9a2a74ad3660fd6e81979745e5454b4b551c386d978","href":"https://static.observableusercontent.com/files/537f2f60b6b16fb0c7750baab4359d3bca54cb5945781d4213d6feb1c4fce2046d029ee831ca3028a702b9a2a74ad3660fd6e81979745e5454b4b551c386d978","name":"untitled (1).json","type":"application/json","lastModified":1735468155654.046,"size":4191},{"id":"ed8a661fce55fc7fd1adb3526f759699e0ef8a459289f427a4e120dabeec89076200a7d996f74b5c32562545023e5ae252f5569feed602357e376f83309e2327","href":"https://static.observableusercontent.com/files/ed8a661fce55fc7fd1adb3526f759699e0ef8a459289f427a4e120dabeec89076200a7d996f74b5c32562545023e5ae252f5569feed602357e376f83309e2327","name":"untitled (2).json","type":"application/json","lastModified":1735468155654.046,"size":4233},{"id":"9d4829fab7f8e4f750080be70b39cdc329c5cfa60204ce827616be81e159c5eeea1a96a5477aa77f0e0d3d5f64ebf796160cd635c2388eb629ec4e465599f76c","href":"https://static.observableusercontent.com/files/9d4829fab7f8e4f750080be70b39cdc329c5cfa60204ce827616be81e159c5eeea1a96a5477aa77f0e0d3d5f64ebf796160cd635c2388eb629ec4e465599f76c","name":"links2@1.json","type":"application/json","lastModified":1735468155654.046,"size":75861},{"id":"722c5ad3f39f99f5a5cc29cafd79b0a190e6092e1dd0eb34d13def8adfa1832f6e156d4055eb8e1eb15443011398c9dcad79a51b56301a8c987b4f8962f87c27","href":"https://static.observableusercontent.com/files/722c5ad3f39f99f5a5cc29cafd79b0a190e6092e1dd0eb34d13def8adfa1832f6e156d4055eb8e1eb15443011398c9dcad79a51b56301a8c987b4f8962f87c27","name":"cover.jpg","type":"image/jpeg","lastModified":1735468155654.046,"size":53910},{"id":"e0cc6a4d543df42a274d0583957df6a9642813b299a7b50b3a743d879a8650f852a10c595d5cea3cce7a3d041fcaf54d9e1d4700bacc87ad4f15c7a089d30cdf","href":"https://static.observableusercontent.com/files/e0cc6a4d543df42a274d0583957df6a9642813b299a7b50b3a743d879a8650f852a10c595d5cea3cce7a3d041fcaf54d9e1d4700bacc87ad4f15c7a089d30cdf","name":"removed_edges.json","type":"application/json","lastModified":1735468155654.046,"size":35207},{"id":"720ab1aab59d3eedb7d65143746519242626c2fb6462c75334d2b59a37c1a951dbf64cbcff88b9a462e59bc0bb26dacd3567a7ac9615ce4f5b17856e4aff4c15","href":"https://static.observableusercontent.com/files/720ab1aab59d3eedb7d65143746519242626c2fb6462c75334d2b59a37c1a951dbf64cbcff88b9a462e59bc0bb26dacd3567a7ac9615ce4f5b17856e4aff4c15","name":"communities.json","type":"application/json","lastModified":1735468155654.046,"size":18605}] 2d:{"title":"The Illustrated Manual of Buddhist Terms and Doctrines (IMBTD) with Categories","cells":[{"id":0,"value":"# The Illustrated Manual of Buddhist Terms and Doctrines (IMBTD) with Categories\n\nThe goal of this project is to explore the graph created by mapping the links and references of the book: **Buddhist Dictionary: A Manual of Buddhist Terms and Doctrines**\nBy Nyanatiloka Thera\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":425,"value":"cover = FileAttachment(\"cover.jpg\").image({ width: 300 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":430,"value":"# References\n\n## PDF\n\n- [Buddhist Library PDF](https://www.buddhistelibrary.org/buddhism-online/e-books/palidictionary.pdf)\n- [Buddhist University PDF](https://buddhistuniversity.net/content/reference/buddhist-dictionary_nyanatiloka)\n\n## Online Version\n\n- [Pali Kanon](https://www.palikanon.com/english/wtb/dic_idx.html)\n\n## Bonus\n\nThe Illustrated History of Buddhism\nBy Ashin Janaka Bhivamsa (Aggamahapandita)\n\nArtist: U Ba Kyi\n\n- [Saraniya Website](https://saraniya.com/buddhism/buddhist-stories/the-illustrated-history-of-buddhism/)\n\n# Chart\n \nThe chart below explore the connections of the differents entries in the dictionnary. The text size is according to the number of entries the entry quotes or get quoted. The structure is revealed via the Hierarchical Edge Bundles for General Graphs Methode explained below. ","pinned":false,"hidden":false,"mode":"md"},{"id":218,"value":"viewof blackWhite = Inputs.toggle({ label: \"blackWhite\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":224,"value":"viewof darkMode = Inputs.toggle({ label: \"darkMode\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"viewof structure = Inputs.toggle({ label: \"Show Structure\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"viewof edge = Inputs.toggle({ label: \"Show Edges\", value: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"viewof colorNumber = Inputs.range([0, 15], {\n label: \"colorNumber\",\n step: 1,\n value: 9\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"viewof colorSeed = Inputs.range([0, 100], {\n label: \"colorSeed\",\n step: 1,\n value: darkMode ? 0 : 0\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"viewof colorRotation = Inputs.range([0, 10], {\n label: \"colorRotation\",\n step: 1,\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"viewof darkenFactor = Inputs.range([0, 3], {\n label: \"darkenFactorNode\",\n step: 0.1,\n value: darkMode ? 0 : 1.2 // 1.4\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"viewof LighenFactor = Inputs.range([0, 3], {\n label: \"LightenFactorEdge\",\n step: 0.1,\n value: darkMode ? 0 : 0.3\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":228,"value":"viewof colorDepth = Inputs.range([0, 3], {\n label: \"colorDepth\",\n step: 1,\n value: 2\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":570,"value":"viewof beta = Inputs.range([0.6, 1.2], {\n label: \"beta curve\",\n step: 0.05,\n value: 0.95 // 0.85 default, 0.9 looks good as well\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":388,"value":"viewof PNGprecision = Inputs.range([1, 12], {\n label: \"PNG resolution factor\",\n step: 1,\n value: 3\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":404,"value":"DOM.download(() => rasterizeWhite(chart), undefined, \"Save as PNG\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"DOM.download(() => serialize(chart), undefined, \"Save as SVG\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":414,"value":"# Processus Outline\n\n## Data Scraping\n\nThe online version above already contains all the main entries of the dictionnary as individual web page. We can collect all the from that website and build a network of relationship. \n\n### Making a local Copy\n\n\n\nWith httrack or wget we get a local copy of the website. You will need a local http-server to preview correctly the local site if you want to.\n\n## Mapping Nodes and Links\n\nUsing the following **node** script, we can extract the data from the website and get a json\n","pinned":false,"hidden":false,"mode":"md"},{"id":461,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"links = FileAttachment(\"links2@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":520,"value":"From there, there are multiple ways to represent and analyse the network. We will follow a graph visualization approach that extracts the community structure of a network and organizes it into a more balanced and meaningful hierarchy so that its edge bundle rendering better indicates its structure from [_Yuntao Jia, Michael Garland, J. Hart_](https://www.semanticscholar.org/paper/Hierarchical-Edge-Bundles-for-General-Graphs-Jia-Garland/31f3ae917eaf2c1562274356cf7759d6a547cb69) \n\n## Hierarchical Edge Bundles for General Graphs\n\nin 2009, researchers have develop a [technique](https://www.semanticscholar.org/paper/Hierarchical-Edge-Bundles-for-General-Graphs-Jia-Garland/31f3ae917eaf2c1562274356cf7759d6a547cb69) to vizualise a graph of relationships by generating a hierarchy between the nodes and then using the well known Edge Bundling technic in a radial graph. We need first to break down the main network into subgraph with the **python** code below\n","pinned":false,"hidden":false,"mode":"md"},{"id":536,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"communitiesData = FileAttachment(\"communities.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"removed_edges = FileAttachment(\"removed_edges.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"### Create D3 hierarchies","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"communitiesH = communitiesData.map((com) =>\n d3.hierarchy({\n name: com.parent,\n children: com.children.map((value) => ({ name: value }))\n })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"### Merging Communities\n\nOnce we have everything, we can merge the communities into a giant structure with D3","pinned":false,"hidden":false,"mode":"md"},{"id":27,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":581,"value":"## Extract community name list","pinned":false,"hidden":false,"mode":"md"},{"id":583,"value":"function groupLeavesAtDepth(hierarchy, depth) {\n // Helper function to collect leaves for a node\n function collectLeaves(node) {\n return node\n .leaves()\n .map((leaf) => links.find((node) => node.file == leaf.data.name).title);\n }\n\n // Traverse the hierarchy and stop at the specified depth\n const result = [];\n hierarchy.each((node) => {\n if (node.depth === depth && node.children) {\n result.push(collectLeaves(node));\n }\n });\n\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":588,"value":"atLevel2 = groupLeavesAtDepth(hierarchie, 2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":610,"value":"With this function, we can create list of the names at different root division and ask Chat GPT to come up with categories","pinned":false,"hidden":false,"mode":"md"},{"id":598,"value":"level1 = FileAttachment(\"untitled.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":599,"value":"level2 = FileAttachment(\"untitled (1).json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":600,"value":"level3 = FileAttachment(\"untitled (2).json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":745,"value":"level313 = level3.slice(20, 30)","pinned":false,"hidden":false,"mode":"ojs"},{"id":649,"value":"paliCategories = [\n \"Virtues and Spiritual Development\",\n \"Meditation and Ethical Conduct\",\n \"Liberation and Higher Realizations\",\n \"Mental and Meditative Processes\",\n \"Aggregates and Dependent Origination\",\n \"Defilements and Stages of Enlightenment\",\n \"Doctrinal Classifications and Cosmic Concepts\",\n \"Insight Knowledge and Meditative Progress\",\n \"Realms of Existence and Beings\"\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":754,"value":"categories = [\n \"Powers\",\n \"Enlightenment Factors\",\n \"Mindfulness and Ethics\",\n \"Path and Wisdom\",\n \"Concentration and Meditation\",\n \"Reflections and Virtues\",\n \"Meditative Objects\",\n \"Liberation States\",\n \"Wisdom and Liberation\",\n \"Mental Factors and Stream-entry\",\n \"Bases of Power\",\n \"Mental Processes\",\n \"Happiness and Concentration\",\n \"Dependent Origination and Kamma\",\n \"Equanimity and Aggregates\",\n \"Elements and Sense Bases\",\n \"Defilements and Path Qualities\",\n \"Cravings and Hindrances\",\n \"Skillful Actions\",\n \"Views and Rebirth\",\n \"Defilements and Mental Corruptions\",\n \"Beings and Samsaric Cycle\",\n \"Knowledge and Insight\",\n \"Liberation and Purification\",\n \"Jhana and Mental Processes\",\n \"Functions of Consciousness\",\n \"Teachings and Practice\",\n \"Non-returners and Realms\",\n \"States of Existence\",\n \"Lower Realms and Destinations\"\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":563,"value":"### Other Usefull things","pinned":false,"hidden":false,"mode":"md"},{"id":616,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"color = (t) => d3.interpolateRdBu(1 - t)","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"line = d3\n .lineRadial()\n .curve(d3.curveBundle.beta(beta))\n .radius((d) => d.y)\n .angle((d) => d.x)","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"function path([source, target]) {\n const p = new Path();\n line.context(p)(source.path(target));\n return p;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"class Path {\n constructor(_) {\n this._ = _;\n this._m = undefined;\n }\n moveTo(x, y) {\n this._ = [];\n this._m = [x, y];\n }\n lineTo(x, y) {\n this._.push(new Line(this._m, (this._m = [x, y])));\n }\n bezierCurveTo(ax, ay, bx, by, x, y) {\n this._.push(\n new BezierCurve(this._m, [ax, ay], [bx, by], (this._m = [x, y]))\n );\n }\n *split(k = 0) {\n const n = this._.length;\n const i = Math.floor(n / 2);\n const j = Math.ceil(n / 2);\n const a = new Path(this._.slice(0, i));\n const b = new Path(this._.slice(j));\n if (i !== j) {\n const [ab, ba] = this._[i].split();\n a._.push(ab);\n b._.unshift(ba);\n }\n if (k > 1) {\n yield* a.split(k - 1);\n yield* b.split(k - 1);\n } else {\n yield a;\n yield b;\n }\n }\n toString() {\n return this._.join(\"\");\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"class Line {\n constructor(a, b) {\n this.a = a;\n this.b = b;\n }\n split() {\n const { a, b } = this;\n const m = [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2];\n return [new Line(a, m), new Line(m, b)];\n }\n toString() {\n return `M${this.a}L${this.b}`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"BezierCurve = {\n const l1 = [4 / 8, 4 / 8, 0 / 8, 0 / 8];\n const l2 = [2 / 8, 4 / 8, 2 / 8, 0 / 8];\n const l3 = [1 / 8, 3 / 8, 3 / 8, 1 / 8];\n const r1 = [0 / 8, 2 / 8, 4 / 8, 2 / 8];\n const r2 = [0 / 8, 0 / 8, 4 / 8, 4 / 8];\n\n function dot([ka, kb, kc, kd], { a, b, c, d }) {\n return [\n ka * a[0] + kb * b[0] + kc * c[0] + kd * d[0],\n ka * a[1] + kb * b[1] + kc * c[1] + kd * d[1]\n ];\n }\n\n return class BezierCurve {\n constructor(a, b, c, d) {\n this.a = a;\n this.b = b;\n this.c = c;\n this.d = d;\n }\n split() {\n const m = dot(l3, this);\n return [\n new BezierCurve(this.a, dot(l1, this), dot(l2, this), m),\n new BezierCurve(m, dot(r1, this), dot(r2, this), this.d)\n ];\n }\n toString() {\n return `M${this.a}C${this.b},${this.c},${this.d}`;\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"shuffleSeed = require(\"https://bundle.run/shuffle-seed@1.1.6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"darken = (color, k = 1) => {\n const { l, c, h } = d3.lch(color);\n return d3.lch(l - 30 * k, c, h);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"lighten = (color, k = 1) => {\n const { l, c, h } = d3.lch(color);\n return d3.lch(l + 30 * k, c, h);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"import { serialize } from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":390,"value":"function rasterizeWhite(svg) {\n let resolve, reject;\n const promise = new Promise((y, n) => ((resolve = y), (reject = n)));\n const image = new Image();\n image.onerror = reject;\n image.onload = () => {\n const rect = svg.getBoundingClientRect();\n const context = DOM.context2d(\n rect.width * PNGprecision,\n rect.height * PNGprecision\n );\n context.fillStyle = \"white\";\n context.fillRect(\n 0,\n 0,\n rect.width * PNGprecision,\n rect.height * PNGprecision\n );\n context.drawImage(\n image,\n 0,\n 0,\n rect.width * PNGprecision,\n rect.height * PNGprecision\n );\n context.canvas.toBlob(resolve, \"image/png\", 1);\n };\n image.src = URL.createObjectURL(serialize(svg));\n return promise;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":400,"value":"function rasterize(svg) {\n let resolve, reject;\n const promise = new Promise((y, n) => ((resolve = y), (reject = n)));\n const image = new Image();\n image.onerror = reject;\n image.onload = () => {\n const rect = svg.getBoundingClientRect();\n const context = DOM.context2d(\n rect.width * PNGprecision,\n rect.height * PNGprecision\n );\n context.drawImage(\n image,\n 0,\n 0,\n rect.width * PNGprecision,\n rect.height * PNGprecision\n );\n context.canvas.toBlob(resolve, \"image/png\", 1);\n };\n image.src = URL.createObjectURL(serialize(svg));\n return promise;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":559,"value":"","pinned":true,"hidden":false,"mode":"html"}],"files":"$W35","stdlib":"1","titling":"auto"}