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.

Géopolitique de la twittosphère, Le Monde 2022-04-01

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.

Download the visualization in large format

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:

The reference map (the decisions I ended up making)

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.

Another layout: OpenOrd

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.

Another layout: Force Atlas 2 with default settings.

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.

Same layout, but with a different orientation. Equally valid, but…

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.

If node size represents how many accounts of the corpus one retweets or mentions

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.

The heat map used as a background: black in the back, white in the front.

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.

No hill shading (and no hypsometric gradient, see below).

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.

Just the hill shading, without the hypsometric gradient.

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:

Hill shading with light from the bottom-right

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.

NASA map of the Moon (sample).

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

Hill shading and hypsometric gradient only. Big nodes make impact craters. That’s an accident, but I like it.

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:

Different heat map settings. Botero style?

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.

With edges (work in progress; detail)

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:

If nodes had no colors.

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.

Colors from modularity clustering. Good as an approximation, horrible in the details. Node shadows not displayed (see below).

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.

Curated node colors (without node shadows).

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.

A screenshot of the network in Gephi, with edges.

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.

With node shadows, but not tuned.

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.

The reference map, where I had to tune the node shadows.

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.

With labels the exact same color as nodes.

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.

Labels without any border. It creates readability issues.

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.

Label borders using a background color: quite visible.

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.

Fusion modes used to blend the node borders naturally.

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

If font weight was set the same regardless of the font size. I have exaggerated the label size range.

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.

With only 25 labels.

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.

Classic, horizontal labels.

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.

Isotropic but straight labels.

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

No special case for candidates. Some of which are not visible.

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.

Forcing the display of some labels create conflicts, that I had to tune by creating exceptions in the code.

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.

Display only a selection of nodes, but keep the base map.

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…

Rendering glitches during debugging

2 thoughts on “Inside the giant network map I made for Le Monde”

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Search OpenEdition Search

You will be redirected to OpenEdition Search