Visualizing 30 years of marriages in Singapore

Project Link:
Created at:
Information Design Lab IDC IIT Bombay.

The following is written by Manas Sharma

First things first, we are not webdev guys. We know a bit of D3, Python , HTML, CSS and JS only from simultaneously learning the needful as per our needs (Googling, in short). So rest assured, our code is not the prettiest. So as you would expect from laymen like us, we faced a lot of issues with debugging. Here we talk about some of those issues that other folks like us might face.

Damned iframes

Automatically iframe resizing according to its content apparently is a huge issue. Well, atleast we could not figure something out which was cross browser. (Yep, we have seen already seen that Stack Overflow answer. Thanks.) We tried a lot of things. Sadly, none of them worked in the end. We tried to attach a function on the frame’s onload attribute but it still gave us the height of the chord diagram only and the line charts were very cleanly hidden behind the next section.

See how the line graphs aren’t there? They are behind the text below the chord diagram. Never mind the wonky colour labels.

Then we tried doing it separately by writing a different script which looks up all of them by id and then changes their height as per the content. This was very wonky. It worked on only one of the iframes. Randomly. What’s more the other two now sometimes showed just the tips of the chord diagrams.

Our iframes were heavy with content. Interactive visualizations from various files and various scripts running simultaneously. The line diagrams were loading just a bit too late for the function to calculate the correct height. It was probably because the line diagrams required loading of various different files for each one of them which caused this issue. Probably all this was somehow causing the funciton to trigger prematurely and not do what was desired.

In the end, we had to resort to something which should probably be a punishable offence. We hardcoded the heights by calculating them from the page when it was loaded separately. We apologise. Please don’t hate us.

Linked Highlighting

Another feature we wanted to implement was linked highlighting in the line graphs. Since there were so many graphs, it was only obvious that we try to include simultaneous tooltips on hover on the graphs for easier comparison.

For this, I first thought about doing something with React and D3 by following Peter Beshai’s tutorial about how he created his own awesome Buckets visualization. (Mr. Bashai, if by chance you’re reading this, you’re awesome! We’re huge fans.) But then we had only a week and a new Javascript library was not really something we could spend time on learning. We are okay at working with D3 and were short on time so decided to do it with D3 itself.

We basically played with the DOM selections when the .on(“mouseover”) function was triggered. Then giving the selecting the graphs based on the immediate parent of the current graph being hovered over was easy with Javascript’s awesome DOM selection functions. Then we appended a “tooltip” element on all the graphs and adding to it the details.

The following is written by Arihant Parsoya.

There are over 10,000 marriages in Singapore per year across diverse cultures, education levels and age groups.

What are the current trends in marriages? And how have these trends changed over the years across different factors? To understand this both qualitatively and quantitatively, we used chord diagrams to visualize marriages.

Taking the example of religion chord diagram, we start with a simple circle and divide it into two semi-circles to distinguish males from females.

This distinction is represented by dotted line along the diameter of the circle.

We then divide the semi circle into different sectors. The chords are colored according to their religion( The religion can be identified by the color legend placed near the diagram). The length of the chord is proportional to the number of people in that religion.

We then connect the religion sectors by chords. Chords represent the marriage between people in different religions. The thickness of the chord is proportional to the number of marriages between the religions.

Adding chords for all religions:

Marriages related to a particular religion can be seen by hovering the mouse on the desired religion segment.

So far we can see the marriage trends for one particular year. We added a timeline slider below the chord diagram through which we can observe the trends happening across years( 1984–2015).

For a quantitative analysis of the trends across years, we added line graphs below the chord diagram. Each line graph represents the marriages from that religion to all religions of opposite age.

Graph for Christians Grooms marrying Brides is shown below:

Each line is color coded according the to the religion the Christian Grooms are marrying. (Eg: The red line in the above graph represents Christian Grooms marrying Christian Brides. Similarly, the yellow line represents Christian Grooms marrying Non-Religions Brides.)

Exact number of marriages can be seen by hovering on the graph for the corresponding year.

Note: We are only displaying the line graph which are statistically significant.