2b:null 2c:["$","title",null,{"children":"Knowledge Graph | Gustavo Oliver | Observable"}] 31:Te89,chart = { var descendants = {} function compare(a, b) { return +b["depth"] - +a["depth"] } // build from left to right edges.filter(d => d["type"] !== "notebook").sort(compare).forEach(d => { if (d["type"] === "file" && !(d["from"] in descendants)) { const node = { id: d["to"], name: d["to"] } descendants[d["from"]] = { id: d["from"], name: d["from"], children: [node] } } else if (d["type"] === "file" && d["from"] in descendants) { const node = { id: d["to"], name: d["to"] } descendants[d["from"]]["children"].push(node) } else if (!(d["from"] in descendants) && d["to"] in descendants) { const node = descendants[d["to"]] descendants[d["from"]] = { id: d["from"], name: d["from"], children: [node] } delete descendants[d["to"]] } else if (d["from"] in descendants && d["to"] in descendants) { const node = descendants[d["to"]] descendants[d["from"]]["children"].push(node) delete descendants[d["to"]] } }) var hierarchy = { name: "concepts", children: Object.values(descendants) } const root = tree(hierarchy); var links = new Set() const grandchildren = root.descendants().slice(1).filter(x => !("children" in x["data"])) edges.filter(d => d["type"] === "notebook").forEach(d => { var l = {} l["source"] = grandchildren.filter(x => x["data"]["id"] == d["from"])[0] l["target"] = grandchildren.filter(x => x["data"]["id"] == d["to"])[0] l["type"] = "notebook" if (l["target"] && l["source"]) links.add(l) }) var links = [...links] let x0 = Infinity; let x1 = -x0; root.each(d => { if (d.x > x1) x1 = d.x; if (d.x < x0) x0 = d.x; }); const svg = d3.select(DOM.svg(width, x1 - x0 + root.dx * 2)) .style("width", "100%") .style("height", "auto"); const g = svg.append("g") .attr("font-family", "avenir") .attr("font-size", 10) .attr("transform", `translate(0,${root.dx - x0})`); const link = g.append("g") .attr("fill", "none") .attr("stroke", "#555") .attr("stroke-width", 1.5) .selectAll("path") .data(root.links().concat(links).filter(d => d.source.depth)) .enter().append("path") .attr("stroke-opacity", d => { if (d["type"] == "notebook") return 0.1 else return 0.4 }) .attr("d", d => { if (d["type"] == "notebook") return ` M${d.target.y},${d.target.x} C${d.source.y + root.dy / 2 + 300},${d.target.x} ${d.source.y + root.dy / 2 + 300},${d.source.x} ${d.source.y},${d.source.x} ` else return ` M${d.target.y},${d.target.x} C${d.source.y + root.dy / 2},${d.target.x} ${d.source.y + root.dy / 2},${d.source.x} ${d.source.y},${d.source.x} ` }); const node = g.append("g") .attr("stroke-linejoin", "round") .selectAll("a") .data(root.descendants().slice(1).reverse()) // remove parent and order by grandchildren .enter().append("a") .attr("transform", d => `translate(${d.y},${d.x})`); node.append("circle") .attr("fill", d => d.children ? "#555" : "#999") .attr("r", 2.5); node.filter(d => d.data.name).append("text") .attr("dy", "0.31em") .attr("x", d => d.children ? -6 : 6) .attr("text-anchor", d => d.children ? "end" : "start") .text(d => { const name = d.data.name, i = name.indexOf(","); return i > 0 ? name.slice(0, i) : name; }) .filter(d => d.children) .clone(true).lower() .attr("stroke", "white") .attr("stroke-width", 3); return svg.node(); }32:[] 2f:{"id":"b3aa8fc85ac0b902","slug":"knowledge-graph","title":"Knowledge Graph","thumbnail":"d5d322c798e2f5cee9e87f454345389671fbabc02fc867e8f2ac9cb505d7984c","access_level":"public","create_time":"$D2019-08-07T11:04:10.817Z","update_time":"$D2019-09-23T22:11:05.434Z","view_time":null,"first_public_time":"$D2019-08-07T19:47:30.086Z","fork":{"id":"e30422f7cf04330c","slug":"imagenet-hierarchy","title":"ImageNet Hierarchy","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":7,"starred":false,"owner":{"type":"team","id":"b548d09284ffde7b","login":"gstvolvr","name":"Gustavo Oliver","avatar_url":"https://avatars-next.observableusercontent.com/ce7a275c54e8863be324ce6aad52f3d555114893375b2a1b52a82ccaf2a03310","tier":"starter_2024"},"version":439,"publish_version":439,"role":null,"authored":false,"authors":[{"type":"individual","id":"41d77e1880692429","login":"gstvolvr","name":"Gustavo Oliver","avatar_url":"https://avatars-next.observableusercontent.com/ce7a275c54e8863be324ce6aad52f3d555114893375b2a1b52a82ccaf2a03310","tier":null}],"members":[{"type":"individual","id":"41d77e1880692429","login":"gstvolvr","name":"Gustavo Oliver","avatar_url":"https://avatars-next.observableusercontent.com/ce7a275c54e8863be324ce6aad52f3d555114893375b2a1b52a82ccaf2a03310","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":4,"collection":{"id":"7c0e4cbb725768dc","slug":"productivity","title":"Productivity","owner":{"id":"b548d09284ffde7b","login":"gstvolvr","name":"Gustavo Oliver"}},"type":"notebook","body":{"title":"Knowledge Graph","cells":[{"id":0,"value":"md`# Knowledge Graph\nIn June 2019 I started keeping track of the math/programming concepts that I run into day to day, and how they connect to each other — kind of like a personal wikipedia. Each leaf node has a corresponding Jupyter notebook where I summarize notes from different resources, and try to visualize and implement the concepts. Leaf nodes are linked when there is a relationship between the topics. \n\nI wrote a Python [program](https://github.com/gstvolvr/knowledge-graph) that crawls my repository of notebooks looking for hyperlinks between each.\n\ndisclaimer: this not an exhaustive list, just what I've had the chance to write about.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":36,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":179,"value":"edges = { \n var data = await d3.csv(\"https://gist.githubusercontent.com/gstvolvr/8f6bf986c1df9a070cae09597fe2bf83/raw/knowledge_graph.csv\")\n return data\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":63,"value":"tree = data => {\n const root = d3.hierarchy(data)\n .sort((a, b) => b.height - a.height\n || a.data.name.localeCompare(b.data.name));\n root.dx = 10;\n root.dy = width / (root.height + 2);\n return d3.cluster()\n .nodeSize([root.dx, root.dy])\n (root)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":131,"value":"width = 1000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"