At the end of the previous article we got into quite a pleasant state. Visual topical map was not anymore only a pile of nodes and lines, we started thinking more about what we actually display, which relationships make sense and what the user can understand from the map. We had Cytoscape.js, zoom, pan, clickable nodes and the map finally started looking like something which I would be willing to show also to somebody else.
In such moments it is best to stop programming.
I instead got an idea that it would be nice to add export to PNG.
At first sight it is completely logical. When somebody already creates a visual topical map, maybe he wants to save it. Maybe he wants to send it to a colleague, show it to a client, put it into a presentation or use it somewhere in an article. Interactive map on a page is fine, but an image has one big advantage: you can take it with you.
Cytoscape moreover supports export to PNG, so this time it really looked like a small feature. We add a button, call export, browser downloads the image and we can go do something more reasonable.
And it even worked.
I clicked on the button and got a PNG.
With that the simple part ended.
The first problem was what we actually export. User can have the map zoomed into one part, moved to the right or can have half of the graph currently outside the screen. Should PNG contain exactly what he currently sees? Or the whole graph? If the whole graph, in what size? If the map has 100 nodes arranged over a large area, the image can be either huge, or a very nice collection of unreadable dots.
Then came labels. On an interactive map we have the luxury of zoom. When I cannot read something, I zoom into it. PNG does not know this trick. When a label is small, it stays small forever, no matter how many times I click on the image and wait that something happens.
So we need sufficient resolution. Only bigger resolution means a bigger image and with a big graph the dimensions start to be quite interesting. Suddenly you solve pixel ratio, scaling and quality of text, although originally you only wanted one button with the text Export PNG.
Another small thing is background. Map on the page can look good on a background which we already have defined in CSS. Exported PNG however needs its own background, otherwise you can get a transparent image which looks good in one place and strange in another. Of course you want the export to look approximately like the map which the user saw before clicking the button.
Approximately is an important word here.
Then you discover clipping. A node on the edge of the graph can be nicely visible on screen, but its label during export decides that half of the text already belongs to another universe. So you add padding. Then you find that with another graph the padding is too big. You adjust it and the first graph again decides that it is missing some.
In programming I like these small reminders that the computer does exactly what I told it, and it does not care at all what I meant by it.
In the end we of course got export working. User can save visual topical map as PNG and the feature which was supposed to be small really stayed relatively small. Only I already learned to be careful with sentences like “Cytoscape supports it, we only need to put a button there”.
Alongside export we however solved another problem which hides behind almost every visual feature on the web: mobile.
On a big monitor you have quite decent space for a graph. A hundred nodes is still a lot, but you can zoom, move around and at least you have a feeling that you have a map in front of you. Then you open the same thing on a phone with width around 390 pixels and find that your beautiful network graph is trying to live in a space approximately the size of a bigger postage stamp.
The easiest solution would be to make everything smaller. Technically responsive, practically a magnifying glass is not part of a phone by accident.
So with mobile we again got to the same problem as before. We cannot only display everything smaller. We must think about what the user should do on a small screen. Zoom and pan are even more important there, touch must work normally and labels must not take half of the screen. What is on desktop a pleasant interactive graph can on mobile very quickly become the game “hit the correct circle with your finger”.
And then there is performance.
When you have ten nodes, you do not solve performance very much. When you have a hundred, hundreds of edges, labels, events and interactions, it is already good to at least think about what the browser is doing. And mainly TTTA does not have one manually prepared map. We have a huge amount of topics and every graph can look completely different.
So I cannot build optimization on the scientific method “Horsepower works on my notebook, therefore done”.
Some topics have simple structure, others are much denser. Some have a lot of relevant relationships, others naturally fall apart into smaller groups. The more we used visual topical map on different topics, the more it was clear that we need reasonable limits and selection. Not because Cytoscape cannot handle another twenty nodes, but because maybe a person cannot handle them.
And with this actually closes the whole circle which started with the first article of this series.
At the beginning I wanted an image. Main topic in the middle, around it related topics, a few lines and we have visual topical map.
Then we needed more nodes. Then better layout. Then labels, relationships, zoom, pan, clickable nodes, Cytoscape.js, entities, triples, concept neighborhoods, bridges and finally export to PNG. Meanwhile we found that the biggest problem is not getting data into a graph, but deciding which data belongs there at all.
And exactly because of this today I do not see visual topical map as a finished image.
Much more it interests me as a way how to move through a topic.
I imagine it so that the user starts at one topic, looks at its most important concepts and relationships, clicks on something interesting and with this changes focus. Graph can reorganize around the new concept and the user continues further. He does not have to get the whole encyclopedia on one screen. It is enough when he always gets a good answer to the question “where can I go from here?”.
That according to me fits much better also with where the whole topicstotalkabout.com gradually moves. At the beginning I thought mainly about a topical map builder. I enter a keyword, get a structure of topics and done. Today I enjoy more the idea of topic exploration. Not only get a result, but be able to move in it and discover something which I originally did not search for.
I am still not sure where the visual topical map will go next. Maybe it needs more interaction, maybe less data, maybe a completely different way of exploring topics. Most probably I will find out by adding something small and breaking three other things.
For now it works, it is useful and I like where it is going. Which is usually the exact moment when I start thinking about what else could be added.
I should probably leave it alone for a while.
But will it leave me alone?
Leave a Reply