Task 1 thoughts : Learning via Coding

things about d3

Through some of my codes, you can find that I was following a pattern, I conclude something via learning.

Load the data and wrap all the others into the function
Create a kind-of box model for the SVG element.
Create the SVG element.
Create the scale for each dimension.
Create the component of D3 like (arc, histogram, etc)
Append the SVG to DOM
Create x and y axies and append them to DOM

Initially, I think it was easy. But when I actually coding, I found that it is not the same story. Roughly speaking, I learn d3 in a hard way. I soon realize that I was coding based on v4 which was release just a month ago. And the documents are not comprehensive. They just explain all the API, but not explain how to chain the methods of component to actually form a component.

The damn thing about such a weak typed language like javascript is, you never know what actually you need to pass and what object does the function return. If the author doesn't mention, you need dive into the source code to figure it out which is very time consuming.

Finally glad that I made it. I know there are other chart library out there which is far more easier than D3, But, just love challenges.

things need to do

I changed 3 times then get my final laptop. A 2012 model macbook pro. Sucks at speed, but it works. But due to the lack of time, there are so much things that I could Improve. Things like:

Fav ICON
Best Practices.
Introduce modern workflow like gulp and Webpackage.
A navbar for the site
Decouple some logic to make a universal boilerplate code.
Transition()
Some updating and exit procedure showcase.
Other digrams like d3.force.
Try to code with angular2 or React
Design better. Damn, I use Semantic UI by trying to take advantage, but lost in lack documents for half a day. Finally know why people love bootstrap, and damn, it just publish ALPHA3
I mean systematic.

I just want to show you my procedures to finishes these tasks.

Learn D3 and all its available diagrams
Researching the raw data to match the previous the diagrams
Work out a reasonable logic to analysis the data
Select frameworks
Architecture design and prototyping (the nature of PM -_-)
Code the page one by one
Polish
Back