2b:null 2c:["$","title",null,{"children":"Force-directed graph | Hurrarah Hamid's Workspace | Observable"}] 31:T1e6a,viewof selectedClusterId = { const width = 928; const height = 600; // `data` is d3_cluster_graph.json. // Render the cluster minimum spanning tree. The denser nearest-neighbor // network remains available in data.overview.links. const links = data.overview.treeLinks.map(d => ({...d})); const nodes = data.overview.nodes.map(d => ({...d})); const sampleExtent = d3.extent(nodes, d => d.sampleCount); const pairExtent = d3.extent(links, d => d.pairCount); const radius = d3.scaleSqrt(sampleExtent, [10, 32]); const category = d => d.sampleCount === 1 ? "singleton" : d.sampleCount === 2 ? "pair" : "cluster"; const fill = d3.scaleOrdinal() .domain(["singleton", "pair", "cluster"]) .range(["#fff0c7", "#dbeafe", "#dcfce7"]); const stroke = d3.scaleOrdinal() .domain(["singleton", "pair", "cluster"]) .range(["#b77900", "#2f73bf", "#238b45"]); const linkWidth = d3.scaleSqrt(pairExtent, [0.5, 3.5]); const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id) .distance(d => Math.max( radius(d.source.sampleCount) + radius(d.target.sampleCount) + 6, 20 + Math.min(45, Math.sqrt(d.minimumSnps) * 0.75) )) .strength(0.38)) .force("charge", d3.forceManyBody().strength(-90)) .force("collide", d3.forceCollide(d => radius(d.sampleCount) + 5)) .force("center", d3.forceCenter(width / 2, height / 2 + 20)) .on("tick", ticked); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width:100%;height:auto;background:#f8fafc") .attr("role", "img") .attr("aria-label", "Connected cluster overview"); svg.append("text") .attr("x", 20).attr("y", 27) .attr("font-family", "system-ui, sans-serif") .attr("font-size", 17).attr("font-weight", 700) .attr("fill", "#0f172a") .text("Cluster minimum spanning network"); svg.append("text") .attr("x", 20).attr("y", 47) .attr("font-family", "system-ui, sans-serif") .attr("font-size", 11).attr("fill", "#475569") .text(`${nodes.length} clusters · ${links.length} tree links · click a cluster to inspect samples`); const graph = svg.append("g"); svg.call(d3.zoom().scaleExtent([0.25, 8]) .on("zoom", event => graph.attr("transform", event.transform))); const link = graph.append("g").attr("fill", "none") .selectAll("line").data(links).join("line") .attr("stroke", "#64748b") .attr("stroke-opacity", 0.42) .attr("stroke-width", d => linkWidth(d.pairCount)); const linkLabel = graph.append("g") .selectAll("text").data(links).join("text") .attr("font-family", "system-ui, sans-serif") .attr("font-size", 8) .attr("fill", "#334155") .attr("text-anchor", "middle") .attr("paint-order", "stroke") .attr("stroke", "#f8fafc") .attr("stroke-width", 3) .attr("opacity", 0) .attr("pointer-events", "none") .text(d => `${d.minimumSnps.toLocaleString()} SNPs`); link.append("title").text(d => `Clusters ${nodeId(d.source)} ↔ ${nodeId(d.target)}\n` + `Sample pairs: ${d.pairCount}\nMinimum SNPs: ${d.minimumSnps}\n` + `Average SNPs: ${format(d.averageSnps)}\n` + `Average mismatches: ${format(d.averageMismatches)}\n` + `Average Jaccard index: ${format(d.averageJaccardIndex, 6)}\n` + `Minimum Mash-like distance: ${format(d.minimumMashLikeDistance, 8)}\n` + `Closest samples: ${d.closestSamples.join(" ↔ ")}` ); const node = graph.append("g").attr("stroke-width", 2.5) .selectAll("circle").data(nodes).join("circle") .attr("r", d => radius(d.sampleCount)) .attr("fill", d => fill(category(d))) .attr("fill-opacity", 0.92) .attr("stroke", d => stroke(category(d))) .attr("tabindex", 0).attr("cursor", "pointer") .on("mouseenter", function(event, d) { d3.select(this).attr("stroke", "#f97316").attr("stroke-width", 4); label.filter(value => value.id === d.id).attr("opacity", 1); }) .on("mouseleave", function(event, d) { if (output.value !== String(d.id)) { d3.select(this).attr("stroke", stroke(category(d))).attr("stroke-width", 2.5); label.filter(value => value.id === d.id) .attr("opacity", value => value.sampleCount >= 5 ? 1 : 0); } }) .on("click", selectCluster) .call(d3.drag().on("start", dragstarted).on("drag", dragged).on("end", dragended)); const label = graph.append("g") .selectAll("text").data(nodes).join("text") .attr("font-family", "system-ui, sans-serif") .attr("font-size", 8) .attr("font-weight", 700) .attr("fill", "#1e293b") .attr("text-anchor", "middle") .attr("dominant-baseline", "central") .attr("opacity", d => d.sampleCount >= 5 ? 1 : 0) .attr("pointer-events", "none") .text(d => `C${d.id}`); node.append("title").text(d => `Cluster ${d.id}\nType: ${category(d)}\nSamples: ${d.sampleCount}\nWithin-cluster links: ${d.internalEdgeCount}` ); const output = svg.node(); output.value = null; function selectCluster(event, selected) { const clickedId = String(selected.id); // Clicking the selected cluster again deselects it. if (output.value === clickedId) { output.value = null; output.dispatchEvent(new Event("input", {bubbles: true})); node .attr("opacity", 1) .attr("stroke", d => stroke(category(d))) .attr("stroke-width", 2.5); label.attr("opacity", d => d.sampleCount >= 5 ? 1 : 0); link.attr("stroke-opacity", 0.42); linkLabel.attr("opacity", 0); return; } output.value = clickedId; output.dispatchEvent(new Event("input", {bubbles: true})); const neighbors = new Set([output.value]); links.forEach(d => { const source = nodeId(d.source), target = nodeId(d.target); if (source === output.value) neighbors.add(target); if (target === output.value) neighbors.add(source); }); node.attr("opacity", d => neighbors.has(String(d.id)) ? 1 : 0.16) .attr("stroke", d => String(d.id) === output.value ? "#f97316" : stroke(category(d))) .attr("stroke-width", d => String(d.id) === output.value ? 4 : 2.5); label.attr("opacity", d => neighbors.has(String(d.id)) ? 1 : 0.05); link.attr("stroke-opacity", d => nodeId(d.source) === output.value || nodeId(d.target) === output.value ? 0.95 : 0.05 ); linkLabel.attr("opacity", d => nodeId(d.source) === output.value || nodeId(d.target) === output.value ? 1 : 0 ); } function ticked() { link.attr("x1", d => d.source.x).attr("y1", d => d.source.y) .attr("x2", d => d.target.x).attr("y2", d => d.target.y); node.attr("cx", d => d.x).attr("cy", d => d.y); label.attr("x", d => d.x).attr("y", d => d.y); linkLabel .attr("x", d => (d.source.x + d.target.x) / 2) .attr("y", d => (d.source.y + d.target.y) / 2); } function dragstarted(event) { if (!event.active) simulation.alphaTarget(0.3).restart(); event.subject.fx = event.subject.x; event.subject.fy = event.subject.y; } function dragged(event) { event.subject.fx = event.x; event.subject.fy = event.y; } function dragended(event) { if (!event.active) simulation.alphaTarget(0); event.subject.fx = null; event.subject.fy = null; } function nodeId(value) { return String(value.id ?? value); } function format(value, digits = 2) { return Number(value).toLocaleString(undefined, {maximumFractionDigits: digits}); } invalidation.then(() => simulation.stop()); return output; } 32:T1b87,sampleChart = { const width = 928; const height = 600; // Observable creates `selectedClusterId` automatically from the // `viewof selectedClusterId` cluster chart cell. const clusterId = String(selectedClusterId); const selectedGraph = data.subgraphs[clusterId]; if (!selectedGraph) { return d3.create("div") .style("font", "14px system-ui, sans-serif") .style("padding", "24px") .style("color", "#475569") .text("Select a cluster in the cluster overview.") .node(); } // Render the SNP-prioritized minimum spanning tree instead of every // qualifying pairwise link. The complete links remain in selectedGraph.links. const links = selectedGraph.treeLinks.map(d => ({...d})); const nodes = selectedGraph.nodes.map(d => ({...d})); const adjacency = new Map(nodes.map(d => [d.id, new Set()])); links.forEach(d => { adjacency.get(d.source).add(d.target); adjacency.get(d.target).add(d.source); }); const degreeExtent = d3.extent(nodes, d => d.treeDegree); const snpCategory = snps => snps < 20 ? "<20 SNPs" : snps < 50 ? "20–49 SNPs" : "≥50 SNPs"; const snpColor = snps => snps < 20 ? "#16a34a" : snps < 50 ? "#f59e0b" : "#dc2626"; const snpWidth = snps => snps < 20 ? 3.5 : snps < 50 ? 2.5 : 1.5; const radius = d3.scaleSqrt(degreeExtent, [6, 13]); const showAllLabels = nodes.length <= 120; const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id) // Keep the lineage compact while preserving a modest SNP-length signal. .distance(d => Math.max( radius(d.source.treeDegree) + radius(d.target.treeDegree) + 5, 18 + Math.min(34, Math.sqrt(Math.max(0, d.snps)) * 0.8) )) .strength(0.72)) .force("charge", d3.forceManyBody().strength(-55)) .force("collide", d3.forceCollide(d => radius(d.treeDegree) + 3).strength(0.9)) .force("center", d3.forceCenter(width / 2, height / 2 + 20)) .on("tick", ticked); const svg = d3.create("svg") .attr("width", width).attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width:100%;height:auto;background:#f8fafc") .attr("role", "img") .attr("aria-label", `Sample graph for cluster ${clusterId}`); svg.append("text") .attr("x", 20).attr("y", 27) .attr("font-family", "system-ui, sans-serif") .attr("font-size", 17).attr("font-weight", 700) .attr("fill", "#0f172a") .text(`Cluster ${clusterId}: minimum spanning network`); svg.append("text") .attr("x", 20).attr("y", 47) .attr("font-family", "system-ui, sans-serif") .attr("font-size", 11).attr("fill", "#475569") .text(`${nodes.length} samples · ${links.length} tree links · ranked by SNP distance`); const legendData = [ {label: "<20 SNPs", color: "#16a34a", width: 3.5}, {label: "20–49 SNPs", color: "#f59e0b", width: 2.5}, {label: "≥50 SNPs", color: "#dc2626", width: 1.5} ]; const legend = svg.append("g") .attr("transform", `translate(${width - 145}, 22)`) .attr("font-family", "system-ui, sans-serif") .attr("font-size", 11); const legendItem = legend.selectAll("g").data(legendData).join("g") .attr("transform", (d, i) => `translate(0, ${i * 19})`); legendItem.append("line") .attr("x1", 0).attr("x2", 28).attr("y1", 0).attr("y2", 0) .attr("stroke", d => d.color).attr("stroke-width", d => d.width); legendItem.append("text") .attr("x", 36).attr("y", 4).attr("fill", "#334155") .text(d => d.label); const graph = svg.append("g"); svg.call(d3.zoom().scaleExtent([0.4, 10]) .on("zoom", event => graph.attr("transform", event.transform))); const link = graph.append("g").attr("fill", "none") .selectAll("line").data(links).join("line") .attr("stroke", d => snpColor(d.snps)) .attr("stroke-opacity", 0.72) .attr("stroke-width", d => snpWidth(d.snps)); link.append("title").text(d => `${nodeId(d.source)} ↔ ${nodeId(d.target)}\nSNPs: ${d.snps} (${snpCategory(d.snps)})\n` + `Matching k-mers: ${d.matches}\nMismatching k-mers: ${d.mismatches}\n` + `Jaccard index: ${format(d.jaccardIndex, 6)}\n` + `Mash-like distance: ${format(d.mashLikeDistance, 8)}\n` + `SNP distance: ${format(d.snpDistance, 8)}` ); const node = graph.append("g").attr("stroke", "#238b45").attr("stroke-width", 2.5) .selectAll("circle").data(nodes).join("circle") .attr("r", d => radius(d.treeDegree)) .attr("fill", "#ffffff") .attr("tabindex", 0) .on("mouseenter", highlightNeighborhood) .on("mouseleave", restore) .call(d3.drag().on("start", dragstarted).on("drag", dragged).on("end", dragended)); const label = graph.append("g") .selectAll("text").data(nodes).join("text") .attr("font-family", "system-ui, sans-serif") .attr("font-size", 8) .attr("font-weight", 650) .attr("fill", "#1e293b") .attr("text-anchor", "middle") .attr("dy", d => radius(d.treeDegree) + 11) .attr("pointer-events", "none") .attr("opacity", showAllLabels ? 1 : 0) .text(d => d.id); node.append("title").text(d => `${d.id}\nCluster: ${clusterId}\nTree neighbors: ${d.treeDegree}\n` + `Qualifying graph neighbors: ${d.degree}` ); function highlightNeighborhood(event, selected) { const neighbors = adjacency.get(selected.id); node.attr("opacity", d => d.id === selected.id || neighbors.has(d.id) ? 1 : 0.15) .attr("fill", d => d.id === selected.id ? "#fed7aa" : "#ffffff") .attr("stroke", d => d.id === selected.id ? "#f97316" : "#238b45"); label.attr("opacity", d => d.id === selected.id || neighbors.has(d.id) ? 1 : 0); link.attr("stroke-opacity", d => nodeId(d.source) === selected.id || nodeId(d.target) === selected.id ? 1 : 0.07 ); } function restore() { node.attr("opacity", 1).attr("fill", "#ffffff").attr("stroke", "#238b45"); label.attr("opacity", showAllLabels ? 1 : 0); link.attr("stroke-opacity", 0.72); } function ticked() { link.attr("x1", d => d.source.x).attr("y1", d => d.source.y) .attr("x2", d => d.target.x).attr("y2", d => d.target.y); node.attr("cx", d => d.x).attr("cy", d => d.y); label.attr("x", d => d.x).attr("y", d => d.y); } function dragstarted(event) { if (!event.active) simulation.alphaTarget(0.3).restart(); event.subject.fx = event.subject.x; event.subject.fy = event.subject.y; } function dragged(event) { event.subject.fx = event.x; event.subject.fy = event.y; } function dragended(event) { if (!event.active) simulation.alphaTarget(0); event.subject.fx = null; event.subject.fy = null; } function nodeId(value) { return String(value.id ?? value); } function format(value, digits = 2) { return Number(value).toLocaleString(undefined, {maximumFractionDigits: digits}); } invalidation.then(() => simulation.stop()); return svg.node(); } 33:[{"id":"cc25f6f4e601d3e3f28f58b32b7768388ebfab2a0a1d2fdedccf06f2c92a3a118c4435b5226b12b592c9ba24bdf28ecd3a292512a4c924e67087e6e9c1023006","href":"https://static.observableusercontent.com/files/cc25f6f4e601d3e3f28f58b32b7768388ebfab2a0a1d2fdedccf06f2c92a3a118c4435b5226b12b592c9ba24bdf28ecd3a292512a4c924e67087e6e9c1023006","name":"graph@2.json","type":"application/json","lastModified":1788131085555.253,"size":1815068},{"id":"31d904f6e21d42d4963ece9c8cc4fbd75efcbdc404bf511bc79906f0a1be68b5a01e935f65123670ed04e35ca8cae3c2b943f82bf8db49c5a67c85cbb58db052","href":"https://static.observableusercontent.com/files/31d904f6e21d42d4963ece9c8cc4fbd75efcbdc404bf511bc79906f0a1be68b5a01e935f65123670ed04e35ca8cae3c2b943f82bf8db49c5a67c85cbb58db052","name":"miserables.json","type":"application/octet-stream","lastModified":1787230547024.651,"size":18844},{"id":"b212d17c4e02d5ab0b5420f1b8a824f972188d4a519ea2b516d1713688bbc83eea2a2649dd1f021f65756ef8c86c8b65ddccc69fb81614481b9d46b256112538","href":"https://static.observableusercontent.com/files/b212d17c4e02d5ab0b5420f1b8a824f972188d4a519ea2b516d1713688bbc83eea2a2649dd1f021f65756ef8c86c8b65ddccc69fb81614481b9d46b256112538","name":"upgma_tree.json","type":"application/json","lastModified":1787230548521.632,"size":444644},{"id":"8533b8248368e7ec8fd6f44285c9fdb963d1691243f9a20153309ddc47d6fee8ccd7bf20cf0cf6eb8f01dcf773478058ea2697cb706ff66a19687e1ed6501a59","href":"https://static.observableusercontent.com/files/8533b8248368e7ec8fd6f44285c9fdb963d1691243f9a20153309ddc47d6fee8ccd7bf20cf0cf6eb8f01dcf773478058ea2697cb706ff66a19687e1ed6501a59","name":"ward_cluster_graph@1.json","type":"application/json","lastModified":1787230549105.757,"size":978572},{"id":"81d491af532503d9309b16ca3d89ce00df290b6b7d4eea52a563ec7c8f00e835332f891f9c2d9e033e6a4c5fe2a5198c52185da820b705a6dd7ef2b77865dd3e","href":"https://static.observableusercontent.com/files/81d491af532503d9309b16ca3d89ce00df290b6b7d4eea52a563ec7c8f00e835332f891f9c2d9e033e6a4c5fe2a5198c52185da820b705a6dd7ef2b77865dd3e","name":"graph.json","type":"application/json","lastModified":1787530200026.65,"size":1033},{"id":"f3b5f92ede23087ede364b2a58853a3bd8a2651f7195c095be5329e35c58a4d055f7633084272bb30fe10e486ce38b2b3c36a1a5526933b60f4e8f0220851ba2","href":"https://static.observableusercontent.com/files/f3b5f92ede23087ede364b2a58853a3bd8a2651f7195c095be5329e35c58a4d055f7633084272bb30fe10e486ce38b2b3c36a1a5526933b60f4e8f0220851ba2","name":"graph_40215.json","type":"application/json","lastModified":1787532057228.46,"size":29675},{"id":"0d385d4f5bd7c6cfe7bc4b908965b745988fe6a31a4b4a01811bf96b319affe7178b005f7f19d03cd6ecbcbebbedc5db13b6c17ae843d66be85649d9d644e68a","href":"https://static.observableusercontent.com/files/0d385d4f5bd7c6cfe7bc4b908965b745988fe6a31a4b4a01811bf96b319affe7178b005f7f19d03cd6ecbcbebbedc5db13b6c17ae843d66be85649d9d644e68a","name":"graph_299767.json","type":"application/json","lastModified":1787533449418.342,"size":73130},{"id":"88b004bd512ad030fb2a7a20032e09d4acbc4e806240e00b4ee2bd76f8ac5691399c25dd1f3e400da94d875156e8261024745089570347933895ca3fb0dbbf37","href":"https://static.observableusercontent.com/files/88b004bd512ad030fb2a7a20032e09d4acbc4e806240e00b4ee2bd76f8ac5691399c25dd1f3e400da94d875156e8261024745089570347933895ca3fb0dbbf37","name":"graph_48296.json","type":"application/json","lastModified":1787534070569.18,"size":113285},{"id":"b64c83ddac3d6dcfaf06feed4f53a64e262c8cdf5bd269bfe27d7d7702a604075fbeb4533e1a8407031d6cda67752fefd6ed24201c98687a121a496cf81e7e96","href":"https://static.observableusercontent.com/files/b64c83ddac3d6dcfaf06feed4f53a64e262c8cdf5bd269bfe27d7d7702a604075fbeb4533e1a8407031d6cda67752fefd6ed24201c98687a121a496cf81e7e96","name":"graph_550.json","type":"application/json","lastModified":1787533666687.721,"size":76637},{"id":"088bda8d676d04314716b680f9beb53f386b863bad0c60db158eb2f5604b4c756540c8ea032cc7c87efe3850135484f028da8726f17f76d2ba663ca9523c96b5","href":"https://static.observableusercontent.com/files/088bda8d676d04314716b680f9beb53f386b863bad0c60db158eb2f5604b4c756540c8ea032cc7c87efe3850135484f028da8726f17f76d2ba663ca9523c96b5","name":"graph_208224.json","type":"application/json","lastModified":1787534850941.062,"size":96937},{"id":"8a41cbd0810e871afb305cbe722a6b7d1b0661d7da4c23c8f1e99493b19b9a7c0e5aa9a290f4a919b9253da5e2c3018b31e1f913bf6d4e88702a59a981422c81","href":"https://static.observableusercontent.com/files/8a41cbd0810e871afb305cbe722a6b7d1b0661d7da4c23c8f1e99493b19b9a7c0e5aa9a290f4a919b9253da5e2c3018b31e1f913bf6d4e88702a59a981422c81","name":"graph_1314.json","type":"application/json","lastModified":1787535113093.778,"size":78004},{"id":"17a8913aadc183f5fe781731f49633a9323f127ee0dd66999555d8c2056689ad96afb4aba9004313005c4cd9272333743f93a7026ee71ad2ed99c226ee5709de","href":"https://static.observableusercontent.com/files/17a8913aadc183f5fe781731f49633a9323f127ee0dd66999555d8c2056689ad96afb4aba9004313005c4cd9272333743f93a7026ee71ad2ed99c226ee5709de","name":"graph@1.json","type":"application/json","lastModified":1787567572754.291,"size":457786}] 2f:{"id":"8c5a4101949fddde","slug":null,"title":"Force-directed graph","thumbnail":"928005a8449435b5c249dc8f230df3b6bb9598e5b3ff7a3041a8b6b7eedadac8","access_level":"public","create_time":"$D2026-08-20T12:55:47.024Z","update_time":"$D2026-09-11T09:52:36.028Z","view_time":null,"first_public_time":"$D2026-08-20T12:55:47.024Z","has_unpublished_edits":null,"fork":{"id":"2ae6ac9bd33574c4","slug":"force-directed-graph/2","title":"Force-directed graph","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":1,"starred":false,"owner":{"type":"team","id":"886f7cc9c73275fe","login":"hurrarah-hamid-ws","name":"Hurrarah Hamid's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/6053e3c1d41e1119b804575a20f0ad241fc27d82223be567d9bc6ab3755b6719","tier":"starter_2024"},"version":240,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0107f625444b6bbc","login":"hurrarah-hamid","name":"Hurrarah Hamid","avatar_url":"https://avatars-next.observableusercontent.com/568bb75adb75e87704f93455e5fbaaf5963a5b519bd50cda687ebb6b71abde7d","tier":null}],"members":[{"type":"individual","id":"0107f625444b6bbc","login":"hurrarah-hamid","name":"Hurrarah Hamid","avatar_url":"https://avatars-next.observableusercontent.com/568bb75adb75e87704f93455e5fbaaf5963a5b519bd50cda687ebb6b71abde7d","tier":null,"role":"editor"},{"type":"team","id":"886f7cc9c73275fe","login":"hurrarah-hamid-ws","name":"Hurrarah Hamid's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/6053e3c1d41e1119b804575a20f0ad241fc27d82223be567d9bc6ab3755b6719","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Force-directed graph","cells":[{"id":1,"value":"

Force-directed graph

D3 › Gallery

\n\n# Force-directed graph\n\nThis network of character co-occurence in _Les Misérables_ is positioned by simulated forces using [d3-force](https://d3js.org/d3-force). See also a [disconnected graph](/@d3/disjoint-force-directed-graph/2), and compare to [WebCoLa](/@mbostock/hello-cola).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":209,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"data = FileAttachment(\"562.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"