#100DAYSOFCODE Week 3

Due to father’s day and my birthday, I skipped coding during weekends 🙂

Day 15: Work (Animated banner)

4th of September

This section will be filled with my GIF image of web animation.

Day 16: Work (Animated banner) & Eloquent Javascript Exercises

5th of September. Again, the GIF will be filled up. Geh. Why my work is so dragging me from doing something fun.

By the way, I have been very thirsty to back to more fundamental stuff. That is why I join to NodeGirls’ coding dojo session. I have been in multimedia, content production & web dev industries. What I have to chase up is learning new framework or tools. I have used JavaScript for 2 years almost but it was all about having myself to adjust to libraries or framework. I started to throw questions to myself. Am I confident to JavaScript on to really deep fundamental level? I know answers. It is unfortunately no. Am I a rare lazy ass to end up like this? No. There are a lot of people like me but we are so invisible in the industries. Well, I guess people, of course, don’t want to expose their obstacles in the professional field. I don’t blame that because I do know how it feels once you share your point of honest thoughts along with your own struggles, starting to become Achilles hills.

Besides of coding dojo, I also started to massage my brain into fundamental JavaScript. I have three JavaScript books. “Eloquent JavaScript” (Oh, if you want, you can also read the content from the website. I highly recommend to buy the book though),  “JavaScript and jQuery interactive front end web development book http://javascriptbook.com/” and “beginning JavaScript”. I think this is a good chance to review JavaScript quizzes from the books that I have again.

I picked up the eloquent JavaScript as the first re-read starter.

Below is my code solution to the quiz called “Fizz buzz”

