2a:null 2b:["$","title",null,{"children":"Geneagrapher | David Alber | Observable"}] 30:T558,--- ## FAQ ### How can I save the graph? You can export an SVG or PNG file of the resulting graph by hovering over the graph and clicking the three dots button that appears.

Graph example with location of menu button annotated

### What is the maximum graph size? This tool will retrieve a maximum of 250 records. That limit can be easily reached if you traverse descendants. If you want the ability to retrieve more records, check out [Geneagrapher](https://github.com/davidalber/geneagrapher). ### How does this work? The notebook makes a request to a backend service. The backend service then makes requests to the Math Genealogy Project and constructs the graph. ### A record in my graph disagrees with the Math Genealogy Project's website. How is this possible? The service that this notebook uses to construct the graph caches records that it retrieves from the Math Genealogy Project. Although existing records do not change often, it does happen, and when it happens there may be inconsistency between the cache and the Math Genealogy Project until the cached record expires. ### How can I report a bug? Thank you for taking the time to help improve this notebook. You can file an issue in [this repository](https://github.com/davidalber/geneagrapher-notebook-feedback).31:T4bf,32:Tc23,StartNodeInput = ({value = 0} = {}) => { const inputName = "start-node"; const addRadio = (parent, label, name, value, getAdvisors, getDescendants, checked) => { const radioInput = document.createElement("input"); const id = name + "-" + value; radioInput.type = "radio"; radioInput.name = name; radioInput.id = id; radioInput.value = value; radioInput.getAdvisors = getAdvisors; radioInput.getDescendants = getDescendants; radioInput.checked = checked || false; parent.appendChild(radioInput); const labelEl = document.createElement('label'); labelEl.htmlFor = id; labelEl.textContent = label; parent.appendChild(labelEl); }; const addInput = (inputNum) => { let inputs = document.getElementById("ggrapher-inputs"); let newInput = document.createElement("div"); newInput.className = inputName; inputs.appendChild(newInput); const idInput = document.createElement("input"); idInput.name = "recordId"; idInput.type = "text"; idInput.inputMode = "numeric"; idInput.pattern = `\\d*`; idInput.oninput = () => idInput.setCustomValidity(""); idInput.oninvalid = () => idInput.setCustomValidity("Digits only, please."); idInput.placeholder = "Mathematician ID"; newInput.appendChild(idInput); addRadio(newInput, "Advisors", `direction-${inputNum}`, "a", true, false, true); addRadio(newInput, "Descendants", `direction-${inputNum}`, "d", false, true); addRadio(newInput, "Advisors & Descendants", `direction-${inputNum}`, "ad", true, true); let removeButton = document.createElement("button"); removeButton.className = "remove-start-node"; removeButton.onclick = (e) => { inputs.removeChild(e.target.parentNode); node.dispatchEvent(new Event("input", { bubbles: true })); }; newInput.appendChild(removeButton); removeButton.appendChild(document.createTextNode("−")); }; const buildPayload = () => { let ret = [] const inputs = document.getElementsByClassName(inputName); for (let i = 0; i < inputs.length; ++i) { const input = inputs[i]; const inputChildren = input.childNodes; const record = {}; for (let j = 0; j < inputChildren.length; ++j) { const child = inputChildren[j]; if (child.name == "recordId") { child.reportValidity(); record.recordId = Number(child.value); } else if (child.type == "radio" && child.checked) { record.getAdvisors = child.getAdvisors; record.getDescendants = child.getDescendants; } } ret.push(record) } return ret; }; let inputNum = 0; setTimeout(addInput, 10, inputNum++); const node = htl.html`

Configure Graph

Configure starting records below and click "Build Graph".

