#100DAYSOFCODE Week 1

This starts from 4th of June. Day # Tasty road in Seoul with d3

5th June

Day #1 Tasty road in Seoul with d3

The D3 Practice

I did practice D3 structures. All code references cited. (Original code credit to Lucy Park. The blog is cited in the post link). It was very inspirational and I had a brief gasp of D3.

Since from the June, I kept coding because, you know, I have been an interactive developer for years. Unfortunately, I lost my own track of records in the regards to my #100-day challenge principle. If I didn’t write what I’ve done, It is not worth to put my 100 days code challenge bucket. So I decided to start again from scratch.

Day # 2 React Course Material Writing

19th Aug: I wrote the proposal of “Intro to React” beginner workshop. I did research of some simple app that I can show attendees how to build a react app. I quickly coded the weather app but I felt that it may be too much for beginners. React becomes really complicated too to develop in these days.

Day # 3 React Course Material Writing 2

20th Aug: I kept writing about Intro to React session. To do this, I looked at some materials from CodeSchool and the official page of React. React is heavily following ES6. I felt that I need to learn more of ES6. Especially when React uses maps and reduce method, I was very confused. A long time ago, Coding on React was not that difficult since it claimed that it is a very tiny library for only rendering virtual DOM. While I am away from Web UI, a lot of things seems changed far.

Day # 4 React Course Material Writing 3

21st Aug: I kept writing about the state on React. For myself, I do now understand what is the difference between props and state. The thing is… Can I explain somebody well? Nah..My process of understanding is very abstract and imaginary. It is just how my brain works. I am good at picking up correct one or wrong code. I, however, am horrible to describe with wordings, especially within the second language (My first language is Korean).

Day # 5D3 Practice 1

22nd Aug:

The Seoul tasty road’s code was basically for understanding how D3 works from looking at someone’s code. Most of the codes were based on Lucy’s code. At this time, I grabbed   D3 APIs and StackOverflow forums and Scott Murray’s lecture. The data source is from NAB Index table about online retail shop growth. (Table link)

What I applied on this chart:

  • Highlights
  • Transition
  • Tooltip as labels on the bars
  • Hover changing fills with JS

Day # 6 D3 Practice 2

23rd Aug:

So far I browsed D3. My thought? D3 is not that much spectacular. It is just a library you always need to look at the API document just like others. Is D3 useful? Yes, In some ways. I personally don’t think it is absolutely kicking benefits for me. To make a quality of charts, D3 requires so many lines of codes. It is a double side of a sword. If you are very passionate about making your own interactive chart with detailed design thinking, D3 is definitely to go. Otherwise, D3 is too much hustle to draw charts. If you are still interested in D3, then follow Shirly Wu. She is a senior ninja of D3. I am not heavily into the mode of customising charts out of data. Chart.js is enough if I need to integrate with React. Otherwise, there are a ton of chart tools. While working in Macquarie Group, I used AMchart, which was absolutely okay. When I just do data visualizing for my personal data journal, I only used dimple.js and I am happy about it. Using a chart with other JS framework? Chart.js was simple enough to use along with Vue.js and React.js. Don’t get me wrong. D3 is awesome and grant you limitless flexibilities. In other words, you are going to have a big learning curve, which I still do on the way.

Resource: http://htmlcolorcodes.com/color-chart/

Data table: Scott Murray’s intermediate data visualization reference

Day # 7 Coding Dojo

24th Aug: My favorite meetup! If you are living in Sydney and want to improve your JavaScript skills, I highly recommend coming to this meetup. You must study basic JavaScript beforehand. I observed this meet up a couple of times and many of people had no idea about how JS works or how programming works. If you fall into this case, please join the beginner team. The advanced team is a bit hard to catch up because we wouldn’t explain how JS method(and syntax) or TDD of Mocha works. I am regularly attending the Advanced team. My team did the banking kata together and we almost solved the goal. So much progressive. Kudos for Nik, Tanya, and Reenah for organizing coding dojos.

 

 

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s