31:T199a,myChart = { //a_thing2; //const div = html`

`; const svg0 = d3 //.select(div) .create("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom); svg0 // https://elijahmeeks.com/networkviz/ .append("defs") .append("marker") .attr("id", "Triangle") .attr("refX", 6) .attr("refY", 3) .attr("markerUnits", "userSpaceOnUse") .attr("markerWidth", 60) .attr("markerHeight", 90) .attr("orient", "auto") .append("path") .style("fill", "pink") // "#CC9999") .attr("d", "M 0 0 6 3 0 6 1.5 3"); const svg = svg0 .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); //create dummy data const dataset = { nodes: [ ...nodes0.map((d) => ({ id: d, formula: d.split("_").slice(1).join("_"), scope: +d.split("_")[0], source: introspection.cul_scope_ids_to_resource[+d.split("_")[0]].split( "?" )[0] })) ], links: links0.map((d) => ({ source: d.fromDefinition, target: d.to })) }; console.log("dataset is ...", dataset); // Initialize the links const link = svg .append("g") .attr("class", "links") .selectAll("line") .data(dataset.links) .enter() .append("line") // vs links as path elements with curved links https://elijahmeeks.com/networkviz/ .attr("marker-end", "url(#Triangle)"); // css? const color = d3.scaleOrdinal(d3.schemeCategory10); // Initialize the nodes const node = svg .append("g") .attr("class", "nodes") .selectAll("circle") .data(dataset.nodes) .enter() .append("circle") .classed("highlight", (d) => highlight.includes(d.formula)) .attr("r", 5) .attr("fill", (d, i) => color(d.source)) .call( d3 .drag() //sets the event listener for the specified typenames and returns the drag behavior. .on("start", dragstarted) //start - after a new pointer becomes active (on mousedown or touchstart). .on("drag", dragged) //drag - after an active pointer moves (on mousemove or touchmove). .on("end", dragended) //end - after an active pointer becomes inactive (on mouseup, touchend or touchcancel). ); // Text to nodes const text = svg .append("g") .attr("class", "text") .selectAll("text") .data(dataset.nodes) .enter() .append("text") .classed( "highlight", //(d) => (1 || highlight.includes(d.formula) ? "highlight" : ""), (d) => highlight.includes(d.formula) ) .text((d) => d.formula); //Listen for tick events to render the nodes as they update in your Canvas or SVG. simulation .nodes(dataset.nodes) //sets the simulation’s nodes to the specified array of objects, initializing their positions and velocities, and then re-initializes any bound forces; .on("tick", ticked); //use simulation.on to listen for tick events as the simulation runs. // After this, Each node must be an object. The following properties are assigned by the simulation: // index - the node’s zero-based index into nodes // x - the node’s current x-position // y - the node’s current y-position // vx - the node’s current x-velocity // vy - the node’s current y-velocity simulation.force("link").links(dataset.links); //sets the array of links associated with this force, recomputes the distance and strength parameters for each link, and returns this force. // After this, Each link is an object with the following properties: // source - the link’s source node; // target - the link’s target node; // index - the zero-based index into links, assigned by this method // This function is run at each iteration of the force algorithm, updating the nodes position (the nodes data array is directly manipulated). function ticked() { simulation.tick(10); link .attr( "x1", (d) => d.source.x + (Math.hypot(d.target.x - d.source.x, d.target.y - d.source.y) > 0.01 ? ((d.target.x - d.source.x) * 10) / Math.hypot(d.target.x - d.source.x, d.target.y - d.source.y) : 0) ) .attr( "y1", (d) => d.source.y + (Math.hypot(d.target.x - d.source.x, d.target.y - d.source.y) > 0.01 ? ((d.target.y - d.source.y) * 10) / Math.hypot(d.target.x - d.source.x, d.target.y - d.source.y) : 0) ) .attr( "x2", (d) => d.target.x - (Math.hypot(d.target.x - d.source.x, d.target.y - d.source.y) > 0.01 ? ((d.target.x - d.source.x) * 12) / Math.hypot(d.target.x - d.source.x, d.target.y - d.source.y) : 0) ) .attr( "y2", (d) => d.target.y - (Math.hypot(d.target.x - d.source.x, d.target.y - d.source.y) > 0.01 ? ((d.target.y - d.source.y) * 12) / Math.hypot(d.target.x - d.source.x, d.target.y - d.source.y) : 0) ); //.attr("x2", (d) => d.target.x) //.attr("y2", (d) => d.target.y); node.attr("cx", (d) => d.x).attr("cy", (d) => d.y); text .attr("x", (d) => d.x - 5) //position of the lower left point of the text .attr("y", (d) => d.y + 5); //position of the lower left point of the text } //When the drag gesture starts, the targeted node is fixed to the pointer //The simulation is temporarily “heated” during interaction by setting the target alpha to a non-zero value. function dragstarted(event, d) { if (!event.active) simulation.alphaTarget(0.3).restart(); //sets the current target alpha to the specified number in the range [0,1]. d.fy = d.y; //fx - the node’s fixed x-position. Original is null. d.fx = d.x; //fy - the node’s fixed y-position. Original is null. } //When the drag gesture starts, the targeted node is fixed to the pointer function dragged(event, d) { d.fx = event.x; d.fy = event.y; } //the targeted node is released when the gesture ends function dragended(event, d) { if (!event.active) simulation.alphaTarget(0); d.fx = null; d.fy = null; console.log("dataset after dragged is ...", dataset); } // ticked(); UNDO LISTENERS?? function update() {} // call .update(model) ?? return Object.assign(svg0.node(), { update }); }32:T58c,stringify_introspection_info = (d) => { // https://gist.github.com/lukehorvat/133e2293ba6ae96a35ba // https://vscode.dev/github/calculang/calculang/blob/all_cul/packages/calculang-js/bin/index.mjs#L14 let cul_functions = Array.from(d.cul_functions).reduce( // TODO sort here!! (obj, [key, value]) => Object.assign(obj, { [key]: value }), // Be careful! Maps can have non-String keys; object literals can't. {} ); let cul_links = [...d.cul_links.values()]; let cul_scope_ids_to_resource = Array.from( d.cul_scope_ids_to_resource ).reduce( (obj, [key, value]) => Object.assign(obj, { [key]: value }), // Be careful! Maps can have non-String keys; object literals can't. {} ); let import_sources_to_resource = Array.from( d.import_sources_to_resource ).reduce( (obj, [key, value]) => Object.assign(obj, { [key]: value }), // Be careful! Maps can have non-String keys; object literals can't. {} ); let memo_map = d.memo_map; let cul_input_map = Array.from(d.cul_input_map).reduce( (obj, [key, value]) => Object.assign(obj, { [key]: [...value.values()] }), // Be careful! Maps can have non-String keys; object literals can't. {} ); return JSON.stringify( { cul_functions, cul_links, cul_scope_ids_to_resource, import_sources_to_resource, cul_input_map, dot: d.dot, memo_map }, null, 2 ); }33:T53a,introspection.cul_links .filter((d) => d.reason == "call" && !d.from.includes("undefined")) .filter((d) => d.to == "0_net_cf") .map((d) => ({ to: d.to, from: d.from, //f: introspection.cul_functions[d.to].reason, //g: introspection.cul_functions[d.from].reason, // sometimes > 1 level needed? => Error or indicate when definition not found? fromDefinition: introspection.cul_functions[d.from].reason.includes( "import" ) ? //introspection.cul_functions[ introspection.cul_links.filter((e) => e.to == d.from)[0].from : //].reason d.from })) .map((d) => ({ to: d.to, fromDefinition: d.fromDefinition[d.fromDefinition.length - 1] == "_" ? d.fromDefinition.slice(0, d.fromDefinition.length - 1) : d.fromDefinition })) .map((d) => ({ to: d.to, //from: d.fromDefinition, //f: introspection.cul_functions[d.to].reason, //g: introspection.cul_functions[d.from].reason, // sometimes > 1 level needed? => Error or indicate when definition not found? fromDefinition: introspection.cul_functions[ d.fromDefinition ].reason.includes("import") ? //introspection.cul_functions[ introspection.cul_links.filter((e) => e.to == d.fromDefinition)[0].from : //].reason d.fromDefinition }))34:Tc28,a = introspection.cul_links .filter((d) => d.reason == "call" && !d.from.includes("undefined")) .map((d) => ({ to: d.to, from: d.from, //f: introspection.cul_functions[d.to].reason, //g: introspection.cul_functions[d.from].reason, // sometimes > 1 level needed? => Error or indicate when definition not found? fromDefinition: introspection.cul_functions[d.from].reason.includes( "import" ) ? //introspection.cul_functions[ introspection.cul_links.filter((e) => e.to == d.from)[0].from : //].reason d.from })) //.map((d) => introspection.cul_functions[d.fromDefinition]) /*.map((d) => ({ to: d.to, fromDefinition: d.fromDefinition[d.fromDefinition.length - 1] == "_" ? d.fromDefinition.slice(0, d.fromDefinition.length - 1) : d.fromDefinition }))*/ //.map((d) => introspection.cul_functions[d.fromDefinition]) .map((d) => ({ to: d.to, //from: d.fromDefinition, //f: introspection.cul_functions[d.to].reason, //g: introspection.cul_functions[d.from].reason, // sometimes > 1 level needed? => Error or indicate when definition not found? fromDefinition: introspection.cul_functions[ d.fromDefinition ].reason.includes("import") ? //introspection.cul_functions[ introspection.cul_links.filter((e) => e.to == d.fromDefinition)[0].from : //].reason d.fromDefinition })) /*.map((d) => ({ to: d.to, fromDefinition: d.fromDefinition[d.fromDefinition.length - 1] == "_" ? d.fromDefinition.slice(0, d.fromDefinition.length - 1) : d.fromDefinition }))*/ .map((d) => ({ to: d.to, //from: d.fromDefinition, //f: introspection.cul_functions[d.to].reason, //g: introspection.cul_functions[d.from].reason, // sometimes > 1 level needed? => Error or indicate when definition not found? fromDefinition: introspection.cul_functions[ d.fromDefinition ].reason.includes("import") ? //introspection.cul_functions[ introspection.cul_links.filter((e) => e.to == d.fromDefinition)[0].from : //].reason d.fromDefinition })) /*.map((d) => ({ to: d.to, fromDefinition: d.fromDefinition[d.fromDefinition.length - 1] == "_" ? d.fromDefinition.slice(0, d.fromDefinition.length - 1) : d.fromDefinition }))*/ .map((d) => ({ to: d.to, //from: d.fromDefinition, //f: introspection.cul_functions[d.to].reason, //g: introspection.cul_functions[d.from].reason, // sometimes > 1 level needed? => Error or indicate when definition not found? fromDefinition: introspection.cul_functions[ d.fromDefinition ].reason.includes("import") ? //introspection.cul_functions[ introspection.cul_links.filter((e) => e.to == d.fromDefinition)[0].from : //].reason d.fromDefinition })) /*.map((d) => ({ to: d.to, fromDefinition: d.fromDefinition[d.fromDefinition.length - 1] == "_" ? d.fromDefinition.slice(0, d.fromDefinition.length - 1) : d.fromDefinition }))*/35:[] 2f:{"title":"calculationships","cells":[{"id":449,"value":"# calculationships","pinned":false,"hidden":false,"mode":"md"},{"id":1047,"value":"viewof url = Inputs.text({\n label: \"Enter URL of model\",\n //value: \"https://calculang.dev/models/savings/savings.cul.js\"\n value: \"https://calculang.dev/models/taxes-pensions/impact.cul.js\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1125,"value":"others e.g. https://calculang.dev/models/shop-demand-curve-modular.cul.js\n\nhttps://actuarialplayground.com/_file/cul/playground.cul.js or `basicterm.cul.js`","pinned":false,"hidden":false,"mode":"md"},{"id":754,"value":"viewof strength = Inputs.range([-500, 10], { label: \"strength\", value: -60 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":681,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":745,"value":"viewof opacity = Inputs.range([0, 1], { label: \"opacity\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":547,"value":"dot`digraph {\n ${b.map((d) => `f${d.fromDefinition} -> f${d.to};`).join(\"\\n\")}\n}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1020,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":913,"value":"## more things to learn from\n\nhttps://codepen.io/smlo/pen/JdMOej For HTML tooltip\n\nhttps://elijahmeeks.com/networkviz/ for offset links (easy) and fixing nodes\n\nhttps://observablehq.com/@d3/delaunay-find-zoom?collection=@d3/d3-delaunay find and zoom (ex voronoi)\n\nGiven I now show directions, I should add self-ref indicators\n\nLINKED MINIMAP FOR SCOPES?","pinned":false,"hidden":false,"mode":"md"},{"id":233,"value":"/*(a_thing2.onchange = (d) => {\n console.log(d);\n history.pushState(\n { id: d.target.value, hidden: show_hidden },\n \"id \" + d.target.value,\n \"?id=\" + d.target.value + (show_hidden ? \"&hidden=hidden\" : \"\")\n );\n})*/","pinned":false,"hidden":false,"mode":"ojs"},{"id":239,"value":"q = new URLSearchParams(location.search)","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"default_example_id = q.get(\"id\") ?? \"\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1176,"value":"v = \"373ae56\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1031,"value":"getIntrospection = (\n await import(\n `https://cdn.jsdelivr.net/gh/calculang/calculang@${v}/packages/standalone/index.js?v=4`\n )\n).introspection","pinned":false,"hidden":false,"mode":"ojs"},{"id":1042,"value":"pre_fetch = (\n await import(\n `https://cdn.jsdelivr.net/gh/calculang/calculang@${v}/packages/standalone/pre_fetch.mjs?v=3`\n )\n).pre_fetch","pinned":false,"hidden":false,"mode":"ojs"},{"id":1045,"value":"fs = await pre_fetch(url)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1050,"value":"introspection = JSON.parse(stringify_introspection_info(await getIntrospection(url, fs)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1054,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":598,"value":"# ferny maths has an undefined ? b/c didn't recompile calculang-miscellaneous-models","pinned":false,"hidden":false,"mode":"md"},{"id":671,"value":"//create a simulation for an array of nodes, and compose the desired forces.\nsimulation = {\n //a_thing2;\n return d3\n .forceSimulation([\n ...nodes0.map((d) => ({\n id: d,\n formula: d.split(\"_\").slice(1).join(\"_\"),\n scope: +d.split(\"_\")[0],\n source:\n introspection.cul_scope_ids_to_resource[+d.split(\"_\")[0]].split(\n \"?\"\n )[0]\n }))\n ])\n .force(\n \"link\",\n d3\n .forceLink() // This force provides links between nodes\n .id((d) => d.id) // This sets the node id accessor to the specified function. If not specified, will default to the index of a node.\n )\n .force(\"charge\", d3.forceManyBody().strength(strength)) // This adds repulsion (if it's negative) between nodes.\n .force(\"center\", d3.forceCenter(width / 2, height / 2));\n //.stop()\n //.tick(1000); // This force attracts nodes to the center of the svg area\n //.force(\"charge\", d3.forceCollide(20)); // This force attracts nodes to the center of the svg area\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":759,"value":"d3.coll","pinned":true,"hidden":false,"mode":"ojs"},{"id":855,"value":"introspection","pinned":true,"hidden":false,"mode":"ojs"},{"id":964,"value":"inputs = Object.values(introspection.cul_functions)\n .filter((d) => d.reason == \"input definition\")\n .map((d) => d.name.slice(0, -3)) // not ACTUAL inputs: I need to traverse graph and get by scope id","pinned":true,"hidden":false,"mode":"ojs"},{"id":930,"value":"highlight = [] //[\n/*\n //\"income_tax\",\n //\"income_tax_sum\",\n \"income_tax_sum_impact\",\n \"income_tax_sum\",\n //\"usc_table\",\n \"paye_table\",\n \"paye\",*/\n//...inputs\n//]","pinned":false,"hidden":false,"mode":"ojs"},{"id":668,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":1009,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":231,"value":"a_thing2 = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1026,"value":"## Calculationships","pinned":false,"hidden":false,"mode":"md"},{"id":468,"value":"can I get call-defns?","pinned":false,"hidden":false,"mode":"md"},{"id":511,"value":"introspection","pinned":false,"hidden":false,"mode":"ojs"},{"id":589,"value":"introspection.cul_links //.map((d) => d.reason) //.filter((d) => d.to.includes(\"undefined\"))","pinned":true,"hidden":false,"mode":"ojs"},{"id":596,"value":"introspection.cul_input_map","pinned":true,"hidden":false,"mode":"ojs"},{"id":838,"value":"introspection.cul_functions","pinned":true,"hidden":false,"mode":"ojs"},{"id":594,"value":"introspection.cul_input_map","pinned":true,"hidden":false,"mode":"ojs"},{"id":1028,"value":"TODO recycle code in standalone","pinned":false,"hidden":false,"mode":"md"},{"id":1172,"value":"a.filter((d) => d.to == \"0_net_cf\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1151,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":470,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":568,"value":"b = _.uniqWith(a, _.isEqual).map((d) => ({\n ...d,\n // unrename:\n fromDefinitionReason:\n introspection.cul_functions[\n d.fromDefinition[d.fromDefinition.length - 1] == \"_\"\n ? d.fromDefinition.slice(0, d.fromDefinition.length - 1)\n : d.fromDefinition\n ].reason\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":603,"value":"# making node-links","pinned":false,"hidden":false,"mode":"md"},{"id":605,"value":"nodes0 = [\n ...new Set([...b.map((d) => d.to), ...b.map((d) => d.fromDefinition)])\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":609,"value":"links0 = b","pinned":false,"hidden":false,"mode":"ojs"},{"id":666,"value":"//d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":675,"value":"margin = ({ top: 0, right: 0, bottom: 0, left: 0 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":677,"value":"//width = width // 1700 - margin.left - margin.right","pinned":false,"hidden":false,"mode":"ojs"},{"id":679,"value":"height = 2 * 400 * 1.8 - margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs"},{"id":842,"value":"introspection.cul_links","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}