3e:null 3f:["$","title",null,{"children":"AST Explorer | Ruzgar Imski | Observable"}] 45:T443,function addLegend(svg) { const height = 300; const itemRadius = 5; const itemPadding = 5; const itemTextPadding = 10; const data = Object.entries(stat.type); const scale = d3 .scaleBand() .domain(data.map((i) => i[0])) .range([0, height]); d3.selectAll(".legend").remove(); const legend = svg .append("g") .attr("class", "legend") .attr("transform", `translate(${-50}, ${30})`); legend .selectAll(".legend-item") .data(data) .join("g") .attr("class", "legend-item") .each(function ([type], index) { const item = d3 .select(this) .append("circle") .attr("cx", 0) .attr("cy", scale(type)) .attr("r", itemRadius) .attr("height", scale.bandwidth() - itemPadding) .attr("fill", colorMap[type]); const text = d3 .select(this) .append("text") .text(typeAbbr(type)) .attr("x", itemRadius + itemTextPadding) .attr("y", scale(type)) .attr("dominant-baseline", "middle"); console.log(scale.bandwidth()); }); }46:T1c95,chart = { const root = data; const margin = { top: 20, right: 120, bottom: 20, left: 100 }; const circleRadius = 8; root.x0 = dy / 2; root.y0 = 0; root.descendants().forEach((d, i) => { d.id = i; d._children = d.children; if (d.depth > 6) d.children = null; }); const svg = d3 .create("svg") .attr("viewBox", [-margin.left, -margin.top, width, dx]) .style("font", "10px sans-serif") .style("user-select", "none") .attr("class", "container"); const gLink = svg .append("g") .attr("class", "link-container") .attr("fill", "none") .attr("stroke", "#1c1c1c") .attr("stroke-opacity", 0.8) .attr("stroke-width", 1.5); const gNode = svg .append("g") .attr("class", "node-container") .attr("cursor", "pointer") .attr("pointer-events", "all"); function update(source) { const duration = d3.event && d3.event.altKey ? 2500 : 250; const nodes = root.descendants().reverse(); const links = root.links(); addLegend(svg); // Compute the new tree layout. tree(root); let left = root; let right = root; root.eachBefore((node) => { if (node.x < left.x) left = node; if (node.x > right.x) right = node; }); const height = right.x - left.x + margin.top + margin.bottom; const transition = svg .transition() .duration(duration) .attr("viewBox", [-margin.left, left.x - margin.top, width, height]) .tween( "resize", window.ResizeObserver ? null : () => () => svg.dispatch("toggle") ); // Update the nodes… const node = gNode.selectAll(".node").data(nodes, (d) => d.id); // Enter any new nodes at the parent's previous position. const nodeEnter = node .enter() .append("g") .attr("class", "node") .attr("transform", (d) => `translate(${source.y0},${source.x0})`) .attr("fill-opacity", 0) .attr("stroke-opacity", 0) .on("click", (event, d) => { d.children = d.children ? null : d._children; update(d); }); // 表示节点的圆环 nodeEnter .filter((d) => !isVariableNode(d)) .append("circle") .attr("r", circleRadius) .attr("fill", "white") .attr("stroke", (d) => colorMap[d.data.node.type]) .attr("stroke-width", 4); nodeEnter.filter(isVariableNode).each(function (d) { const arcs = d3 .pie() .padAngle(0.2) .sort(null) .value((d) => d.value)( pieDataGenerator(findVariable(d.data.node.name)) ); const arc = d3 .arc() .innerRadius(circleRadius - 2) .outerRadius(circleRadius + 2); const g = d3.select(this).append("g").attr("class", "var-node"); g.append("circle").attr("r", circleRadius).attr("fill", "white"); g.selectAll(".arcs") .data(arcs) .join("path") .attr("fill", (_d, i) => { return i <= d.data.index ? "red" : colorMap.Variable; }) .attr("d", arc); // 添加圆心标记字符 g.append("text") .attr("dy", "0.15em") .attr("fill", "red") .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .attr("font-size", 10) .attr("font-weight", "bold") .attr("font-family", "sans-serif") .text((d) => d.data.node.name[0].toUpperCase()); }); // 中心表示打开关闭的圆 nodeEnter .append("circle") .attr("r", (d) => (d._children ? circleRadius / 2 : 0)) .attr("fill", "#fccb00"); // 节点名 nodeEnter .append("text") .attr("dy", "0.31em") .attr("x", (d) => (d._children ? -12 : 12)) .attr("text-anchor", (d) => (d._children ? "end" : "start")) .attr("fill", (d) => (isVariableNode(d) ? "red" : "black")) .text((d) => { const { data: { node: { type, name, operator, value, kind } } } = d; return isVariableNode(d) ? name : name || kind || (value !== undefined ? String(value) : false) || (operator ? operatorMap[operator] : typeAbbr(type)); }) .clone(true) .lower() .attr("stroke-linejoin", "round") .attr("stroke-width", 3) .attr("stroke", "white"); // Transition nodes to their new position. const nodeUpdate = node .merge(nodeEnter) .transition(transition) .attr("transform", (d) => `translate(${d.y},${d.x})`) .attr("fill-opacity", 1) .attr("stroke-opacity", 1); // Transition exiting nodes to the parent's new position. const nodeExit = node .exit() .transition(transition) .remove() .attr("transform", (d) => `translate(${source.y},${source.x})`) .attr("fill-opacity", 0) .attr("stroke-opacity", 0); // Update the links… const link = gLink.selectAll("path").data(links, (d) => d.target.id); const variablesConnectMap = {}; // 变量到变量路径高亮 root.each((n) => { if (isVariableNode(n)) { const name = n.data.node.name; if (!(name in variablesConnectMap)) { variablesConnectMap[name] = []; } variablesConnectMap[name].push(n); } }); const varPath = {}; Object.values(variablesConnectMap) .filter((v) => v.length > 1) .forEach((v) => { const path = []; v.reduce((prev, curr) => { if (prev !== curr) { path.push(...prev.path(curr)); } return curr; }, v[0]); varPath[v[0].data.node.name] = new Set(path); }); const getHighlightColor = (d) => { const defaultColor = "gray"; if (!pathHighlight) return defaultColor; for (let k in varPath) { const v = varPath[k]; if (v.has(d.source) && v.has(d.target)) { // 找到路径 // 查询颜色 return findVariable(k).color || defaultColor; } } return defaultColor; }; const boldLinkStroke = (d, bold = 5, thin = 1) => { if (!pathHighlight) return thin; for (let k in varPath) { const v = varPath[k]; if (v.has(d.source) && v.has(d.target)) { // 找到路径 // 查询颜色 return bold; } } return thin; }; // Enter any new links at the parent's previous position. const linkEnter = link .enter() .append("path") .attr("stroke", getHighlightColor) .attr("stroke-width", (d) => boldLinkStroke(d)) .attr("d", (d) => { const o = { x: source.x0, y: source.y0 }; return diagonal({ source: o, target: o }); }); // Transition links to their new position. link.merge(linkEnter).transition(transition).attr("d", diagonal); // Transition exiting nodes to the parent's new position. link .exit() .transition(transition) .remove() .attr("d", (d) => { const o = { x: source.x, y: source.y }; return diagonal({ source: o, target: o }); }); // Stash the old positions for transition. root.eachBefore((d) => { d.x0 = d.x; d.y0 = d.y; }); } update(root); return svg.node(); }47:T529,stat = { function counter() { const dict = {}; function _add(name, count = 1) { if (!name) return; if (!(name in dict)) { dict[name] = 0; } dict[name] += count; } function add(name, count) { if (name instanceof Array) { name.forEach((item) => _add(item, count)); } else { _add(name, count); } } function get() { return dict; } return { add, get }; } // 统计 nodes 中节点信息 // 类型统计 type const typesStat = new counter(); // Identifier 统计 name const idfStat = new counter(); // 定义类型 kind const kindStat = new counter(); // 词云 operator value name kind const cloudStat = new counter(); // const cloudTypeFilter = (type) => { // const dict = [ // "IfStatement", // "ForStatement", // "WhileStatement", // "DoWhileStatement", // "SwitchStatement" // ]; // return dict.includes(type) ? [type] : []; // }; nodes.forEach(({ node: { type, name, kind, operator, value } }) => { typesStat.add(type); idfStat.add(name); kindStat.add(kind); cloudStat.add([name, kind, value]); }); return { type: typesStat.get(), Identifier: idfStat.get(), kind: kindStat.get(), cloud: cloudStat.get() }; }48:T694,lifeCycle = { document.getElementById("life-cycle-container").innerHTML = ""; const nodesFilter = ["VariableDeclarator"]; const defaultColor = "gray"; const p = new g2plot.Bar("life-cycle-container", { // renderer: "svg", // keep Program at the top data: (timeline[0].type === "Program" ? timeline : timeline.reverse() ).filter(({ type }) => !nodesFilter.includes(type)), xField: "values", yField: "type", isRange: true, xAxis: { grid: null, nice: false }, yAxis: { label: { formatter: typeAbbr } }, rawFields: ["values", "type", "name", "loc"], color: ({ type, name }) => { // 将变量名高亮出来 const flag = findVariable(name); return flag ? flag.color : colorMap[type] || defaultColor; }, tooltip: { domStyles: { "g2-tooltip": { opacity: 1 } }, customItems: (items) => { return items.map(({ data, name, title, value, ...rest }) => { const { loc: { start: { line: sl, column: sc }, end: { line: el, column: ec } }, type, name: _name, value: _value, operator, kind } = data; return { name: _name || (_value !== undefined ? String(_value) : false) || operatorMap[operator] || kind || type, title, value: `[${sl},${sc}]->[${el}, ${ec}]`, data, ...rest }; }); } } }); p.render(); return p; }49:[] 43:{"id":"3f0cf6f71bd3ea2a","slug":null,"title":"AST Explorer","thumbnail":"3811db077441ec1d46c223039f9b83cd139c11519dd7450a899933a24feb1519","access_level":"public","create_time":"$D2024-01-16T06:54:42.156Z","update_time":"$D2024-01-16T06:54:42.156Z","view_time":null,"first_public_time":"$D2024-01-16T06:54:42.156Z","has_unpublished_edits":null,"fork":{"id":"6153df9402e7c5c3","slug":"ast-explorer","title":"AST Explorer","owner":{"id":"9c9aef0d0ab17833","login":"aarebecca","name":"Aaron"}},"stars":0,"starred":false,"owner":{"type":"team","id":"62eaf79b101c4021","login":"mondano","name":"Ruzgar Imski","avatar_url":"https://avatars-next.observableusercontent.com/77349a6cb8957792df3c6651144ca808d40794c15df75040d13e6d6387841d04","tier":"starter_2024","bio":"","following":false},"version":1364,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"97ed911fd2a1208e","login":"mondano","name":"Ruzgar Imski","avatar_url":"https://avatars-next.observableusercontent.com/77349a6cb8957792df3c6651144ca808d40794c15df75040d13e6d6387841d04","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"97ed911fd2a1208e","login":"mondano","name":"Ruzgar Imski","avatar_url":"https://avatars-next.observableusercontent.com/77349a6cb8957792df3c6651144ca808d40794c15df75040d13e6d6387841d04","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"AST Explorer","cells":[{"id":0,"value":"md`# AST Explorer`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1182,"value":"**AST**(Abstract Syntax Tree) is the structure representation of source code.\nThis design aim to visualize the AST. And there are some else visual design for\nAST by others that can be referenced:\n\n* [JavaScript AST Visualizer](https://resources.jointjs.com/demos/rappid/apps/Ast/index.html)\n* [TypeScript AST Viewer](https://ts-ast-viewer.com/)\n* [AST Visualization on browser](http://nhiro.org/learn_language/AST-Visualization-on-browser.html#demo)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1201,"value":"### Try to paste your code here","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":995,"value":"viewof code = Inputs.textarea({\n // label: \"Code\",\n rows: 10,\n placeholder: \"Paste code here\",\n value: `function getState(scrollHeight, height, offsetTop, offsetBottom) {\n let scrollTop = window.scrollY;\n let targetHeight = window.innerHeight;\n\n if (offsetTop != null && this.affixed === \"top\") {\n if (document.querySelector(\".content-wrap\").offsetHeight < offsetTop)\n return \"top\";\n return scrollTop < offsetTop ? \"top\" : false;\n }\n\n if (this.affixed === \"bottom\") {\n if (offsetTop != null)\n return this.unpin <= this.element.getBoundingClientRect().top\n ? false\n : \"bottom\";\n return scrollTop + targetHeight <= scrollHeight - offsetBottom\n ? false\n : \"bottom\";\n }\n\n if (offsetTop != null && scrollTop <= offsetTop) return \"top\";\n if (\n offsetBottom != null &&\n colliderTop + colliderHeight >= scrollHeight - offsetBottom\n )\n return \"bottom\";\n return false;\n}`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1089,"value":"identifiers = {\n const idfs = {};\n walk.simple(acorn.parse(code), {\n Identifier: ({ name }) => {\n if (!(name in idfs)) {\n idfs[name] = 1; // TODO fixed\n }\n idfs[name] += 1;\n }\n });\n return idfs;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"variables = {\n const colors = [\"pink\", \"green\", \"red\"];\n return viewVariables.map((v, i) => {\n return {\n name: v,\n count: identifiers[v],\n color: colors[i % colors.length]\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1212,"value":"### Select Identifier\n`Recommended less than two at a time`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1083,"value":"viewof viewVariables = {\n const names = Object.entries(identifiers)\n .filter(([k, v]) => v > 1)\n .map(([v]) => v);\n return Inputs.checkbox(names, {\n // label: \"Highlight\",\n value: names.length > 0 ? names.slice(0, 2) : []\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1349,"value":"### Is Identifier Path Highlight","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1353,"value":"viewof pathHighlight = Inputs.toggle({ label: \"Highlight\", value: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1162,"value":"#### Assign color map for nodes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":411,"value":"colorMap = ({\n Program: \"lightgray\",\n VariableDefinition: \"rgba(153, 153, 153, 1)\",\n IfStatement: \"rgba(253, 161, 255, 1)\",\n VariableDeclaration: \"rgba(164, 221, 0, 1)\",\n ReturnStatement: \"rgba(179, 179, 179, 1)\",\n FunctionDeclaration: \"rgba(115, 216, 255, 1)\",\n BlockStatement: \"rgba(0, 156, 224, 1)\",\n Identifier: \"rgba(252, 220, 0, 1)\",\n ExpressionStatement: \"rgba(196, 81, 0, 1)\",\n AssignmentExpression: \"rgba(244, 78, 59, 1)\",\n VariableDeclarator: \"rgba(104, 188, 0, 1)\",\n BinaryExpression: \"rgba(25, 77, 51, 1)\",\n ThisExpression: \"rgba(104, 204, 202, 1)\",\n CallExpression: \"rgba(244, 78, 59, 1)\",\n MemberExpression: \"rgba(204, 204, 204, 1)\",\n LogicalExpression: \"rgba(253, 161, 255, 1)\",\n ConditionalExpression: \"rgba(196, 81, 0, 1)\",\n Literal: \"rgba(252, 220, 0, 1)\",\n NullLiteral: \"rgba(164, 221, 0, 1)\",\n StringLiteral: \"rgba(252, 220, 0, 1)\",\n BooleanLiteral: \"rgba(24, 144, 255, 1)\",\n Variable: \"rgba(68, 109, 176, 1)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":898,"value":"// set abbreviation for type name\nfunction typeAbbr(type) {\n const defaultMap = {\n Literal: \"Literal\",\n ExpressionStatement: \"ES\"\n };\n if (type in defaultMap) {\n return defaultMap[type];\n }\n return type.replaceAll(\n /Expression|Statement|Literal|Declarator|Declaration/g,\n \"\"\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1262,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":668,"value":"# Statistics","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":690,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":792,"value":"## Life Cycle","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":663,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":735,"value":"wordcloud = {\n document.getElementById(\"word-cloud-container\").innerHTML = \"\";\n const p = new g2plot.WordCloud(\"word-cloud-container\", {\n data: Object.keys(stat.cloud).map((k) => ({\n name: k,\n value: stat.cloud[k]\n })),\n wordField: \"name\",\n weightField: \"value\",\n colorField: \"name\",\n wordStyle: {\n fontSize: [20, 70]\n },\n random: () => 0.5\n });\n p.render();\n return p;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1010,"value":"nodes = {\n const createNodeID = ({ loc, type }) => {\n const {\n start: { line: sl, column: sc },\n end: { line: el, column: ec }\n } = loc;\n return `${type}-${sl}:${sc}-${el}:${ec}`;\n };\n\n const nodes = [];\n walk.fullAncestor(acorn.parse(code, { locations: true }), (_, ancestors) => {\n nodes.push({\n node: _,\n name: createNodeID(_),\n parent: ancestors.length > 1 ? createNodeID(ancestors.slice(-2)[0]) : \"\"\n });\n });\n return nodes;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":826,"value":"operatorMap = ({\n \"+\": \"+\",\n \"-\": \"-\",\n \"!=\": \"≠\",\n \"!==\": \"≠\",\n \"<\": \"<\",\n \">\": \">\",\n \"<=\": \"≤\",\n \">=\": \"≥\",\n \"=\": \"=\",\n \"==\": \"=\",\n \"===\": \"=\",\n \"&&\": \"and\",\n \"||\": \"or\",\n \"!\": \"not\",\n \"%\": \"mod\",\n \"/\": \"÷\",\n \"++\": \"++\",\n \"--\": \"--\",\n \"*\": \"×\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"function addIndexToVar() {\n // 为变量排序\n variables\n .map((d) => d.name)\n .forEach((v) => {\n nodes\n .filter((d) => d.node.name === v)\n .forEach((n, i) => {\n n.index = i;\n });\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"data = {\n addIndexToVar();\n return d3\n .stratify()\n .id((d) => d.name)\n .parentId((d) => d.parent)(nodes);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"function isVariableNode(d) {\n return findVariable(d.data.node.name) !== undefined;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"function pieDataGenerator({ name, count }) {\n return d3.range(count).map((i) => ({ name, value: 1 }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"function findVariable(name) {\n if (!name) return undefined;\n const result = variables.filter(({ name: _ }) => name === _);\n if (result.length === 0) return undefined;\n return result[0];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"diagonal = d3.linkHorizontal().x(d => d.y).y(d => d.x)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"tree = d3.tree().nodeSize([dx, dy])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"dx = 22","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"dy = width / 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":947,"value":"acorn = require(\"acorn@8.7.0\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":956,"value":"walk = require(\"acorn-walk@8.2.0\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":728,"value":"g2plot = require(\"@antv/g2plot\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 44:"$43:body"