Inside the giant network map I made for Le Monde

20 minutes reading time

I made a giant network map for Le Monde. It was published the 1st of April 2022. It was no April fools! Here I talk about the craft I put into it.

It was a collaboration. The data came from Linkfluence (Guilhem Fouétillou). They were gathered and processed by Linkage (Pierre Latouche, Carlos Ocanto, Stéphane Petiot and Charles Bouveyron). The data were editorialized by the journalists from Le Monde who wrote the related papers (notably Nicolas Chapuis and Matthieu Goar).

The visualization was declined in different formats online. A simple scrollytelling presents the four papers of the series (paywall), where a larger, zoomable version can also be found. You can download the largest map just below. It’s in CC-BY-SA.

What if?

My goal is to make visible the decisions baked into these images. I will not show the process the way it looked to me. I will use a “what if?” style: what if I made different decisions? You will see that the map could have ended very differently.

I will use a smaller version of the map, readable at the format of this blog, as a reference. The decision points I mention below had different answers depending on the situation. This is the reference map for this post:

Layout algorithm. There are multiple algorithms that place the nodes in the picture, and none is “the best”. I used Force Atlas 2 with LinLog, because I find it convenient and I like its result. Here is what it would look like with OpenOrd. I don’t like the result for two reasons : nodes do overlap (it’s not readable), and clusters are artificially separated (that’s how this algo works). Anyway, if I were to go with that, I would have to adjust all the other decisions. There are dependencies between the design decisions.

The settings also matter. Here is what Force Atlas 2 gives you with default settings. Not too different, but the nodes overlap, the clusters are less defined, and the minor nodes all around drifted more far away, which caused a framing issue.

Orientation. Obvious but crucial: I intentionally put the political left on the left, and the political right on the right. I also put the government on top and the antisystem in the bottom. That was a choice aimed at sticking to expectations. But the layout has no orientation by default.

Node size. In this map, node size tells how cited nodes are (in the corpus). Of course, being cited is harder than citing. Everyone can retweet a lot. So being cited is a better indication of notoriety or influence than citing. Yet, the ability to cite means something, albeit something else. It’s a proxy for activism. I made a choice here, but see below what it would have looked with size as a function of citing (i.e., mentioning and retweeting). As you can see, activism comes from the sides of the map. The borders cite the center. Also note that there are many nodes that cite a lot, while only a few nodes are cited a lot.

Underlying heat map. I use a heat map for different things. It summarizes where the nodes gather. Let me show it to you, as it comes up later on. Black means low, white means high. I kept the rest of the map on top of it for context, but of course I just use the heat (i.e., height) information. It’s just computed after node positions.

Hill shading. I use a classic cartography technique called hill shading: drawing the shades of elevation. Of course, elevation is fake, it’s just derived from the heat map (i.e., node density). Without it, the map looks like this.

How different does it look to you? In my view, hill shading plays two roles. It emphasizes high density areas, that have a specific meaning (community/cluster), and it reminds of traditional maps (geographical). It helps readability, and it renders the image more familiar.

Hypsometric gradient. In addition to the hill shading, cartographers often use a hypsometric gradient: the background color depends on the elevation. I do the same to remind classic cartography, with blue where there are no nodes (the sea) and a clear color where there are nodes (land). I find the analogy with continents and islands useful. The gradient is instrumental to this, the metaphor disappears if I remove it.

Hill shading settings. Hill shading takes two attributes: the height of the sun (elevation), and its clockwise angle (azimuth). We are used to having the light coming from the top-left, so that is what I used. Check a different choice:

Inspiration, and impact craters. For this map, I drew inspiration from old maps of the moon by NASA. You’ll see the reference right away. Here is an example.

From there, a happy accident. Around highly connected nodes, the smaller nodes are repelled relatively far away, which, with hill shading, resembles an impact crater on the map. The crater evokes importance, which is coherent with the meaning of highly connected nodes. So I kept that, even though it was not intentional. I owned it, but a posteriori. It’s very visible when you just have hill shading and its hypsometric gradient (what I’d call the “basemap”, the background of the map).

Heat map settings. Now, this whole elevation thing depends on how the heat map is computed. There are different settings at play. For every map, I seek a balance between general shapes and local details. Check different settings:

Display edges. Or not. We had a discussion with Le Monde about displaying edges. Pros: it makes it clear that it’s a network; it adds information. Cons: it brings cluttering; useful only at high resolutions. It does not make sense at the detail level of the map I use as a reference, but here is what I suggested for a high resolution, work-in-progress version of the map (detail). It was pretty subtle. Yet we ruled it out as unnecessary.

Color

Node colors. We naturally associate color with political parties. As we have seen, the positions already match our expectations. Yet color is instrumental to an intuitive reading. If all the nodes had the same color, we would see something like that:

A common approach is to use a community detection algorithm to get groups, and color them. Le Monde has a set of colors for political orientations. It turns out that the communities are recognizable, and we can apply those colors to them. It looks like this.

However, political affiliation is a touchy matter. We already expected some people to be mad at the map and the articles, because Twitter can be notoriously toxic. We knew that any affiliation mistake would be used as a way to discredit the journalistic work. And community detection makes A LOT of affiliation mistakes, like Emmanuel Macron painted as an antisystem (!). Not only because it is approximative; not only because society is more complex than what an algorithm can grasp; but also because modularity clustering tries to put everyone in a box. Not everyone has a political color, and this is very visible in this network, where many people have a critical relation to the candidates, and have commented on multiple ones, in a non-activist way. Not everyone is partisan.

