Some graphs in CSS

Graphs are important in computer science as they can describe almost any existing relationship. A graph is described through its vertices (things) and edges (relationships). Social networks are graphs since they connect people. The web is graph since it connects machines over long distances. “The Internet of things” will also be a graph.

Graphs can be used for shortest paths, minimum spanning trees, network flows and many other classes of related problems. Having at least a basic understanding of what graphs are and where they can be used can help every programmer to think differently about the problems they face. If a problem can't be described through a complex data structure, chances are that there is probably some kind of graph representation. In other words, sometimes we may need to look for the graph in the problem. Or in a related journal.

With the help of CSS we can also illustrate the beauty of graphs. I have seen some that looked very beautiful, yet I didn't keep track of them, so I lost them. This page will be an attempt to collect graphs that look interesting. The idea for this bugged me a couple of times, after being discarded every time, so I decided to do something about it, however small it might be. I will eventually add more content to this page over time as I discover more.

Each graph has been created from multiple elements that have been styled individually. As this article on Mozilla Hacks has shown, there are now many ways to add multiple styles to a single element, but in most cases this still remains less flexible. Sometimes, if we want to make changes to a stylesheet, previously defined properties can get in conflict with new ones. But if we change the old ones, the context changes too, and the new properties may no longer make sense. We could have created the graphs as PNG images, but this would have made things less interactive. What is we wanted to have an effect based on the user selecting a given vertex? With the help of JavaScript, this would be easy; with an image, we don't have this freedom. As other people have pointed out, it is much cheaper to apply 2D/3D transformations to few control points than to a large array of pixels.

Here I haven't visualized the actual vertices, because I think that they can add needless noise in an image. Some graphs are also very large and very “tightly knit”, which would mean that with points bigger that the line width, some lines can give a false impression that they end in the wrong point. This is just a small consideration that I've made, although I know that it would have been more correct to include the graphs with more visible vertices (which would require even more elements). Still, I am convinced in the simplicity of Edward Tufte's visualizations.

On the surface, it may seem that creating a complex graph is a very hard task, and in some cases it will be. But our eyes can give us a misleading impression that a graph is actually more complex than it seems. We see many edges ending in a given vertex, but we forget that these edges have already started at some other vertex. In other words, the small detail that we currently look at is not always outgoing (a line has two ends). The symmetry in the graphs means that we can take a single element, multiply it and just apply different transformations to the copies. Each symmetric element reduces the complexity of the graph presentation. Hopefully, this will encourage you to make your own experiments and catalogs of useful things that you can later return to if needed.