Charlie Hebdo March – Freedom, Religion and Trade: What does the data say?

Click here if you prefer to read this post on Medium.com (6 minute read).
A Hungarian version of this post also exists.

There is hardly any person on the planet, who hasn’t probably heard about the 3.7 million people marching in Paris in solidarity to raise red flags on terrorism and freedom of press, following the Charlie Hebdo events. The crowds have been led by 47 world leaders (alternate source) marching arm-in-arm. However, a lot of controversy (1,2,3,4,5,6) has arisen around their intentions and people, bloggers and prominent figures of many countries have questioned whether their leaders’ actions reflect their nation’s viewpoint on this divisive matter. While some leaders have not been welcome, others have been reproofed for not showing up.

In this post we will try to look behind the curtain and see what could be the possible motivators for the world leaders to join the Marche Republicaine!

Charlie Hebdo March Leaders Map

Countries represented at the Charlie Hebdo March, Paris, 2015

We can see that Europe was well-represented, with virtually leaders of all EU countries appearing at the Champs Elysees. Other regions to have a good representation are Canada and the United States (although the US did not send the highest ranking officials), French Africa and the Gulf countries, to some extent – despite the fact that these are mostly Muslim majority countries. We can immediately see from the map that geographic proximity definitely influenced the solidarity visits, but let us look whether the religious majority of a country had any significant effect on the country’s appearance at the march!

Religious Majorities of Countries

Religious majorities of countries in 2014. Countries present at the Charlie Hebdo march are highlighted. Other category includes Atheism too. Bubble diameter corresponds to the press freedom index of countries in 2014. – click for interactive

Read More

Colorful Development: Dynamic Graphs

UPDATE: This post has been developed into a web-app! This fresh post gives an introduction.
PREVIOUS: Colorful Development: RGB-coded Multidimensional HDI 
Click here to look at the data visualization only on visualizing.org.

This post is an update on the Colorful Development: RGB-coded Multidimensional HDI post. But this time I’m bringing you dynamic plots spanning over the 1980-2013 period, giving us a much more comprehensive picture than a simple world (chloropleth) map about how did human development change in the past 3 decades! In particular, we will look at the evolution of the inequality between the three components (Health, Education, Income) of the Human Development Index. For this, we will need to use tripolar RGBHDI plots (I also call it a colorwheel), a rather peculiar 3 dimensional coordinate system defined in the previous post , so make sure you take a look first.

Colorful Development: Dynamic RGB HDI

Colorful Development: Dynamic RGB HD Combo Maps 1980-2013 – click for interactive

Read More

Colorful Development: RGB-coded Multidimensional HDI

UPDATE: This post has been developed into a web-app! This fresh post gives an introduction.
UPDATE: Please also check out the new post updated with dynamic plots for 1980-2013!
Open interactive plot!

Human Development Index Component Inequality Tripolar Plot – click for interactive

This post will be about the Human Development Index and the Red-Green-Blue color model (RGB). I present a novel approach towards visualizing the component inequality within the HDI and thus giving back its multidimensionality. The result is powerful as it highlights the main focus area for development policies for all countries at a glance (circular plot above – also check the interactive version)!

Formulated in the 90’s by Harvard Nobel laureate Amartya Sen, the HDI was developed as a means to set development targets for UN agencies and to create a way to monitor progress on those targets that is not solely based economic context. Right from the very beginning, the HDI received a lot of criticism for being redundant, having technical issues or not being overwhelming enough. The bottleneck of the HDI is arguably its apparent simplicity – concentrating a load of information into just one number and ranking entire countries based on that. Therefore many other replacement indices were suggested that claim to be more multidimensional and capture a wider picture of countries that is closer to reality. Perhaps the most famous of these is the Multidimensional Poverty Index, developed in 2010 by UNDP, used in conjunction with the HDI now in their official reports, and the Happy Planet Index, soon to be analyzed in an upcoming post. However, at the core the HDI is still  very multidimensional but the way in which it is depicted today takes away this multidimensionality. Now I will try to give it back and defend the HDI’s validity, with some (large) asterisks 🙂

Read More

How Social Media Won the 2014 Romanian Presidential Elections for Klaus Iohannis?

A Hungarian version of this post also exists.

The 2014 Romanian presidential elections have been (most certainly) won by Klaus Iohannis. Compared to the other candidate, Victor Ponta, he has been generally regarded as a silent and pragmatic leader. And he didn’t even have a Facebook page until recently. However, when after the first round of the elections it seemed that Ponta will almost certainly win, the Romanian online communities – driven mainly by the social media-aged population and intellectuals in large cities of Transylvania and the capital Bucharest – started a massive pro-Iohannis campaign. I have experienced this first hand, with more than 50% of my Facebook friends being from Romania – every Romanian who opened his Facebook or Twitter in the past two weeks knows what I’m talking about. I believe that this (among a gazillion other things of course 🙂 ),  has eventually lead to the victory of Iohannis. Let us look at the social media statistics!

Ponta Iohannis share

Percentage of votes by poll dates. November 2 and 16 (stretching into the 17) are actual voting percentages. (sources 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11)

 

Read More

Sankey Diagram Generator

Sankey Demo

Check out the Sankey Diagram Generator I have just made. It supports self loops, moving around nodes in both horizontal and vertical directions and loading and saving diagrams! You can also change the opacity and the density of the links.

Use the Load/Save button to edit/create complex Sankey’s.

The source code for the Sankey displayed above is:

{"nodes":[{"name":"Oil"},{"name":"Natural Gas"},{"name":"Coal"},{"name":"Fossil Fuels"},{"name":"Electricity"},{"name":"Energy"}],"links":[{"source":0,"target":3,"value":15},{"source":1,"target":3,"value":20},{"source":2,"target":3,"value":25},{"source":2,"target":4,"value":25},{"source":3,"target":5,"value":60},{"source":4,"target":5,"value":25},{"source":4,"target":4,"value":5}]} 

