Learning how to make charts with d3.js in 2020. A chart of the languages spoken in Austria-Hungary in 1911.

A bit about my journey learning d3.js

In June 2020, after months of procrastinating and in the middle of the Great Lockdown of 2020, I decided to learn a new skill. I settled on learning d3.js, a JavaScript library (or framework?) to make charts. I had previously started learning a bit of p5.js, but to be very honest, I was not very motivated (or indeed moved) by digital art which is what p5.js enables you to do. You cannot touch it, for one. Sure, the random bubbles on the screen looked beautiful, but they somehow left me feeling a bit dizzy whenever I stared at them for too long. Then I discovered p5.js’s not so distant relative d3.js.

I had always been fascinated by charts and maps as a child. In fact, with hindsight, I was probably quite a nerd growing up. I owned several atlasses, usually given to me at Christmas time, and most of those had charts about population and health and the economy and the like, and they were never really boring at all. Sometimes I let my mind wander a bit and then I created imaginary countries by redrawing the borders on the maps with a dark pen and scrawling new and improved names and capital cities because they made more sense to me. As you can imagine, some of my atlasses ended up looking quite messy, unless I had used a pencil, which wasn’t very often. Sometimes I had changed my mind about modifying a particular border and then I needed a heavy duty solution involving Tipp-Ex. I don’t think I cared much though. Besides, Upper and Lower Bohemia sounded better than Czechoslovakia, which still existed back in the 1980s.

Of course, you grow out of these things eventually but the fascination with graphs and charts never really died, even as I decided to pursue other interests, professional or otherwise. And besides, despite my interests in these nerdy things, I was not good at what today we would call the STEM subjects. In fact, quite to the contrary. I positively sucked at Maths and sciences and liked writing long essays on history or literature instead. And yet, in order to make things like charts, you need to have more than a passing interest in subjects like maths and logic, etc.

It was not until much later in life that I decided to learn a bit of programming, and even though I have struggled learning JavaScript, for example, I think I now know enough to be creative and make some interesting stuff. And thus I learned d3.js and here I am, writing about my experience.

I will definitely not bother you with the details. Suffice to say that there were times that I felt like throwing my elderly Mac out of the window, or when I wanted to bang my head against the table because nothing was making sense to me but as with all programming problems, as long as you practice just enough, relief is eventually in sight. There is always a (candle) light at the end of the tunnel.

I started with this course and it was all about learning svg, the basics of d3.js, selections, scales, transitions, some interactivity, creating a lot of scatter plots and bar charts and then publishing them as blocks, like this one, for example. But it was also beginning to bore me a bit, as I was using dummy data. I wanted to use real data! I decided to not give up though, at least not before creating a few interesting charts.

The chart about the languages of Austria-Hungary

So I eventually I started making a few charts using real data I found on the internet. As long as I can remember, I always shown an interest for weird stuff. Don’t ask me why but I had always been curious about that very peculiar country once called Austria-Hungary. It may have been the Sissi films I was condemned to watch as a child on some Saturday afternoons because my mother was a fan (like most people, we had only one TV), who knows, but they must have triggered it. Look at the map below, for instance. That alone looks fascinating.

Attribution: By Andrein – Transferred from en.wikipedia to Commons., Public Domain, https://commons.wikimedia.org/w/index.php?curid=586764

The map is taken from this article in Wikipedia, as is the data that I used for my chart. A picture is worth a thousand words they say, and this map depicts the linguistic situation of a multi-ethnic, multi-lingual and multi-cultural empire whose diverse peoples had basically nothing in common but their undying loyalty to their beloved Emperor (or King, in the Hungarian part of the country). You can see the very rough outlines of the modern successor states based on ethnic and linguistic identity such as Austria, Hungary, Slovakia, Slovenia (no they are not the same thing), Croatia (which includes Slavonia…..), northwestern Romania, southern Poland and what was then called Galicia and is now the western part of modern Ukraine.

I thought it might be interesting to create a chart using the table in the Wikipedia article previously mentioned:

Source: https://en.wikipedia.org/wiki/Ethnic_and_religious_composition_of_Austria-Hungary

So while the map works perfectly well in conjunction with the existing table, I decided to convert the percentage data in the third column to a bar chart. I imported the data from the table to a Google Sheet and then downloaded it as a CSV file. I then created the chart using the absolutely fabulous platform called Observable. There you can create charts from scratch or fork other people’s charts and use your own data, which is precisely what I decided to do, because there is no need to recreate the wheel every time I want to create a chart quickly…..

This sounds a bit lame, you might say. Shouldn’t you create a chart from scratch on your own? Of course you can, but why would you, if you can simply tinker with an existing chart and get the same result ten times faster? Of course, you should know exactly what you are doing and I think having created all those charts while I was doing the basic d3.js tutorials has definitely helped me understand every line of code. So my chart is based on this and this chart and here it is:

The original chart, together with all the code, is here.

But what’s much more interesting is how the different horizontal bars reflect the very fragmented nature of the Empire. No one ethnolinguistic group dominates and that is also reflected in the above map of the country. There is no doubt the map depicts the situation much better than my chart but I like to think that the two complement each other.

While the map tells the story in greater detail, the chart shows aggregate numbers only. For example, the German language was spoken by very diverse peoples that did not necessarily identify as belonging to one single ethnic group, like the Saxons of Transylvania, or some of the other German-speaking populations depicted on the map as red language islands surrounded by larger green (Hungarian) and orange (Romanian) territories.

The chart, based on the census of 1911, also shows how identities change over time. For instance, the Serbo-Croatian language as such does not exist anymore. Well, the language still exists except that it is called Serbian in Serbia and Croatian in Croatia. Similarly, who were the Ruthenes? Turns out they were, more or less, the speakers of the Ukrainian language in the northwestern part of the Empire.

Old data and tables and charts tell us a lot of stories then. They talk very loudly about (changing) identity. Perhaps we should take them as a warning in these times of increasing nationalism and populism. The Empire of Austria-Hungary was dissolved at the end of World War I by the Treaties of Saint-Germain-en-Laye and Trianon. That put an end to hundreds of years of shared history and experiences. The modern successor states mostly hated one another, and the later population exchanges and further fragmentations occurred in the case of the former Yugoslavia only a few years ago. And those blobs of red? Well the Germans were expelled or fled from most of South Eastern Europe as a consequence of World War II. Similarly, the mainly Polish-speaking city of Lemberg or Lviv became Ukrainian-speaking only after the war. People that had once lived side by side and enjoyed the occasional drink (rakija?) together suddenly saw each other as “the other”.

So, all in all an interesting chart. At least for me. Enough talk about Austria-Hungary though. I think it is time to make another chart with d3.js. And not only about Austria-Hungary.

Leave a Reply