[{"data":1,"prerenderedAt":47},["ShallowReactive",2],{"post-/posts/graph-editor":3},{"id":4,"title":5,"body":6,"created":37,"description":38,"extension":39,"meta":40,"navigation":41,"path":42,"seo":43,"stem":44,"updated":45,"__hash__":46},"posts/2.posts/20160316.Graph Editor.md","Graph Editor",{"type":7,"value":8,"toc":33},"minimark",[9,13,24],[10,11,12],"p",{},"Large networks (loosely known as graphs in mathematics) can be hard to visualise.",[10,14,15,16,23],{},"An intuitive method is to draw them as node-link diagrams.\nIn a node-link diagram, the network entities are drawn as nodes, and the connections are drawn as lines.\nTo draw these things, we need to find proper positions for the nodes.\nThis is where ",[17,18,22],"a",{"href":19,"rel":20},"https://en.wikipedia.org/wiki/Graph_drawing#Layout_methods",[21],"nofollow","graph layouts"," come into play.",[10,25,26,27,32],{},"A common way to lay out the nodes is to use a force-based simulation, and treat the nodes and links as a spring-mass system.\nWhile learning about this, I made ",[17,28,31],{"href":29,"rel":30},"https://demos.hankruiger.com/graph-editor/",[21],"a thing"," that demonstrates it (but is otherwise completely useless).",{"title":34,"searchDepth":35,"depth":35,"links":36},"",2,[],"2016-03-16","Visualising and editing graphs using a web application.","md",{},true,"/posts/graph-editor",{"title":5,"description":38},"2.posts/20160316.Graph Editor",null,"PxcskW40c0PN66Wt353s8oT3fXB6ymimAiaFylvgjpY",1775234851927]