`; Object.defineProperty(node, "value", { get() { return buildPayload(); } }); return node; }33:T800,socket = { const socket = new reconnecting_websocket.default("wss://ggrphr.davidalber.net"); const makeDotNodes = sortedNodes => { return sortedNodes.map(([id, record]) => { let label = record.name; if (record.institution || record.year) { const labelYear = record.year ? `(${record.year})` : ""; const secondaryLabel = [record.institution, labelYear].filter(v => v).join(" "); label += `\\n${secondaryLabel}`; } return ` ${id} [label="${label}"];`; }) .join("\n"); }; const makeDotEdges = (sortedNodes, nodes) => { return sortedNodes.map(([id, record]) => { return [...new Set(record.advisors)].map((aid) => { return nodes[aid] !== undefined ? ` ${aid} -> ${id}` : ``; }) .filter(v => v) .join(";\n"); }) .filter(v => v) .join(";\n"); }; socket.onmessage = (event) => { // Response handler. const response = JSON.parse(event.data); const payload = response.payload; if (response.kind === "graph") { mutable requesting = false; // Reshape the graph data to be consumed by the visualization. const nodes = payload.nodes; const nodesSortedById = Object.entries(nodes).sort((a, b) => (a[1].id) - (b[1].id)); const nodesSortedByYearName = Object.entries(nodes).sort((a, b) => { const yearDiff = (a[1].year || -10000) - (b[1].year || -10000); return yearDiff !== 0 ? yearDiff : a[1].name.localeCompare(b[1].name); }); const dotNodes = makeDotNodes(nodesSortedById); const dotEdges = makeDotEdges(nodesSortedByYearName, nodes); mutable dotGraph = `digraph { graph [ordering="out"]; node [shape=plaintext]; edge [style=bold]; ${makeDotNodes(nodesSortedById)}${dotEdges ? ` ${dotEdges};` : ``} }`; } else if (response.kind === "progress") { progress.value = 100 * payload.done / (payload.queued + payload.fetching + payload.done); } }; return socket; }34:[{"id":"6fe23ee9250faeff5c5a44c6eae732ddc87376782e54e7000c52c6bb2e46453c850bcef6c38ec00f53cbd652b132af67db2d0740661c626bcda795470162f51e","href":"https://static.observableusercontent.com/files/6fe23ee9250faeff5c5a44c6eae732ddc87376782e54e7000c52c6bb2e46453c850bcef6c38ec00f53cbd652b132af67db2d0740661c626bcda795470162f51e","name":"menu-download.png","type":"image/png","lastModified":1681635198919.145,"size":144673}] 2e:{"id":"d877b9242bf14135","slug":"geneagrapher","title":"Geneagrapher","thumbnail":"156b04235ab209d1efc7605d9fb8e78ff90d859b72d137db9ea67ee3cbd97ddd","access_level":"public","create_time":"$D2023-02-22T00:41:42.152Z","update_time":"$D2023-04-20T03:41:27.031Z","view_time":null,"first_public_time":"$D2023-02-22T00:41:42.152Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"7eccd26435b01816","login":"davidalber","name":"David Alber","avatar_url":"https://avatars-next.observableusercontent.com/e675657fcb1e85dd9075d4280f8ea1ac6492e6e2c68dd21bfff60d184e7acbd1","tier":"starter_2024"},"version":1102,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8a266e090b937088","login":"davidalber","name":"David Alber","avatar_url":"https://avatars-next.observableusercontent.com/e675657fcb1e85dd9075d4280f8ea1ac6492e6e2c68dd21bfff60d184e7acbd1","tier":null}],"members":[{"type":"individual","id":"8a266e090b937088","login":"davidalber","name":"David Alber","avatar_url":"https://avatars-next.observableusercontent.com/e675657fcb1e85dd9075d4280f8ea1ac6492e6e2c68dd21bfff60d184e7acbd1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"title":"Geneagrapher","cells":[{"id":0,"value":"# Geneagrapher","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":741,"value":"This notebook creates graphs of mathematician academic genealogies using data from the [Mathematics Genealogy Project](https://www.mathgenealogy.org/) (MGP).\n\n## How to Build a Graph\n**tl;dr** If you want to quickly see an example, copy 18231 into the text field in the [Configure Graph section](https://observablehq.com/d/d877b9242bf14135#startNodes) and click the \"Build Graph\" button.\n\nTo build a graph, collect the IDs of the graph's seed records from the MGP. You also need to specify the directions the graph should traverse from the starting records.\n\nRecord IDs come from the MGP website. For example, the ID of Carl Gauß is 18231, which you can see at the end of the URL of the [Carl Gauß page](https://www.mathgenealogy.org/id.php?id=18231).\n\nThe output of the graph-building process is a graph visualization and the [Graphviz](https://graphviz.org/) DOT syntax that defines the graph.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":970,"value":"## Graph Output","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":935,"value":"graph = { return dotGraph ? dot`${dotGraph}` : md`⭐️ When you a build a graph, it will appear here. ⭐️` };","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":888,"value":"$${dotGraph ? viewof showDot : \"\"}\n${showDot ? \"If you want to create the graph using Graphviz, you can copy the DOT file content below.\" : \"\"}\n\n${showDot ? viewof copyDot : \"\"}\n```\n${showDot ? dotGraph : \"\"}\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":65,"value":"viewof startNodes = StartNodeInput()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":259,"value":"SubmitButton();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":763,"value":"Graph build progress:","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":274,"value":"progress = {\n const progress = html``;\n progress.value = 0;\n return progress;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1085,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":922,"value":"---\nℹ️ Everything below here are the logic cells that make the notebook work. The interactive cells and output are above.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":845,"value":"mutable dotGraph = \"\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":581,"value":"$31","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":896,"value":"viewof showDot = Inputs.toggle({label: \"Show DOT Content\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":63,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":255,"value":"SubmitButton = () => {\n return htl.html`

\n \n

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":223,"value":"function sendBuildGraphRequest(records) {\n mutable requesting = true;\n const payload = {kind: \"build-graph\", options: {maxRecords: 250, reportingCallback: true}, startNodes: records};\n socket.send(JSON.stringify(payload));\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":241,"value":"mutable requesting = false; // used to disable the submit button","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":24,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":420,"value":"mutable socketOpen = false;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":218,"value":"htl = require(\"htl@0.2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":220,"value":"html = htl.html","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":514,"value":"reconnecting_websocket = import(\"reconnecting-websocket\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1071,"value":"viewof copyDot = Inputs.button(\"Copy DOT Content to Clipboard\", {reduce: () => navigator.clipboard.writeText(dotGraph)})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 2f:"$2e:body"