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.
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.