You can also use the keyword layer to create nodes fixed along the x-axis. In the above example, if you use “layer”: 3 for the node Fossil Fuels and “layer”:4 for Electricity, they will not be aligned, with the latter being placed to the right of the former.

{"nodes":[{"name":"Oil"},{"name":"Natural Gas"},{"name":"Coal"},{"name":"Fossil Fuels","layer":3},{"name":"Electricity","layer":4},{"name":"Energy"}],"links":[{"source":0,"target":3,"value":15},{"source":1,"target":3,"value":20},{"source":2,"target":3,"value":25},{"source":2,"target":4,"value":25},{"source":3,"target":5,"value":60},{"source":4,"target":5,"value":25},{"source":4,"target":4,"value":5}]} 

Clipboard01

You can also fix the size of a node using the keyword value.

{"nodes":[{"name":"Oil"},{"name":"Natural Gas"},{"name":"Coal"},{"name":"Fossil Fuels","layer":3,"value":10},{"name":"Electricity","layer":4},{"name":"Energy"}],"links":[{"source":0,"target":3,"value":15},{"source":1,"target":3,"value":20},{"source":2,"target":3,"value":25},{"source":2,"target":4,"value":25},{"source":3,"target":5,"value":60},{"source":4,"target":5,"value":25},{"source":4,"target":4,"value":5}]} 

Clipboard02

UDPATE: Using the keyword fill, you can also color the nodes (and automatically their links).

{"nodes":[{"name":"Oil"},{"name":"Natural Gas"},{"name":"Coal","fill":"black"},{"name":"Fossil Fuels","layer":3,"value":10},{"name":"Electricity","layer":4},{"name":"Energy"}],"links":[{"source":0,"target":3,"value":15},{"source":1,"target":3,"value":20},{"source":2,"target":3,"value":25},{"source":2,"target":4,"value":25},{"source":3,"target":5,"value":60},{"source":4,"target":5,"value":25},{"source":4,"target":4,"value":5}]} 

sankey_colored_nodes


UDPATE 2: Today the Sankey Diagram Generator got a major update: I have been working on the load and save functions to include the layout. Another minor update is that now you can toggle the node labels (both the text and values) on/off. On top giving you the option to save the Sankey structure and layout, now you can also save the diagram as a PNG image.

Now, when trying to save the Sankey code, a checkbox shows up next to the Done button, giving you the option to save the Sankey layout for loading later. This includes the node and link positions, as well as the settings for opacity and density. This is a major milestone as it has been a headache to redesign Sankeys, as previously only the structure was saved but not the layout. On the save screen now you also have the option to download the diagram as image.

As a result of these modifications, the Sankey save string changed a little bit in structure. In order to preserve background compatibility, the Sankey structure code – which made up the entirety of the save string up until now – was put under the key “sankey“, the parameters on whether to display labels, density and opacity under the key “params” and finally, the layout, if selected, under “fixedlayout“. Subsequently, when loading back the Sankey save string you are given the option to try to read the layout from the string. If you do not provide the layout, or you choose to ignore it (via a checkbox next to the Done button), the algorithm computes the layout for you automatically, as before.

UDPATE 3: Some users have requested to be able to create Sankeys with multiple flows between the same two nodes. This can be interpreted as having parallel links. While with a small number of parallel links, this is not a problem, the relaxation algorithm fails to lay out the links correctly in case of many. This algorithm is at the core of the rendering and therefore hard to change as it is designed to optimize the layout in general (minimize the total link path length in the connected component). However, I have included an experimental feature to correctly display Sankeys with many parallel links – this will not necessary offer the best layout for regular Sankeys though. In the sankey.js, there is a function called computeLinkDepths which sorts the links in ascending order at the sources and subsequently at the targets. This leads to some ordering conflicts (two source nodes going to the same target, with links of different value, will not both have their top link at the top at the target), which are then solved be the least in number. In case of parallel links, this creates a messy layout. To solve this, I have included a toggle for parallel rendering. This is a bit of an advanced feature and I encourage you to try to understand the sankey.js code structure before you turn this on. How to turn it on? First, make sure that in your input string all parallel links are sorted by value and grouped by source node. An example of this would be:

{"sankey":{"nodes":[{"name":"a"},{"name":"b"},{"name":"c"},"name":"d"}],"links":[{"source":0,"target":1,"value":10},{"source":0,"target":1,"value":70},{"source":0,"target":1,"value":80},{"source":0,"target":1,"value":100},{"source":0,"target":1,"value":200},{"source":0,"target":1,"value":700},{"source":0,"target":1,"value":800},{"source":0,"target":2,"value":20},{"source":0,"target":2,"value":30},{"source":0,"target":2,"value":40},{"source":0,"target":2,"value":300},{"source":0,"target":2,"value":400},{"source":0,"target":3,"value":60},{"source":0,"target":3,"value":600},{"source":2,"target":3,"value":50}]},"params":[0.5,0.25,0,0]} 

.Then open up a console in your browser and turn on parallel rendering by typing the following:

parallelrendering=true

Then hit the Draw Sankey button to redraw the diagram and you should be seeing your Sankey with many parallel links loaded correctly. You can turn it off either by refreshing the page or setting it back to false in the console. Have fun!

UDPATE 4: Added option for adjusting decimals for nodes and links, as well a counter for the node editor on the right, making it easier to create larger diagrams.


Made with D3.js & Dragdealer. If you would like to show your support for my work, please consider a small donation. For a more advanced, applied implementation of this tool, see the Food Energy Flows Exploratorium.

Donate for more datawizardry!