2f:T2fb9,chart = { const scale = 1.03; const scaleWord = 1.8; 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 margin = 80; 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 - 137; links.forEach((d) => { if (d.title == "Akusala-sādhārana-cetasika") d.title = "Akusala-sādhārana-c."; if (d.title == "Vutthāna-gāminī-vipassanā") d.title = "Vutthāna-gāminī-v."; }); // 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.52; // 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 - margin / 2, -cy * scale - margin / 2, width * scale + margin, height * scale + margin ]) .attr( "style", `width: 100%; height: auto; font: 10px sans-serif; background-color: ${ darkMode ? "black" : "white" };` ); // if (darkMode) svg .append("rect") .attr("x", -width / 2 - margin) .attr("y", -height / 2 - margin) .attr("width", width + 2 * margin) .attr("height", height + 2 * margin) .attr("fill", darkMode ? "black" : "white") .attr("stroke", darkMode ? "black" : "white"); // 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) // 9.5 + 0.05 * d.degree) .attr("font-size", (d) => 9.5 + 0.05 * d.degree) .attr("font-size", (d) => d.data.name == "bodhipakkhiya_dh.htm" ? 10 : 9.5 + 0.1 * 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", "normal") .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, arrayTopAdjust, arrayBottomAdjust ) => { 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, topAdjust: arrayTopAdjust && arrayTopAdjust[i], bottomAdjust: arrayBottomAdjust && arrayBottomAdjust[i] }; }); 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 }); }; drawRing(g, { fontSize: 20, r: 778, innerR: 20, opacity: 0, opaque: false, strokeWidth: 0, color: darkMode ? d3.color("steelblue").brighter(0.5) : d3.color("steelblue").darker(1), data: [ { text: " BUDDHIST DICTIONARY: A MANUAL OF BUDDHIST TERMS AND DOCTRINES", // text: "THE ILLUSTRATED MANUAL OF BUDDHIST TERMS AND DOCTRINES", //"The Illustrated Manual of Buddhist Terms and Doctrines", // Buddhist Dictionary: A Manual of Buddhist Terms and Doctrines By Nyanatiloka Thera // BUDDHIST DICTIONARY: A MANUAL OF BUDDHIST TERMS AND DOCTRINES startAngle: -90, endAngle: 90, letterSpacing: 5 } ] }); drawRing(g, { fontSize: 20, r: 778, innerR: 20, opacity: 0, opaque: false, strokeWidth: 0, color: darkMode ? d3.color("steelblue").brighter(0.5) : d3.color("steelblue").darker(1), data: [ { text: "By Nyanatiloka Thera", // text: "THE ILLUSTRATED MANUAL OF BUDDHIST TERMS AND DOCTRINES", //"The Illustrated Manual of Buddhist Terms and Doctrines", // Buddhist Dictionary: A Manual of Buddhist Terms and Doctrines By Nyanatiloka Thera // BUDDHIST DICTIONARY: A MANUAL OF BUDDHIST TERMS AND DOCTRINES startAngle: 90, endAngle: 270, letterSpacing: 2 } ] }); drawRingAround(2, 618, 150, 10, 0.9, false, true, undefined); drawRingAround( 2, 743, 30, 12, 0.9, true, false, undefined, paliCategories, paliCategoriesAdjustTop, paliCategoriesAdjustBottom ); drawRingAround(3, 621, 125, 10, 0.6, false, true, 3); drawRingAround( 3, 724, 30, 8, 0.7, true, false, 3, categories, categoriesAdjustTop, categoriesAdjustBottom ); ////////////////////////////////////////////////////// Start of License /////////////////////////////////////////////// const fontName = "Poppins"; GFontToDataURI( "https://fonts.googleapis.com/css2?family=Poppins&display=swap" ) .then((cssRules) => { let fontRules = cssRules.join("\n"); d3.select("svg") .append("defs") .append("style") .attr("type", "text/css") .text(fontRules); console.log("Added Font"); }) .catch((reason) => console.log(reason)); // svg // .append("svg:image") // .attr("x", xLicense - 55) // .attr("y", yLicense - 43) // .attr("width", 55) // // .attr("height", 31) // .attr( // "xlink:href", // // "https://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg" // "https://mirrors.creativecommons.org/presskit/buttons/88x31/svg/by-nc.svg" // // await FileAttachment("88x31-1.png").url() // ) // .attr("opacity", 0.75); svg .append("g") .attr("transform", ` translate(${790 - 70}, ${790 - 46}) scale(0.8)`) //.attr("fill", "#828282") .attr("opacity", 0.75) .style("filter", darkMode ? "invert(1)" : "none") .html(logo); const text = svg .append("text") .attr("x", 790) .attr("y", 790) .style("font-weight", "bold") .style("fill", "#828282") .attr("font-family", fontName) .attr("font-size", 9) .text("DhammaCharts.org") .attr("text-anchor", "end") .attr("dy", "-1.1em") .clone(true) .text("PaliKanon.com") .attr("dy", "0.25em"); ////////////////////////////////////////////////////// End of License /////////////////////////////////////////////// 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:T414,categoriesClaude = [ "Spiritual Powers & Mental Faculties", "Faith & Enlightenment Factors", "Mindfulness & Noble Truths", "Ethical Conduct & Universal Characteristics", "Meditation & Body Contemplation", "Virtuous Practices & Triple Gem", "Meditation Objects & Spheres", "Liberation & Mental Freedom", "Wisdom & Mental Release", "Mental Factors & Stream-entry", "Spiritual Powers & Investigation", "Mental Formations & Breath", "Happiness & Concentration", "Karma & Dependent Origination", "Feelings & Aggregates", "Sense Bases & Physical Elements", "Spiritual Practitioners & Training Stages", "Mental Defilements & Hindrances", "Wholesome Actions & Roots", "Views & Rebirth", "Unwholesome Mental States", "Self & Ultimate Reality", "Knowledge & Purification", "Supramundane & Insight Knowledge", "Absorption & Consciousness", "Mind Moments & Mental Processes", "Practice & Progress", "Higher Realms & Non-returners", "Planes of Existence & Deities", "Lower Realms & Destinations" ]34: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); }35: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); } } }36:Tb0d,function rasterizeWhite(svg) { let resolve, reject; const promise = new Promise((y, n) => ((resolve = y), (reject = n))); const image = new Image(); image.onerror = reject; image.onload = () => { const rect = svg.getBoundingClientRect(); const width = rect.width * PNGprecision; const height = rect.height * PNGprecision; // Debugging: Log the image size and resolution console.log("SVG Dimensions:", rect); console.log("PNG Precision:", PNGprecision); console.log("Generated Image Size:", width, "x", height); // Get WebGL max texture size (which often limits canvas size) const canvasTest = document.createElement("canvas"); const gl = canvasTest.getContext("webgl") || canvasTest.getContext("experimental-webgl"); const maxTextureSize = gl ? gl.getParameter(gl.MAX_TEXTURE_SIZE) : "Unavailable"; console.log("Max WebGL Texture Size:", maxTextureSize); // Check estimated available memory (only works in Chromium-based browsers) if (performance.memory) { console.log( "Total JS Heap Size (MB):", (performance.memory.totalJSHeapSize / 1024 / 1024).toFixed(2) ); console.log( "Used JS Heap Size (MB):", (performance.memory.usedJSHeapSize / 1024 / 1024).toFixed(2) ); console.log( "JS Heap Limit (MB):", (performance.memory.jsHeapSizeLimit / 1024 / 1024).toFixed(2) ); } else { console.log("performance.memory API not available"); } // Memory usage estimation (approximated) const estimatedMemory = (width * height * 4) / 1024 / 1024; // in MB console.log("Estimated memory usage (MB):", estimatedMemory); // Warn if approaching browser limits if ( maxTextureSize !== "Unavailable" && (width > maxTextureSize || height > maxTextureSize) ) { console.warn( `⚠️ Warning: Canvas size (${width}x${height}) exceeds max WebGL texture size (${maxTextureSize}).` ); } const context = DOM.context2d(width, height, 1); context.canvas.width = width; // Prevent automatic scaling context.canvas.height = height; context.fillStyle = "white"; context.fillRect(0, 0, width, height); context.drawImage(image, 0, 0, width, height); console.log( "Canvas Size:", context.canvas.width, "x", context.canvas.height ); context.canvas.toDataURL("image/png", 1); // Output the image as a data URL // Log the result (optional) const dataURL = context.canvas.toDataURL("image/png", 1); console.log("Generated Image Data URL:", dataURL.substring(0, 100)); // Log first 100 chars for quick check context.canvas.toBlob(resolve, "image/png", 1); }; image.src = URL.createObjectURL(serialize(svg)); return promise; }37:Ta4f,// from https://stackoverflow.com/questions/63288390/font-style-of-text-in-svg-not-propagating-to-png-on-download /* Only tested on a really limited set of fonts, can very well not work This should be taken as an proof of concept rather than a solid script. @Params : an url pointing to an embed Google Font stylesheet @Returns : a Promise, fulfiled with all the cssRules converted to dataURI as an Array */ function GFontToDataURI(url) { return fetch(url) // first fecth the embed stylesheet page .then((resp) => resp.text()) // we only need the text of it .then((text) => { // now we need to parse the CSSruleSets contained // but chrome doesn't support styleSheets in DOMParsed docs... let s = document.createElement("style"); s.innerHTML = text; document.head.appendChild(s); let styleSheet = s.sheet; // this will help us to keep track of the rules and the original urls let FontRule = (rule) => { let src = rule.style.getPropertyValue("src") || rule.style.cssText.match(/url$.*?$/g)[0]; if (!src) return null; let url = src.split("url(")[1].split(")")[0]; return { rule: rule, src: src, url: url.replace(/\"/g, "") }; }; let fontRules = [], fontProms = []; // iterate through all the cssRules of the embedded doc // Edge doesn't make CSSRuleList enumerable... for (let i = 0; i < styleSheet.cssRules.length; i++) { let r = styleSheet.cssRules[i]; let fR = FontRule(r); if (!fR) { continue; } fontRules.push(fR); fontProms.push( fetch(fR.url) // fetch the actual font-file (.woff) .then((resp) => resp.blob()) .then((blob) => { return new Promise((resolve) => { // we have to return it as a dataURI // because for whatever reason, // browser are afraid of blobURI in too... let f = new FileReader(); f.onload = (e) => resolve(f.result); f.readAsDataURL(blob); }); }) .then((dataURL) => { // now that we have our dataURI version, // we can replace the original URI with it // and we return the full rule's cssText return fR.rule.cssText.replace(fR.url, dataURL); }) ); } document.head.removeChild(s); // clean up return Promise.all(fontProms); // wait for all this has been done }); }38:[{"id":"699eb84f511adab5942830483a9d2896faa7b7329ae609077d596b4aef6d102420394e4b4c9989c9f1938c4744e6d2b23e401dd4a3b817afab39d5b1edf6fa75","href":"https://static.observableusercontent.com/files/699eb84f511adab5942830483a9d2896faa7b7329ae609077d596b4aef6d102420394e4b4c9989c9f1938c4744e6d2b23e401dd4a3b817afab39d5b1edf6fa75","name":"untitled.json","type":"application/json","lastModified":1735807575426.713,"size":4179},{"id":"537f2f60b6b16fb0c7750baab4359d3bca54cb5945781d4213d6feb1c4fce2046d029ee831ca3028a702b9a2a74ad3660fd6e81979745e5454b4b551c386d978","href":"https://static.observableusercontent.com/files/537f2f60b6b16fb0c7750baab4359d3bca54cb5945781d4213d6feb1c4fce2046d029ee831ca3028a702b9a2a74ad3660fd6e81979745e5454b4b551c386d978","name":"untitled (1).json","type":"application/json","lastModified":1735807575426.713,"size":4191},{"id":"ed8a661fce55fc7fd1adb3526f759699e0ef8a459289f427a4e120dabeec89076200a7d996f74b5c32562545023e5ae252f5569feed602357e376f83309e2327","href":"https://static.observableusercontent.com/files/ed8a661fce55fc7fd1adb3526f759699e0ef8a459289f427a4e120dabeec89076200a7d996f74b5c32562545023e5ae252f5569feed602357e376f83309e2327","name":"untitled (2).json","type":"application/json","lastModified":1735807575426.713,"size":4233},{"id":"9d4829fab7f8e4f750080be70b39cdc329c5cfa60204ce827616be81e159c5eeea1a96a5477aa77f0e0d3d5f64ebf796160cd635c2388eb629ec4e465599f76c","href":"https://static.observableusercontent.com/files/9d4829fab7f8e4f750080be70b39cdc329c5cfa60204ce827616be81e159c5eeea1a96a5477aa77f0e0d3d5f64ebf796160cd635c2388eb629ec4e465599f76c","name":"links2@1.json","type":"application/json","lastModified":1735807575426.713,"size":75861},{"id":"722c5ad3f39f99f5a5cc29cafd79b0a190e6092e1dd0eb34d13def8adfa1832f6e156d4055eb8e1eb15443011398c9dcad79a51b56301a8c987b4f8962f87c27","href":"https://static.observableusercontent.com/files/722c5ad3f39f99f5a5cc29cafd79b0a190e6092e1dd0eb34d13def8adfa1832f6e156d4055eb8e1eb15443011398c9dcad79a51b56301a8c987b4f8962f87c27","name":"cover.jpg","type":"image/jpeg","lastModified":1735807575426.713,"size":53910},{"id":"e0cc6a4d543df42a274d0583957df6a9642813b299a7b50b3a743d879a8650f852a10c595d5cea3cce7a3d041fcaf54d9e1d4700bacc87ad4f15c7a089d30cdf","href":"https://static.observableusercontent.com/files/e0cc6a4d543df42a274d0583957df6a9642813b299a7b50b3a743d879a8650f852a10c595d5cea3cce7a3d041fcaf54d9e1d4700bacc87ad4f15c7a089d30cdf","name":"removed_edges.json","type":"application/json","lastModified":1735807575426.713,"size":35207},{"id":"720ab1aab59d3eedb7d65143746519242626c2fb6462c75334d2b59a37c1a951dbf64cbcff88b9a462e59bc0bb26dacd3567a7ac9615ce4f5b17856e4aff4c15","href":"https://static.observableusercontent.com/files/720ab1aab59d3eedb7d65143746519242626c2fb6462c75334d2b59a37c1a951dbf64cbcff88b9a462e59bc0bb26dacd3567a7ac9615ce4f5b17856e4aff4c15","name":"communities.json","type":"application/json","lastModified":1735807575426.713,"size":18605},{"id":"15219faa4667f7f0798e16c8d8f1aed3b8bbc1659ec6fb9ae699c1b265663c25e5c0a4b04a68a1af2fb3a8555c7b9344ba6a5943b1f4cd971811ae164ddf27ad","href":"https://static.observableusercontent.com/files/15219faa4667f7f0798e16c8d8f1aed3b8bbc1659ec6fb9ae699c1b265663c25e5c0a4b04a68a1af2fb3a8555c7b9344ba6a5943b1f4cd971811ae164ddf27ad","name":"cc-zero-1.svg","type":"image/svg+xml","lastModified":1739543943556.009,"size":13683}] 2d:{"title":"The Illustrated Manual of Buddhist Terms and Doctrines (IMBTD) with Categories II","cells":[{"id":0,"value":"# The Illustrated Manual of Buddhist Terms and Doctrines (IMBTD) with Categories II\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. \n\n# License \n\nThis work is marked with [CC0 1.0 ](https://creativecommons.org/publicdomain/zero/1.0/?ref=chooser-v1)","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.01,\n value: 0.93 // 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":1074,"value":"html`

\n \n \n

`","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":881,"value":"data = hierarchie.leaves().map((d) => d.data.name)","pinned":true,"hidden":false,"mode":"ojs"},{"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":"paliCategoriesClaude = [\n \"Fundamental Teachings & Noble Truths\",\n \"Meditation & Spiritual Practices\",\n \"Liberation & Spiritual Powers\",\n \"Mental Factors & Contemplation\",\n \"Consciousness & Ultimate Reality\",\n \"Spiritual Development & Hindrances\",\n \"Existence & Universal Laws\",\n \"Wisdom Knowledge & Mental States\",\n \"Celestial Realms & Planes of Existence\"\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":974,"value":"paliCategories = [\n \"Qualities for Awakening\",\n \"Meditation & Virtue\",\n \"Liberation & Insight\",\n \"Mind & Mental Factors\",\n \"Reality & Experience\",\n \"Defilements & Overcoming Them\",\n \"Views, Rebirth & Samsara\",\n \"Wisdom & Path to Enlightenment\",\n \"Realms & Beings\"\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":964,"value":"paliCategories1 = [\n \"Virtues & Spiritual Development\",\n \"Meditation & Ethical Conduct\",\n \"Liberation & Higher Realizations\",\n \"Mental & Meditative Processes\",\n \"Aggregates & Dependent Origination\",\n \"Defilements & Stages of Enlightenment\",\n \"Doctrinal Classifications & Cosmic Concepts\",\n \"Insight Knowledge & Meditative Progress\",\n \"Realms of Existence & Beings\"\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":792,"value":"paliCategoriesAdjustTop = [0, 0, 0, 0, 0, 0, 0, 0, 0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":794,"value":"paliCategoriesAdjustBottom = [0, 0, 0, 0, 0, 0, 0, 0, 0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":754,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":971,"value":"categories = [\n \"Strengths & Effort\",\n \"Faith & Awakening\",\n \"Mindfulness & // Conduct\",\n \"Path & Truths\",\n \"Meditation & Mental Cultivation\",\n \"Ethics & Merits\",\n \"Meditative // Objects\",\n \"Liberation // & Absorption\",\n \"Wisdom & Insight\",\n \"Mental States & Attention\",\n \"Mind & Conditions\",\n \"Thought & Perception\",\n \"Happiness & // Concentration\",\n \"Karma & Formation\",\n \"Equanimity & Aggregates\",\n \"Elements & Senses\",\n \"Self & Defilements\",\n \"Craving & Hindrances\",\n \"Skillful Actions\",\n \"Wrong Views & Rebirth\",\n \"Defilements // & Impurities\",\n \"Self & Reality\",\n \"Knowledge // & Insight\",\n \"Higher Wisdom & Perception\",\n \"Meditative Absorptions\",\n \"Consciousness & Mind Process\",\n \"Cognition // & Conditionality\",\n \"Higher Realms // & Non-returners\",\n \"Planes of Existence // & Deities\",\n \"Lower Realms // & Destinies\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":961,"value":"categories1 = [\n \"Powers\",\n \"Enlightenment Factors\",\n \"Mindfulness & //Ethics\",\n \"Path & Wisdom\",\n \"Concentration & // Meditation\",\n \"Reflections & Virtues\",\n \"Meditative // Objects\",\n \"Liberation // States\",\n \"Wisdom & // Liberation\",\n \"Mental Factors & // Stream-entry\",\n \"Bases of Power\",\n \"Mental Processes\",\n \"Happiness & // Concentration\",\n \"Dependent Origination & Kamma\",\n \"Equanimity & Aggregates\",\n \"Elements & Sense Bases\",\n \"Defilements & Path Qualities\",\n \"Cravings & Hindrances\",\n \"Skillful Actions\",\n \"Views & Rebirth\",\n \"Defilements & // Corruptions\",\n \"Beings & Samsaric Cycle\",\n \"Knowledge & // Insight\",\n \"Liberation & Purification\",\n \"Jhana & Mental Processes\",\n \"Functions of Consciousness\",\n \"Teachings & Practice\",\n \"Non-returners & // Realms\",\n \"States of Existence\",\n \"Lower Realms // & Destinations\"\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":797,"value":"categoriesAdjustTop = [\n 0, 0, 0.4, 0, 0.4, 0, 0.4, 0.4, 0, 0, 0, 0, -0.6, 0, 0, 0, 0, 0, 0, 0, -0.6,\n 0, -0.6, 0, 0, 0, 0.4, 0.4, 0.4, 0.4\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":799,"value":"categoriesAdjustBottom = [\n 0, 0, 0.3, 0, 0.3, 0, 0.3, 0.3, 0, -0, 0, 0, -0.5, 0, 0, 0, 0, 0, 0, 0,\n -0.5, 0, -0.5, 0, 0, 0, 0.3, 0.3, 0.3, 0.3\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":563,"value":"### Other Usefull things","pinned":false,"hidden":false,"mode":"md"},{"id":616,"value":"$34","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":"$35","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":"$36","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":1012,"value":"$37","pinned":true,"hidden":false,"mode":"ojs"},{"id":1016,"value":"logo = FileAttachment(\"cc-zero-1.svg\").text()","pinned":true,"hidden":false,"mode":"ojs"},{"id":559,"value":"","pinned":true,"hidden":false,"mode":"html"}],"files":"$W38","stdlib":"1","titling":"auto"}