When I started making topicstotalkabout.com, one of the things which I wanted to have there was a visual topical map. The reason was quite simple. Topical map as a list is useful, but when you have in front of you tens of topics and subtopics, it is still mainly a list. I wanted to look at a topic and in a few seconds see what is main, what is around it and how individual things are related together.
In my head it looked very simple. Main topic will be somewhere in the middle, around it will be related topics, between them lines and done. Internet already saw also more complicated things than a few circles connected with lines. First versions quite supported me in this opinion, because when you have ten or fifteen nodes, almost every graph looks good. You have a nice central topic, around it a few other topics, between them connections and the whole thing looks very smart. A person looks at it and has a feeling that he just visualized the knowledge of mankind.
So I was satisfied. Then we put real data into it.
TTTA meanwhile grew and together with it grew also the amount of information which we knew how to find about one topic. It was not ten nodes anymore. There were 30, 50, 80 and with some topics more than 100. To that relationships between them. One of the nice examples was Horsepower. At first sight an ordinary topic. Horses, cars, power, James Watt, engines, units and a few other things. But when you start taking the topic apart deeper, you find that those “few other things” are quite a decent family. Suddenly we had a graph with more than a hundred nodes and a lot of relationships.
Technically it worked. That is sometimes a very dangerous sentence in programming. All nodes were there, connections were there, data was correct and the map displayed. So I could happily check the feature as finished, if the only goal of visual topical map was to prove that a browser can display a lot of circles and lines at once. But a person looked at it and for a while thought about what he actually sees.
The first problem was layout. With ten nodes it is almost irrelevant where you put them, with a hundred not anymore. Some push to each other, others fly somewhere away, labels overlap and between all of that go lines which are supposed to explain relationships to the user. Often they however mainly successfully explain that two dots are connected by a line.
Then there are labels. A node without a name is practically useless, because the user probably does not want to guess whether the green circle on the left means Steam engine or Internal combustion engine. So you need names, only names take space. You shorten them and then you do not know what they mean. You display them whole and they overlap. You put them only on hover and then you remember that the user can be on mobile and has no hover. At this moment a person slowly starts understanding that the original “we will draw a few circles” will maybe be a little longer task.
Another problem were the connections themselves. When you have a lot of nodes, naturally you want to show also relationships between them, because exactly those are interesting on the whole map. Only every next connection means another line and the more information we added into visual topical map, the less information sometimes could be read from it. That was quite an interesting lesson. A database can know 500 things, but that still does not mean that we help the user by showing him all 500 things at once.
Of course we started solving colors. Main topic can have another color, individual types of nodes can have their colors, relationships we can differentiate and something highlight. Colors after all help orientation, at least until a certain moment. Then you have six colors, four sizes of nodes, three types of lines and a legend, without which the user needs another tool for analysis of our analysis.
So we again returned to the basic question: what actually must a person see on that map? Central topic certainly, that one must be clear immediately. Then the most important related topics and their relationships. But which relationships? All or only some? According to relevance or according to type? Should a more important node be bigger? And what actually means “more important”? More connections, higher relevance or stronger semantic relationship? At this point the problem was not really about drawing anymore. It started to be about what we want to say. I of course did not solve this at the beginning, because at the beginning I wanted circles.
Meanwhile we added zoom and pan, because it was clear that we cannot push a bigger map whole onto one screen and hope that the user has an 8K monitor and eyes of an eagle. The user must be able to move around the map, zoom into a part which interests him and look at detail. And when he already moves around the map, nodes should of course be clickable, because when I see an interesting topic, the natural thing is to click on it.
And with this also my idea of what visual topical map actually is started to change. At the beginning it was supposed to be an image, a nice visualization of analysis result. Gradually I realized that much more interesting is when it is navigation. User comes for example to Horsepower, looks at the map, discovers something which interests him, clicks on a concept and continues further. From one topic he gets to another and instead of reading a list he can simply explore the topic.
I liked that much more already. Only the original visual topical map was not very prepared for this. It was not bad, it did what we originally built it for. The problem was more that I gradually wanted completely different things from it. That is by the way quite a common way how I make technical debt for myself. First I build a simple feature, then I find that it is useful, then I add more things into it and in the end I am surprised that the simple feature is not simple anymore.
Visual topical map got exactly into this phase. We had more data, more relationships, more nodes and a much better idea of what the map could do. At the same time we had a solution which was designed still in times when ten nicely arranged nodes looked to us like quite a big graph.
So my favorite moment in development came. It works, only it needs to be completely rebuilt.
And with this we got to Cytoscape.js.
Leave a Reply