2b:null 2c:["$","title",null,{"children":"Mystic Rose | Lao | Observable"}] 31:T632,viewof input = { const form = html``; let makeData = (n) => { let idNumber = 0 let data =({nodes: [],links:[]}) for(let i=0; i form.dispatchEvent(new CustomEvent("input")); // Safari form.value = makeData(form.vertices.value); // starting value form.oninput = event => { form.value = makeData(form.vertices.value); // update value }; return form; }32:Tae3,chart = { const svg = d3.select(DOM.svg(450, 450)) //.create("svg") .attr("viewBox", [-225 , -50 , 500, 500]) .style("overflow", "visible"); // lets you move points outside of svg box const simulation = d3.forceSimulation() .force("charge", d3.forceManyBody().strength(-10)) .force("link", d3.forceLink().id(d => d.id).distance(400)) .force("x", d3.forceX(0)) .force("y", d3.forceY(200)) .force("r", d3.forceRadial(200, 0, 200).strength(1.5)) .on("tick", ticked); let link = svg.append("g") .attr("stroke-width", 1.5) .selectAll("line"); let node = svg.append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle"); function ticked() { node.attr("cx", d => d.x) .attr("cy", d => d.y) 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); } // Terminate the force layout when this cell re-runs. invalidation.then(() => simulation.stop()); return Object.assign(svg.node(), { update({nodes, links}) { // Make a shallow copy to protect against mutation, while // recycling old nodes to preserve position and velocity. const old = new Map(node.data().map(d => [d.id, d])); nodes = nodes.map(d => Object.assign(old.get(d.id) || {}, d)); links = links.map(d => Object.assign(old.get() || {}, d)); node = node .data(nodes, d => d.id) .join(enter => enter.append("circle") .attr("fill-opacity", .7) .attr("r", 7) .attr("fill", d => '#B76E79')) .call(drag(simulation)); link = link .data(links, d => [d.source, d.target]) .join("line") .attr("stroke", 'LightPink') .attr("stroke-opacity",.5); simulation.nodes(nodes); simulation.force("link").links(links); simulation.alpha(.4).restart(); link // avoids flashing on update .attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y); } }); function drag(simulation) { function dragstarted(event) { if (!event.active) simulation.alphaTarget(0.4).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; } return d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); } }33:T487,Mystic roses are [complete graphs][1] with ${tex`n`} vertices and ${tex`n(n-1)/2`} edges. [Simplexes][2] can be projected onto 2D as mystic roses. The space of a mystic rose can represent the proportion of multiple variables, such as the [Dirichlet][3] distribution, where each vertex represents a categorical variable, and each point in the space represents the [barycentric][4] probabilities of variables (which sum to 100%). The discrete [categorical][6] and [multinomial][7] distributions, as well as the compound [Dirichlet-multinomial][8] distribution, also have sample spaces that can be depicted as mystic roses. [1]:https://en.wikipedia.org/wiki/Complete_graph#Examples [2]:https://en.wikipedia.org/wiki/Simplex#Symmetric_graphs_of_regular_simplices [3]:https://en.wikipedia.org/wiki/Dirichlet_distribution [4]:https://en.wikipedia.org/wiki/Barycentric_coordinate_system#Barycentric_coordinates_on_triangles [5]:https://en.wikipedia.org/wiki/Beta_distribution [6]:https://en.wikipedia.org/wiki/Categorical_distribution [7]:https://en.wikipedia.org/wiki/Multinomial_distribution [8]:https://en.wikipedia.org/wiki/Dirichlet-multinomial_distribution34:[] 2f:{"id":"36c20472d6c6e68d","slug":"mystic-rose","title":"Mystic Rose","thumbnail":"ce9cd9d0129a22e0187cf1ccfe305115050e711c3bc5e3a71d8f9985dc3ab410","access_level":"public","create_time":"$D2021-12-16T20:22:17.503Z","update_time":"$D2023-02-05T18:38:32.752Z","view_time":null,"first_public_time":"$D2021-12-22T05:52:19.513Z","fork":false,"stars":16,"starred":false,"owner":{"type":"team","id":"cf45be0120eccaad","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/aeddc181df6ca80a347940ba62e17601ac6395e9d2c21142887eca5fd277326a","tier":"starter_2024"},"version":1035,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null}],"members":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"title":"Mystic Rose","cells":[{"id":0,"value":"md`# Mystic Rose`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":335,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":328,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":295,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":333,"value":"{\n chart.update(input)\n return \"update graph\"\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"