for (i=1; i<20; i++) {
  for (i=1; i<20; i++) {
     if(i%15 ==0) {
         console.log("FizzBuzz");
     } else if (i%3==0) {
         console.log("Fizz");
     } else if (i%5==0) {
         console.log("Buzz");
     } else {
         console.log(i);
     }
  }

Well, That is easy fizzy 🙂

Day 17: Work (Animated banner) & Eloquent Javascript Exercises

6th of September

Below is my solution to the quiz “Hash triangle”

   var note = '';
   for (var i = 0; i<7; i++) {
      note += '#';
      console.log(note);
   }

Day 18: Work (Animated banner) & Coding Dojo

7th of September

I attended the Thursday coding dojo session. I was at the intermediate session and the session was about refactoring the code clearer.

If you want to try to clean the code by yourself, here is the code source you can see.

https://github.com/node-girls-australia/coding-dojo/tree/master/katas/tennis-refactoring-kata

Day 19: Coding Kata submission to the dojo session and my code solution on it.

8th of September

Half of day, I worked for my current main job. Rest of the day, I was looking for beginner kata source.

So today I found good quiz from eloquent  JavaScript and submitted my quiz to here

https://github.com/node-girls-australia/coding-dojo/commit/fd8aef223c67510dee1031a66b6b88de5b51bee9

Below is my solution to the quiz “chess board”

var boardSizeEach= 8;
var boardFilling = "";
for (var yAxis = 0; yAxis<boardSizeEach; yAxis++) {
for (var xAxis=0; xAxis<boardSizeEach; xAxis++) {
if((xAxis + yAxis) % 2 == 0)
boardFilling += " ";
else
boardFilling += "#";
}
boardFilling += "\n";
}
console.log(boardFilling);

Day 20: Eloquent Javascript Exercises

9th of September

Reversing an array(http://eloquentjavascript.net/04_data.html)

Not quite solved. I don’t know what I’ve done wrong on my code.

http://jsbin.com/mubobiv/edit?js,console


function reverseArr (arr){
var newArr = [];
for (var i=0;i<arr.length; i++) {
newArr.unshift(arr[i]);
}
return newArr;
}

function reverseArrInPl(arr) {
var temp = [];
for (var i = 0; i < Math.floor(arr.length/2);i++){
temp[i] = arr[i];
arr[i] = arr[arr.length -1 -i] = temp[i];
arr[arr.length -1 -i] = temp[i];
}
return arr;
}

console.log(reverseArr(["A", "B", "C"]));

var arrValue = [1,2,3,4,5];
reverseArrInPl(arrValue);
console.log(arrValue);

Day 21: Eloquent Javascript Exercises

10th of September

A list (http://eloquentjavascript.net/04_data.html)

http://jsbin.com/gafasi/edit?js,console


function arrayToList(array) {

var list = null;

for (var i = array.length - 1; i >= 0; i--) {

list = {
value: array[i],
rest: list
};
return list;
}
}

// console.log(JSON.stringify(arrayToList([1, 2, 3, 4, 5])));
console.log(arrayToList([1, 2, 3,4,5]));

 

Advertisements

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

 

 

 

 

Data Vis Practice – The Tasty Road (Ver.Seoul)

*This falls under the #100DaysOfCode challenge.

** Source code references belong to Lucy Park(D3 code) and Seoul open source project(Seoul TopoJSON map). This is the post to note on how D3 and TopoJson works.

The Data visualisation, especially data scientific appliance to storytelling and journalism, has been a fascinated topic. I had been thinking to start my own project on my career path, but there were not much of demands of it. Everyone wants to hire developers to work on SPA, Full SSAS, or whatever product is but not for story tellings. Perhaps because I am from artistic backgrounds or I am very active on political issues – the web development and new techs for up-to-date service based products were not fascinating me. Don’t get me wrong. I love web stuff and all new innovational approaches. I just am not into all the hype that forces me to hop on it. 2015 I was a kind of useless developer because I am not a seasoned angular developer. 2016 now I am again an incompetent developer because I am not an experienced Angular2 or React with Redux developer.

What is a framework for? Isn’t it supposed to be a tool just helping you to draw your abstract ambitions into a real product? No one answers me about that, and I don’t want to waste my time to learn things it will become useless at any time. Again, don’t get me wrong. I think those tools are very useful and there are a lot of reasons why people are on the highest fever pitch. I am..I am just not into it. I need something more..more likely me. More inspirational aspects of driving me to put my hands on and dig the craftsmanship.

From 2016 to 2017, I have seen three big elections. Presidental elections in USA, France, and South Korea. While observing those elections through media, there were a ton of delicate charts and data tables within the journalism platforms. While reading the articles, which is storytelling aside with insights, I was really into it. Lean into it, Put my emotions while reading articles, and observe the responses from crowds in the web. And finally, make changes. Some results were bitter, and some results were sweet to watch. That was the moment to give me motivation.

I decided to study more about data visualisation. It is going to be 100 challenges. It would sometimes be interactive infographics, or it could be my assignment after following some tutorials or books. Whatever would be, I think it is a good start to give myself to do something steady.

So, here is my challenge one.

I used to go to various tasty restaurants. I pinned locations on the Google map. The thing is there is an expiration date on the each pin, and I just lost my pins when they expire.

The thing is there is an expiration date on the each pin, and I just lost my pins when they expire.

So I decided to take a note where I have been in Seoul and tried to map them via d3.

There was a blog explaining how to put the pins on the maps by using TopoJson and d3. I will put all the references at the end of this post.

http://bl.ocks.org/DigitalSpaceCat/ee4aebbc1acf83e47abbb39560a77fb4#file-index-html

Screenshot 2017-06-02 15.43.02

I grabbed what Lucy built for making her own chart. The difference between my chart and her chart is how to grab and pin the restaurant. The main goal of this chart is learning d3 and how to use it. I didn’t use Python as she does for generating JSON because my main aim is to see how the coordinate location pins work on the d3 chart. I manually googled the restaurant and entered the location coordinates manually in the CSV file.

What I learned from this work is,

  1. D3 is a just tool for drawing data. It is a drawing tool with javascript code. It is not anything about data.
  2. To draw a map and transfer to topoJson, you need to know Python or R to some of the levels. You cannot do this with javascript
  3. For the data cleaning and grabbing some visualisation ideas, at least you need some other tools like MS Excel and Tableau.

I will try to make Sydney and Busan version next time.

Reference: Lucy Park’s tech blog (https://www.lucypark.kr/blog//)