Squares and prettier graphs

The Futility Closet people recently posted “A Square Circle“, in which they showed:

49² + 73² = 7730
77² + 30² = 6829
68² + 29² = 5465
54² + 65² = 7141
71² + 41² = 6722
67² + 22² = 4973

which is a nice little result. I like this sort of recreational maths, so I spent a little time wondering whether this was the only such cycle, or the longest, or whether there were longer ones. A brief bit of Python scripting later, and the truth is revealed: it’s not the only cycle, but it is the longest one, with six entries.

There are no other 6-cycles; there’s a 5-cycle (start from 68²+50²=7124), a 4-cycle (47²+56²=5345) and interestingly two 1-cycles, numbers which lead to themselves: 12²+33²=1233 and 88²+33²=8833. That’s rather cool.

I did wonder whether there are also interesting cycles with more numbers, so I tried out adding the squares of 3-digit numbers:

but sadly they’re really boring; there’s a 2-cycle (137²+461²=231290, 231²+290²=137461), another 1-cycle (990²+100²=990100) and that’s it. Nonetheless, quite an interesting little property to fiddle around with.

Prettier graphs

Originally I was going to make my script count the lengths of the cycles and show the largest one and so on, but I realised that that was annoying and fiddly and what I ought to do is just display a nice picture of them and that’d be clear to my eyes immediately and take no code at all. My go-to tool for this sort of thing, where I’m drawing graphs (in the mathematical nodes-and-edges sense) programmatically, is Graphviz, because it’s really easy; you basically write out your graph as obvious simple words with arrows:

digraph {
    "get up" -> "go to work";
    "go to work" -> "come home again";
    "come home again" -> "go to sleep";
    "go to sleep" -> "get up";
}

and then you can make it a graph with one command: dot -Tpng simple.dot > output.png:

A basic graphviz graph of the above code; plain black and white, and not pretty

That looks pretty terrible, though; plain black and white, ugly. I tweaked my graph above to look a bit nicer, with some colours, and that’s really easy; you just add a few extra properties to the nodes (the things to do) and edges (the arrows) in your graph specification:

digraph {

    node[shape="rectangle" style="rounded,filled" gradientangle="270" 
        fillcolor="#990033:#f5404f" color="#991111" 
        fontcolor="#ffffff" fontname="Arial"]

    edge [color="#006699" len=2.5]


    "get up" -> "go to work";
    "go to work" -> "come home again";
    "come home again" -> "go to sleep";
    "go to sleep" -> "get up";
}

and then you get something a bit nicer:

Same graph, but with a little colour and niceness

Now, I am no graphic artist. I’m not good at this stuff. If you’re thinking “that looks rubbish; I could make it look loads nicer” then great! Please, please do so! I would very much like one of the many graphic artists involved in the open source world to put together a “theme” for graphviz that just makes graphs look a bit nicer and classier, by default. Seriously, if you’ve got an artistic eye this is the sort of thing that’d probably take you a lunchtime to do. Just pick some nice colours, line widths, arrow shapes, node shapes, and you’re done. Write a blog post saying “these are the six lines to add to the top of your graphviz .dot files” and that’s the job complete; that would be a small but measureable improvement to the universe that you’ve made, there, with not much effort at all.

The graphviz people are pretty open to the idea of even including such a thing in their releases, maybe even by default. I asked on Twitter whether someone could or had already done this that I’m asking for, and one of the people who responded was Stephen North, who’s part of the graphviz team, saying that they’d be happy to include and publicise such a thing.

To be clear, this is not a complaint about the graphviz team themselves; their job is mostly to think very hard about layout algorithms, which they indeed do a good job of. But I think it’s really important, not just that open source stuff can be made to look pretty if you know what you’re doing, but also that it already does look pretty by default where it can. It turns people off your software, no matter how powerful it is, if some less-powerful alternative puts out more attractive output. There are some things where this would take a lot of work; rejigging the entire UI of a complex programme is difficult and time-consuming, absolutely. But I really feel like someone with a decent artistic eye (i.e., not me) could put together a simple set of colours and font choices and line widths that would make graphviz look much nicer either by default or by specifying --pretty or something, and it wouldn’t take long at all. I’d certainly be way happier if that happened. Maybe that person is you, gentle reader?

More in the discussion (powered by webmentions)

  • Gamer Geek responded at twitter.com Stuart Langridge: Squares and prettier graphs kryogenix.org/days/2018/03/2…
  • Birmingham.IO responded at twitter.com Stuart Langridge: Squares and prettier graphs by @sil buff.ly/2DUm4UK #PlanetBirmingham
  • John Drinkwater responded at twitter.com Some further thoughts on how easy it'd be for someone who does open source and has artistic skills to make graphviz nicer in a lunch hour, w
  • Daniel Foré responded at plus.google.com
  • Daniel Foré responded at plus.google.com Just gonna leave this here: https://cassidyjames.github.io/appage/com.github.artemanufrij.graphui/
  • Stuart Langridge responded at plus.google.com +Daniel Foré Not the prettiest of themes, I feel, but if there were a prettier one then it seems that the graphviz people are very open to including i…
  • Chris Aldrich responded at 👓 Squares... (boffosocko.com) Read Squares and prettier graphs by Stuart Landridge (kryogenix.org) The Futility Closet people recently posted “A Square Circle“, in which they showe…
  • Birmingham.IO responded at twitter.com Stuart Langridge: Squares and prettier graphs by @sil buff.ly/2DUm4UK #PlanetBirmingham