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

33%

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..

66%

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.

100%

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 ‘Visual Blog’ menu you can find the resized, simplified version of my d3js data visualization gallery, along with some light explanations about them, while at the ‘Full-Width Visualization’ menu is exactly what it says : my original works in full width view, and with full functionality for some.

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.

It is posible to create a fully responsive visualization using d3.js, but it will take quite some time and efforts. So for now, this will have to do….

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

Scroll Up