Hello, and welcome to my site, a small collection of my visualization portofolios build using d3.js. If you are unfamiliar with the term, the Data-Driven-Document javascript (d3.js) is a javascript programming library that strive to ‘bring data to life’ using web standards such as HTML, SVG, and CSS. Througout the ‘ Visual Blog’ menu you can read about, and experience how d3.js will enhance your view about data with various engaging ways.

Why d3.js?

Today, the internet role as the data-exchanging medium is an undeniable well-known fact. If you have a website of any kind, chances are, someday you will want to serve some kind of tabular data to your visitors….

Traditionally data served in the form of tables. A lot of numbers clumped together inside tables usually will quicly tire the eyes of ordinary visitors


Visitors' data cognition

Some try to embed various forms of graphics to their website. Better presentation makes data easier to read, which in turn give increase for the number of visitors..


Visitors' data cognition

With d3.js various engaging interactions can be added to normally static graph, which will turn graphics into playable thing, entertaining to even the most easily bored visitors.


Visitors' data cognition

“A picture is worth a thousand words”…Whovever said that will surely agree that an animated picture is easier to understand than static one. Animations are not only pretty, but done right will reduce the cognitive burden of human brain; make it easier to follow and understand data…

And d3.js is a book of magical spell that will breath life to your otherwise static, dull looking numbers and graphics….

At the ‘Dataviz Blog’ menu you can read some info about my works, along with simplified, minified version of each interactive graphics.

Note : as this site is new (about 2 weeks old at  8/21/2017), all of the visualization will work best if viewed using desktop. I’ve resized them just so they can fit in to wordpress blog, but that’s it. You can still view them with medium and smaller screen device, but the interaction will not work perfectly.

Near the end of each blog article is the ‘FULLWIDTH VIEW’ button where you can access the interactive graphics in fullwidth view and complete functionalities. Some of them are already viewable using small screen devices, such as the bargraph variations, line chart, candlestick chart, and sankey. Others, however, can still only be viewed by desktop.

Update (11/13/2017) : the ‘Dataviz Blog’ menu can now be accessed from various screen size of devices such as cellphone, (hopefully) ipad, and desktop.

Achieving responsive-ness is tiring, but satisfying nonetheless…:D (Note : for some graphs, if you re-size your browser while viewing, please also refresh the page)


That wil be all, enjoy the gallery, drop some comment if you like.

Scroll Up