The journalists from Le Monde, and notably Nicolas Chapuis and Matthieu Goar, have manually investigated the most cited accounts in the network. They retrieved the political color manually, looking at what people declare in their Twitter description. It does not mean that it is “the truth”. For instance, a number of political activists self-identify as journalists. Nevertheless, it is more respectful to people, and the positions in the map suffice to bring contradiction to self-declared affiliations. “Follow the actors” is a classic guideline of controversy mapping, by the way.

Manually retrieving political color is time-consuming, and we only did it for approximately 1000 accounts, i.e. 3% of the accounts. Which leads to a visualization issue: as you can see below, there are not enough colored nodes to make the different areas visible. The big dots have a color, but the many small ones remain gray. As a result, you will see the areas if you pay attention, but the big picture does not jump at your face.

Edges usually mitigate that kind of problem, because they occupy so much space that it becomes a kind of background. Here is for instance what the network looks like in Gephi, if we display the edges and color them as the mix of the source node and target node. There is a bit more color. Yet the many grey nodes (those without a political color) keep obfuscating the political color. And we do not display edges anyway.

Node color shadows. I have developed a trick to emphasize node colors: “node shadows” (for lack of a better name). Basically, I paint the background with the color of the nodes. I just pay attention that it is very smooth, so that it is not too intrusive or busy, and that the colors do not mix too much, as blue and yellow do not equal green in this context (a right-wing plus an antisystem do not give you an ecologist). Yet I now run into another problem: the grey dots keep the shadows of colored nodes contained. That is precisely because the colors do not mix. Which is a good thing in general, but not here. Here the shadows work a little, but not much.

A good design is always specific: I had to tune the process so that the shadows of uncolored nodes are not taken into account, so that the color of relevant ones can spread far enough. This gives the highlight we need to convey the big picture right away, finally.

Labels

Label colors. As we have seen, colors have a political meaning. I had to compromise. For instance, you may have noticed that the Zemmour brown (on the right) is pretty dark, while the antisystem yellow (in the bottom) is pretty light. This creates visual distortion, but I deemed it acceptable. The labels, however, also have to be readable. The yellow, in particular, creates a readability issue, as you can see below.

My solution was to constrain each label color into an acceptable range of lightness. I did not do it manually, I used the HCL color space (hue, chroma, lightness).

Fusion modes. It took some tricks to make the labels readable and natural at the same time. Notably, labels need a border. Else, they conflict with nodes and they are not legible.

For simple maps, the border could simply be of the same color as the background. But this map is too sophisticated already. What even is the background`? Any color I pick will conflict somewhere. The result is acceptable, but it draws too much attention to certain places, and creates imbalance.

Instead, I use fusion modes on a combination of layers so that the labels have a node-free space border but still blend with the hill shading, the hypsometric gradient, the node shadows and so on. The result just feels natural, but it is, in fact, the most complex solution.

Constant label thickness. I use another trick to ensure visual homogeneity: I set the labels to an approximately constant weight. The large labels are thin, while the small ones are thick. This is not very apparent in our case because, as we will see, in addition to that, I made the labels of the candidates bolder. Yet without this trick, a large discrepancy between label sizes, something that happens with large maps, makes small labels too thin (less readable) and large labels too thick (too emphasized).

How many labels? There is a limit to how many labels you can draw, because there is not enough space. There are about 33,000 labels to display, and that is just impossible. But of course it depends on the display size, so bigger or zoomable maps can afford more labels. Regardless, labels also bring visual cluttering. We had a conversation about limiting the number of labels. In the end, we decided to show quite a lot of them. A map with less labels, like below, looks more summarized.

Curved labels. A visually strong choice. Label paths follow the heat map gradient, but are constrained to not curve too much (it depends on the font size, by the way). My goal was to emphasize the isotropic nature of the visualization: contrary to a scatter plot, the space is the same in every direction. There are no axes. I find that horizontal labels put too much emphasis on the X axis, and suggest a type of reading that is not appropriate.

That being said, if the wiggly labels are too distracting, a compromise could be to allow various orientations but not the curvature (see below). I picked the most organic looking option, but that is not set in stone.

Forcing the labels of candidates. The journalists asked why some candidates were not visible. Indeed, initially, the candidates were not special nodes. If they were not visible enough, their label could be omitted (see below).

I added custom code to ensure that they would be displayed. Le Monde also asked me to make them more visible, which I did by making them bolder. Then a problem arose: the labels of some candidates conflicted (see below). To fix that, I had to specify the orientation of some candidates so that they do not conflict.

Hide some nodes. Finally, for one of the papers, I had to display only certain actors (those who mentioned a given conspiracy). One may think that it suffices to hide part of the nodes, but we need to keep the base map. So we need to hide nodes for certain things, and not for others. Once again, this requires tinkering with the code, because it is quite specific.

A final word

I am aware that I did not explain how this is done in practice. That is for another time. But you can picture a reaaally long Javascript file that uses a lot of Graphology and D3, and that I need to use carefully, because bad settings lead to various issues like out-of-memory errors, horrible glitches, and code that unnecessarily runs for hours.

I also did not explain the basics of visual network analysis. You can find that in my PhD thesis, though.

I can nevertheless tell what the map does to its audience. It tells: “there is an order to that chaos”. It tells that the political space of Twitter is, somehow, organized. How? For that, you have to read the related articles in Le Monde (that’s the point). And the map also does something else: it draws you into the data. It encourages you to take a look at the labels, and explore it by yourself. I know that this kind of visual literacy is not widespread. But we have to start somewhere…

---

---