31:T57f,viewof inputLcfCode = { let defaultCode = lcfCodes.find( (t) => t.name === "Truncated dodecahedral graph" ).code; if (this) { let currentValue = this.querySelectorAll("textarea")[0].value; // because preset is a collection of inputs, check if the value will change to determine which input value to use if (preset.random != "" && preset.random != currentValue) { defaultCode = preset.random; } else if (preset.lcf != "") { defaultCode = preset.lcf.code; } } else if (params.lcfCode) { defaultCode = params.lcfCode; } let ta = Textarea({ value: defaultCode, label: md`[LCF Notation](https://en.wikipedia.org/wiki/LCF_notation)` }); let t = textScroller(ta, {}); t.querySelector("div").append( html`

` ); t.querySelector("div").append( html`

` ); let parse = (v) => { let info = ""; let error = ""; try { let lcfObject = lcf.parse(ta.value); info = `${lcfObject.numVertices} Vertices & ${lcfObject.edges.length} Edges`; } catch (e) { error = e; } t.querySelector("div.error").innerHTML = error; t.querySelector("div.lcf-info").innerHTML = info; }; t.oninput = () => { parse(t.value); }; parse(t.value); return t; }32:T421,## Gallery - [Axle](?lcf_code=[-48,-32,3,14,16,-37,-42,48]22&layout=force&animation=0) - [Eight](?lcf_code=[25,50,75,100]100&layout=force&animation=0) - [Fibonacci](?lcf_code=[0,1,1,2,3,5,8,13,21,34,55,89,144,233,377,610,987,1597,2584,4181,6765,10946,17711,28657,46368,75025,121393,196418,317811,514229,832040,1346269,2178309,3524578,5702887,9227465,14930352,24157817,39088169]43&layout=graph&animation=0) - [Florets](?lcf_code=[10,9,8,7,6,5,4,3,2,1]10&layout=force&animation=0) - [Star](?lcf_code=[6,10]5&layout=force&animation=0) - [Mosaic](?lcf_code=[500]1000&layout=graph&animation=0) - [Spiral](?lcf_code=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100]4&layout=graph&animation=0) - [Sun](?lcf_code=[-48,-45]21&layout=force&animation=0) - [Pods](?lcf_code=[3553353424234324324]1022&layout=force&animation=0)33:T1be5,graph = ({ init: function () { this.animationSpeed = inputGraph.animation; this.layout = inputGraph.layout; try { this.lcfCodeObject = lcf.parse(inputLcfCode); } catch (e) { this.lcfCodeObject = lcf.parse("[0]"); } this.height = config.height; this.width = width; this.rcx = this.width / 2; this.rcy = this.height / 2; this.radius = 240; this.numEdges = 0; this.numVertices = 0; this.colors = d3.schemeCategory10; this.nodes = []; // the node with index 0 is fixed to the center and has a high charge this.links = []; this.lcfStepsAndRepeats = []; this.lcfEdges = null; this.charge = 100; this.interval = null; this.currentFrame = 0; this.freezeFrameAt = -1; this.svg = null; const xmlns = "http://www.w3.org/2000/svg"; const svge = document.createElementNS(xmlns, "svg"); this.svg = d3v3 .select(svge) .attr("width", width) .attr("height", this.height); this.force = d3v3.layout .force() .charge((d, i) => (i == 0 ? 0 : -this.charge)) .size([this.rcx * 2, this.height]); invalidation.then(() => this.force.stop()); this.force.on("tick", (e) => { if (this.currentFrame == this.freezeFrameAt) { this.force.stop(); return; } this.svg .selectAll("circle") .attr("cx", (d) => d.x) .attr("cy", (d) => d.y); this.svg .selectAll("line.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); this.currentFrame += 1; }); }, isFrozen: function () { return this.freezeFrameAt > 0; }, resize: function (height, width) { this.svg.attr("height", height).attr("width", width); this.height = height; this.width = width; this.rcx = width / 2 + 110; this.rcy = height / 2; this.force.size([this.rcx * 2, height]); this.redraw(); }, prevFrame: function () { return this.currentFrame - 1; }, nextFrame: function () { return this.currentFrame + 1; }, draw: function () { let lcfCodeObject = this.lcfCodeObject; let numVertices = lcfCodeObject.numVertices; let stepsArray = lcfCodeObject.steps; var numRepeats = lcfCodeObject.numRepeats; var lcfEdges = lcfCodeObject.edges; this.lcfCodeObject = lcfCodeObject; if (numVertices + lcfEdges.length > 50000) { if ( !confirm( lcfEdges.length + " edges and " + numVertices + " vertices will be drawn. Continue?" ) ) { return; } } this.numVertices = numVertices; this.numEdges = lcfEdges.length; clearInterval(this.interval); // magic vertex this.nodes = [{ fixed: true, x: this.rcx, y: this.rcy }]; // arrange nodes in a circle this.nodes = this.nodes.concat( d3v3.range(numVertices).map((d, i) => { return { x: this.rcx + this.radius * Math.cos((i * 2 * Math.PI) / numVertices - Math.PI / 2), y: this.rcy + this.radius * Math.sin((i * 2 * Math.PI) / numVertices - Math.PI / 2) }; }) ); this.links = []; this.currentVertex = 0; this.currentVertexOffset = 0; this.force.nodes(this.nodes); this.force.start(); if (this.animationSpeed == 0) { this.svg.selectAll(".vertex").style("fill", this.colors[0]); var nodes = this.nodes.slice(1); lcfEdges.forEach((edge, i) => { this.links.push({ source: nodes[edge.source], target: nodes[edge.target], hpath: edge.hpath }); }); this.drawLines(); this.force.links(this.links); this.force.start(); } else { // hamiltonian path this.nodes.slice(1).forEach((target, i) => { this.links.push({ source: this.nodes[i == this.nodes.length - 2 ? 1 : i + 2], target: target, linkDistance: 0, hpath: true }); }); this.svg.selectAll(".vertex").style("fill", "white"); this.drawLines(); this.interval = setTimeout(() => { this.animateLcf(); }, this.animationSpeed); } // drawn last so it has the highest z-index this.drawCircles(); if (this.layout != "force") { this.force.stop(); } }, animateLcf: function () { let numVertices = this.lcfCodeObject.numVertices; let stepsArray = this.lcfCodeObject.steps; var stepInstruction = stepsArray[this.currentVertex % stepsArray.length]; this.currentStep = this.currentVertex + this.currentVertexOffset - this.numVertices * Math.floor( (this.currentVertex + this.currentVertexOffset) / this.numVertices ); var circles = this.svg.selectAll(".vertex"); if (this.currentVertexOffset == 0) { circles .filter((d, i) => this.currentVertex == i) .style("fill", this.colors[2]); circles .filter((d, i) => this.currentVertex > i) .style("fill", this.colors[0]); circles.filter((d, i) => this.currentVertex < i).style("fill", "white"); this.currentVertexOffset += stepInstruction > 0 ? 1 : -1; } else if (this.currentVertexOffset != stepInstruction) { circles .filter((d, i) => this.currentStep == i) .style("fill", this.colors[1]); this.currentVertexOffset += stepInstruction > 0 ? 1 : -1; } else { circles .filter((d, i) => this.currentStep == i) .style("fill", this.colors[1]); this.links.push({ source: this.nodes.slice(1)[this.currentVertex], target: this.nodes.slice(1)[this.currentStep] }); this.drawLines(); this.currentVertex++; this.currentVertexOffset = 0; } if (this.currentVertex != numVertices) { this.interval = setTimeout(() => { this.animateLcf(); }, this.animationSpeed); } else { this.interval = null; this.svg.selectAll(".vertex").style("fill", this.colors[0]); } this.force.links(this.links); if (this.layout == "force") { this.force.start(); } }, drawCircles: function () { var circles = this.svg.selectAll("circle").data(this.nodes); circles.enter().append("svg:circle"); circles .attr("r", (d, i) => (i == 0 ? 0 : 5)) .attr("class", (d, i) => (i == 0 ? "magic-vertex" : "vertex")) .attr("cx", (d) => d.x) .attr("cy", (d) => d.y); // .call(this.force.drag); circles.exit().remove(); }, drawLines: function () { let lines = this.svg.selectAll("line.link").data(this.links); lines.enter().append("svg:line"); lines .attr("class", "link") .style("stroke", (d) => d.hpath && options.includes("hpath") ? "red" : "" ) .attr("x1", (d) => d.source.x) .attr("y1", (d) => d.source.y) .attr("x2", (d) => d.target.x) .attr("y2", (d) => d.target.y); lines.exit().remove(); } })34:T98f,lcf = ({ lcfCode: null, init: function () { this.steps = []; this.edges = []; this.numVertices = 0; this.numRepeats = 0; }, random: function () { function randomBetween(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } var min_step = -100; var max_step = 100; var num_steps = randomBetween(1, 50); var max_repeats = 25; var arr = []; for (let i = 0; i < num_steps; i++) { arr.push(randomBetween(min_step, max_step)); } return this.parse( "[" + arr.join(",") + "]" + randomBetween(1, max_repeats) ); }, parse: function (lcfCode) { this.init(); this.lcfCode = lcfCode; this.lcfCode = this.lcfCode.replace(/ /g, "").replace(/−/g, "-"); // TODO validate repeats and steps also match repeats var match = this.lcfCode.match(/\[(.*?)\]/); if (match == null) throw "Invalid Syntax. Must include square brackets."; if (match[1] != "") { this.steps = match[1] .split(",") .filter(Number) .map(function (e) { return +e; }); } else { throw "Must have at least one step."; } this.numRepeats = parseInt(this.lcfCode.split("]")[1]) || 0; if (this.numRepeats < 0) throw "Repeats must be positive."; this.numVertices = this.steps.length * (this.numRepeats || 1); var numSteps = this.steps.length; var dupCache = {}; for (var vertex = 0; vertex < this.numVertices; vertex++) { var source = vertex % this.numVertices; var target = (this.numVertices + vertex + this.steps[vertex % numSteps]) % this.numVertices; var hp_target = (source + 1) % this.numVertices; if (target < 0) target = this.numVertices + target; // hamiltonian path if ( !dupCache[source + "," + hp_target] && !dupCache[hp_target + "," + source] ) { this.edges.push({ source: source, target: hp_target, hpath: true }); dupCache[source + "," + hp_target] = 1; } if ( !dupCache[source + "," + target] && !dupCache[target + "," + source] ) { this.edges.push({ source: source, target: target }); dupCache[source + "," + target] = 1; } } if (this.numVertices + this.edges.length > config.maxElements) { throw "Too many Vertices and Edges, increase Max Elements config to continue"; } return this; } })35:Tcd2,// from https://en.wikipedia.org/wiki/LCF_notation lcfCodes = [ { code: "[2]4", name: "Tetrahedral graph" }, { code: "[3]6", name: "Utility graph" }, { code: "[3,-3]4", name: "Cubical graph" }, { code: "[4]8", name: "Wagner graph" }, { code: "[6,4,-4]4", name: "Bidiakis cube" }, { code: "[5,-5]6", name: "Franklin graph" }, { code: "[-5,-2,-4,2,5,-2,2,5,-2,-5,4,2]", name: "Frucht graph" }, { code: "[2,6,-2]4", name: "Truncated tetrahedral graph" }, { code: "[5,-5]7", name: "Heawood graph" }, { code: "[5,-5]8", name: "Mobius-Kantor graph" }, { code: "[5,7,-7,7,-7,-5]3", name: "Pappus graph" }, { code: "[5,-5,9,-9]5", name: "Desargues graph" }, { code: "[10,7,4,-4,-7,10,-4,7,-7,4]2", name: "Dodecahedral graph" }, { code: "[12,7,-7]8", name: "McGee graph" }, { code: "[2,9,-2,2,-9,-2]4", name: "Truncated cubical graph" }, { code: "[3,-7,7,-3]6", name: "Truncated octahedral graph" }, { code: "[5,-9,7,-7,9,-5]4", name: "Nauru graph" }, { code: "[-7,7]13", name: "F26A graph" }, { code: "[-13,-9,7,-7,9,13]5", name: "Tutte–Coxeter graph" }, { code: "[5,-5,13,-13]8", name: "Dyck graph" }, { code: "[-25,7,-7,13,-13,25]9", name: "Gray graph" }, { code: "[30,-2,2,21,-2,2,12,-2,2,-12,-2,2,-21,-2,2,30,-2,2,-12,-2,2,21,-2,2,-21,-2,2,12,-2,2]2", name: "Truncated dodecahedral graph" }, { code: "[-29,-19,-13,13,21,-27,27,33,-13,13,19,-21,-33,29]5", name: "Harries graph" }, { code: "[9,25,31,-17,17,33,9,-29,-15,-9,9,25,-25,29,17,-9,9,-27,35,-9,9,-17,21,27,-29,-9,-25,13,19,-9,-33,-17,19,-31,27,11,-25,29,-33,13,-13,21,-29,-21,25,9,-11,-19,29,9,-27,-19,-13,-35,-9,9,17,25,-9,9,27,-27,-21,15,-9,29,-29,33,-9,-25]", name: "Harries–Wong graph" }, { code: "[-9,-25,-19,29,13,35,-13,-29,19,25,9,-29,29,17,33,21,9,-13,-31,-9,25,17,9,-31,27,-9,17,-19,-29,27,-17,-9,-29,33,-25,25,-21,17,-17,29,35,-29,17,-17,21,-25,25,-33,29,9,17,-27,29,19,-17,9,-27,31,-9,-17,-25,9,31,13,-9,-21,-33,-17,-29,29]", name: "Balaban 10-cage" }, { code: "[17,-9,37,-37,9,-17]15", name: "Foster graph" }, { code: "[16,24,-38,17,34,48,-19,41,-35,47,-20,34,-36,21,14,48,-16,-36,-43,28,-17,21,29,-43,46,-24,28,-38,-14,-50,-45,21,8,27,-21,20,-37,39,-34,-44,-8,38,-21,25,15,-34,18,-28,-41,36,8,-29,-21,-48,-28,-20,-47,14,-8,-15,-27,38,24,-48,-18,25,38,31,-25,24,-46,-14,28,11,21,35,-39,43,36,-38,14,50,43,36,-11,-36,-24,45,8,19,-25,38,20,-24,-14,-21,-8,44,-31,-38,-28,37]", name: "Biggs-Smith graph" }, { code: "[44,26,-47,-15,35,-39,11,-27,38,-37,43,14,28,51,-29,-16,41,-11,-26,15,22,-51,-35,36,52,-14,-33,-26,-46,52,26,16,43,33,-15,17,-53,23,-42,-35,-28,30,-22,45,-44,16,-38,-16,50,-55,20,28,-17,-43,47,34,-26,-41,11,-36,-23,-16,41,17,-51,26,-33,47,17,-11,-20,-30,21,29,36,-43,-52,10,39,-28,-17,-52,51,26,37,-17,10,-10,-45,-34,17,-26,27,-21,46,53,-10,29,-50,35,15,-47,-29,-41,26,33,55,-17,42,-26,-36,16]", name: "Balaban 11-cage" }, { code: "[47,-23,-31,39,25,-21,-31,-41,25,15,29,-41,-19,15,-49,33,39,-35,-21,17,-33,49,41,31,-15,-29,41,31,-15,-25,21,31,-51,-25,23,9,-17,51,35,-29,21,-51,-39,33,-9,-51,51,-47,-33,19,51,-21,29,21,-31,-39]2", name: "Ljubljana graph" }, { code: "[17,27,-13,-59,-35,35,-11,13,-53,53,-27,21,57,11,-21,-57,59,-17]7", name: "Tutte 12-cage" } ]36:[] 2f:{"title":"Hamiltonian Graph Builder","cells":[{"id":0,"value":"# Hamiltonian Graph Builder\nUse [LCF notation](https://en.wikipedia.org/wiki/LCF_notation) to create cubic [Hamiltonian graphs](https://en.wikipedia.org/wiki/Hamiltonian_path).","pinned":false,"hidden":false,"mode":"md"},{"id":36,"value":"{\n // reload the graph when these values change\n options;\n preset;\n inputGraph;\n\n let g = graph;\n g.init();\n g.draw();\n return g.svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"_highlight numbers in the LCF notation and scroll to quickly modify the graph_","pinned":false,"hidden":false,"mode":"md"},{"id":32,"value":"viewof preset = Inputs.form({\n lcf: Select([\"\"].concat(lcfCodes), {\n format: (d) => d.name,\n label: \"Presets\"\n }),\n random: Inputs.button(\"Random\", {\n value: \"\",\n reduce: () => {\n return lcf.random().lcfCode;\n }\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"viewof inputGraph = Inputs.form({\n layout: Radio(\n new Map([\n [\"Force\", \"force\"],\n [\"Graph\", \"graph\"]\n ]),\n {\n label: \"Layout\",\n value: params.layout || \"force\"\n }\n ),\n animation: Radio(\n new Map([\n [\"None\", 0],\n [\"Fast\", 1],\n [\"Slow\", 100]\n ]),\n {\n label: \"Animation\",\n value: params.animation == -1 ? 1 : params.animation\n }\n )\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"viewof options = {\n let o = [[\"hpath\", \"hpath\"]];\n let selected = [];\n if (params.hpath) {\n selected.push(\"hpath\");\n }\n\n return Checkbox(new Map(o), {\n label: \"Options\",\n value: selected,\n format: (x) => {\n if (x[0] == \"hpath\") {\n return html`Highlight Hamiltonian Path`;\n } else {\n return x;\n }\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"{\n let pl =\n document.baseURI.split(\"?\")[0] +\n `?lcf_code=${inputLcfCode}&layout=${inputGraph.layout}&animation=${\n inputGraph.animation\n }&${options.join(\"&\")}`;\n\n return html`Permalink`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":59,"value":"md`## Configuration`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"viewof config = Inputs.form({\n height: Inputs.text({ label: \"Height\", value: 500 }),\n maxElements: Inputs.text({ label: \"Max Elements\", value: 5000 })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"md`## Objects`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"params = {\n let params = new URLSearchParams(location.search);\n\n let lc = params.get(\"lcf_code\") ?? \"\";\n\n let animation = params.get(\"animation\") ?? -1;\n\n let layout = params.get(\"layout\") ?? \"\";\n\n return {\n lcfCode: lc.substr(0, 1000).replaceAll(/[^0-9\\[\\]\\s,-]?/g, \"\"),\n animation: parseInt(animation),\n layout: layout.substr(0, 5).replaceAll(/[^a-z]?/g, \"\") ?? null,\n hpath: params.get(\"hpath\") !== null ? true : false\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"md`## Constants`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":14,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"md`## Packages`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"import { Radio, Select, Text, Textarea, Checkbox } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"d3v3 = require(\"d3@v3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"import { textScroller } from \"@christophermanning/text-scroller\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"## Changelog\n- 2024 Migrated to Observable\n- 2012 Created","pinned":false,"hidden":false,"mode":"md"}],"files":"$W36","stdlib":"1","titling":"auto"}