Petrando – scienic-data

Facebook Topic Visualisation

A custom chart attempts to visualize how people react on a facebook topic question. The question asked is : wether or not a web developer should has a very strong understanding about CSS.

The ‘barchart’ part on the left are people who answered, categorized by their ‘stances’, i.e : some really agree, some agree, one disagree, etc. The bubble section on the right visualize people reaction. You can click rightmost legend circle on the right to figure out how many ‘likes’, etc.

Barchart has tooltip when touched/hovered with mouse. ‘Search Participants’ is self-explainatory.

Search Participants

Nested Stacked Barchart : Indonesian Civil Cervants (2007-2012)

Why nested stacked barchart?

Long ago, after i learned how to use d3 stacked barchart, i attempted to use it to describe real life data of my country’s civil servants hierarchical structure.

And immediatelly realized the limitation of the standard d3 stacked barchart : it can only ‘divided’ itself once. In other words : it only capable of a single depth level structure.

While in real life : data can be structured deeper than a single level.

I then googled the keyword ‘d3js nested stacked barchart’, and came to no satisfying result whatsoever, seems like everybody in the d3 community is using d3 stack layout or d3 hierarchical barchart to solve problems.

So, i decided to do the calculations myself, and after a lot of time and efforts, here is the result : a stacked barchart which have 2 levels of depth! Just play arround with the controls, and mouseover/touch the bar(s).

Note : experimental, still not perfect.
The fullwidth version of this graph is here :

And the Indonesian version of fullwidth view here :

British Monarch Family Tree : Force Directed Graph

Force-directed graph application to visualize british monarch family tree, from Queen Victoria to the current Queen Elizabeth II’s grand-children’s children.

How to use :

Use mouse scroll button for zooming.
You can drag the family tree.
Use the ‘SEARCH’ function to search any family member.
The ‘RESET’ button on the upper-left for reset tree zoom and positioning.

Interactive British Monarch Family Tree screenshot

See this visualization in action, click the Fullwidth View button below,now available for desktop and mobile devices:

Update (Tuesday,9/19/2017) :

- Upon closer inspection to the source , i found a bit of incomplete-ness : while the family tree displays that Charles Edward (1884-1954) only has 4 children, a look at his wiki page revealed that he actually has 5. So, i took the liberty to add Prince Hubertus of Saxe-Coburg and Gotha (1909-1943) to the interactive family tree.Ambiguity : by comparing wiki and google, i found out that there are actually 2 nobles with very similiar name and title :
  1. Hubertus Michael, Hereditary Prince of Saxe-Coburg and Gotha, Duke of Saxony (born 16 September 1975) is very much alive and already married.
  2. The late Prince Hubertus of Saxe-Coburg and Gotha (1909–1943), is the one intended to be in this interactive family tree.

Since it is already announced, i also add the will be born Baby of Cambridge, the third child of Duke and Duchess of Cambridge to the family tree.
A bit of re-touching to the interactivity.

Update (Friday, 9/22/2017) : Click on Queen Elizabeth II picture node to display succession line to the throne.