Facebook Topic Visualisation

I asked a question on a facebook group : “Is a very strong understanding of CSS important for web programmer?” Here are the visualised result of the discussion.

The barchart represents people comment. Hover/touch it to see the comments. The bubble represents people emo-reaction, try touch/click them. ‘Search Participants’ is self-explainatory.

Search Participants

British Monarch Family Tree : Force Directed Graph

Interactive Family Tree of the British Monarch, from Queen Victoria to the current Queen Elizabeth II’s grand-children’s children.

How to use : 

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

The above is just a screenshot. To explore this one of my most exciting visualisation, click below. Now responsive for mobile devices:

Growth Domestic Products of Nations : Bubble-Force Chart

Bubble Chart is easy to understand : it is a chart describing data using bubbles / circle. The radius of the bubble – circle usually reperesents the measurement of the value of data.

Note : if the controls aren’t working, try use the ‘Data By’ control first, it should go back to normal. Sorry about the bug.

Bubble Size by :


Color :



Data By

As a rule of thumb : the smaller the bubble – circle radius, the lesser the data value, the greater the bubble, the larger the value.

This visualization is describing the Growth Domestic Products of various nations around the globe.

Continue reading “Growth Domestic Products of Nations : Bubble-Force Chart”