Alright, it has been 12 days since last time I updated here about my data driven chart creation journey. During the past 12 days, except for the three days of trip to Blueridge mountains with my wonderful husband and two lovely kids, along with my friends and their two pretty daughters, I sat/stood in front of my computer, tried, failed, grind my teeth, and tried again. Finally, here are what I found:

• Although there are numerous sorts of js libraries allowing you to achieve all kinds of functions: stacked bar chart connected with data, animated charts, mouse hover over, etc… So far it seems that D3.js is the only one that can achieve almost “all functions I want.”
• Anychart.js library, at the moment of writing this post, does not provide html5 based animation for most types of charts.
• Google chart does not provide full functioning html5 chart animations.
• D3 can work with Python — I should try to create a sankey diagram with d3 and R or Python, as my next project.
• When working with large data, json seems to be more preferable than csv.
• When drawing with svg, the (0,0) point is at the top left of the canvas. That makes the definition of coordinates and animation a little bit interesting.

During this learning journey, I also learned to use jsfiddle and console.log with chrome and Firefox. I found Firefox’s console seems to be easier to use than Chrome’s. haha.

Here is my first successfully run fiddle. What it does is to dynamically showing a growing stacked bar chart from the bottom to top — I know it sounds unnecessary, but this would be embedded into an online tutorial to show finance administrators at the place I work how to understand the structure of organizational budget.