In the previous article I ended at the point that our visual topical map actually worked. It had nodes, connections, it could be displayed and technically it did approximately what we wanted from it at the beginning. Only meanwhile we started wanting much more from it and the original solution was already a little like an old house to which you gradually add more rooms. You can still live in it, only you are not completely sure anymore why you go to the bathroom through the kitchen.
So we decided to rebuild the map and move to Cytoscape.js. It is a JavaScript library made directly for working with graphs and networks, so exactly for the type of problem which until then I was trying to solve by gradually adding more JavaScript to my own solution. Sometimes it is good to admit that the problem was already solved by people who know more about it than I do, and use their solution.
The first feeling after the move was very good. Cytoscape knows how to work with nodes and edges, has different layouts, zoom, pan, events and a pile of other things which we needed. Suddenly I did not have to think about every detail of how to get the graph onto the screen at all and how to convince it not to fall apart with the first movement. I could solve more how our map should work.
Of course it did not mean that we changed a few lines of JavaScript and went for lunch. Data which we already had had to be put into the new structure, individual types of nodes and edges had to be set, their look, behavior, layout and interactions. Then something worked nicely on one topic and on another it looked completely different, because graphs have that unpleasant property that every one has a different number of nodes and a different structure. It would be considerably easier if all topics in the world had exactly 24 subtopics arranged in a nice circle. So far we did not manage to enforce this.
A lot of time we spent with layout. Cytoscape offers more of them and every one has its advantages. Some graph looks good arranged into a circle, with another a force-directed layout makes more sense, where nodes according to connections naturally pull apart and attract. Then however you open another topic and what a moment ago looked very elegant creates a small galaxy with one node somewhere behind Pluto.
Gradually I stopped trying to find one magical layout which will be perfect for everything. Such of course does not exist, which I could have guessed already at the beginning and save myself some time. More important was to set reasonable defaults and behavior so that the map is usable also when a specific topic does not have an ideal structure.
A big difference was made by ordinary things like zoom and pan. With a small map you almost do not need them, but with a bigger graph suddenly from an image becomes a space in which you can move. The user does not need to see all hundred nodes readably at once. He can look at the whole, zoom into one part and then move further. This sounds like a completely obvious thing, but for me it was one of the moments when the map stopped behaving like an image and started behaving like a tool.
Then came clickable nodes. When the user already has in front of him a related topic and TTTA has its own page for this topic, it would be a little strange if he could not click on it. So the node was not anymore only a colored circle with a name. It became an entrance into another topic. From Horsepower I can get to James Watt, from there somewhere completely else and after a few clicks probably end at a topic because of which I originally did not come at all. Internet works this way already for quite a long time, so I did not invent anything revolutionary, but into TTTA it started fitting very well.
We also solved hover and additional information around nodes. Not everything must be permanently written directly in the map. If we put all information there at once, very quickly we return to the original problem and the graph will be information rich, but practically unusable. Detail can show only when the user is interested in a specific node. Of course then you need to think about touch devices, because mobile regularly reminds us that hover is a beautiful thing mainly until you have a mouse.
We started playing also with size of nodes. It is natural that central topic should be more visible, but what about the others? Should size talk about relevance? About number of connections? About how often the concept appears? Or should all be the same so that we do not suggest to the user a meaning which in reality is not there? From an ordinary CSS decision very quickly becomes a question of what our data actually means.
Similar it was with colors. Technically we can have another color for almost everything. That still does not mean that we should. When I started trying to differentiate different types of nodes, categories and relationships with colors, the map contained more information, but slowly started looking like something which I would first need to study so that I could use it. So we again removed things. This process repeats suspiciously often with TTTA: I add something, for a while I am happy about it and then I find how much of it I can remove.
Cytoscape helped us a lot also with events. Clicking on a node, selection, highlighting connections or reaction to other user actions did not have to be different small pieces of code glued around the map anymore. We had a normal base on which these things could be built. This was important mainly because I already knew that the map will still change. With TTTA it is quite safe to assume that when I think a feature is finished, two days later I get another idea.
After the rebuild the map technically worked considerably better. It was more interactive, knew how to handle bigger graphs, it was easier to move in it and we had a much better base for further development. For a while I had a very pleasant feeling that we solved the problem.
Only Cytoscape solved mainly how to draw the graph and how to work with it. It did not solve for us what to actually put into that graph.
If you have 150 nodes and 400 relationships, Cytoscape very willingly displays them. It does not complain, does not ask whether it is a good idea and does not tell you that the user will probably understand nothing from it. That is already our problem.
And exactly here I started realizing that the hardest part of visual topical map maybe is not visualization at all. We have a database full of topics, entities and relationships and gradually we know more and more about one topic. Only a good map is not the one which shows the most data. A good map should show the right data.
So after the rebuild we had a better graph engine, better layouts, zoom, pan, clickable nodes and a normal base for more interactions. And at the same time we got to a much more unpleasant question.
When we have hundreds of pieces of information available, which of them actually belong there?
Because drawing a hundred nodes was not the problem anymore. The problem was choosing the right hundred.
And in the end maybe not even a hundred.
Leave a Reply