Prep & Review

First, let’s review how to create single chart. We’ll use unemployment data from US Bureau of Labor Statistics. Here are the steps Use pandas to load a csv file to a DataFrame Use Pandas.to_datetime to convert the DATE column into a Series of datetime values Create a line chart that visualize the unemployment from 1948: x-values should be the first 12 values in the DATE column y-values should be the first 12 values in the VALUE column Formatting the chart use pyplot. [Read More]

Binary Addition

We can add binary numbers together, just like we can with base 10 numbers In the example below: a is in base 10 – because we have 10 possible digits, the highest value we can represent with one digit is 9 When we want to represent a value one higher, we need to add another digit. a now has two digits – we incremented the invisible leading digit, which was 0 and is now 1, and set the last digit back to zero. [Read More]


What's new with ES6

ES6 has brought a huge number of updates to the Javascript languages. Some of them are extremely handy such as arrow functions. However, we also need to pay extra attention to some of the nitty gritty nuisances. For example, arrow functions are nice and succinct however it doesn't have its own this or arguments keywords, which could be useful for some cases but the coder need to really understand the context. [Read More]

Python Function

Use function to avoid repetitiveness

Function is a powerful concept in any programming languages. It's very useful to avoid repetitive coding or WET (Write Everything Twice+) coding style. Instead we should promote DRY (Don't Repeat Yourself) style. In this tutorial, we will only cover the basics about the Python Functions. How to define a function, parameters (single, multiple, optional), return multiple values, write proper docstrings to document the function. At the end of the project, I also provided a synthesis exercise to show how to build a function and use it conveniently in a more real world scenario. [Read More]

Javascript keyword "this"

Examine the keyword "this" and how to use it

"this" is a reserved keyword in Javscript. It is usually determined by how a function is called ("execution context"). It can't be set by assignment during execution, and it may be different each time the function is called. Whenever a javascript function is run, two js keywords are given to that function: "arguments" and "this". "this" can be determined using four rules: Global, Implicit, Explicit and New. We also discuss how to use apply, call and bind functions to apply the explicit rules. [Read More]

Python Fundamentals

All the python basics you need to get familiar with

In this tutorial, we will learn all the basics to start with Python. Topics covered here includes data types, lists, loops, dictionary etc. We will also take a peek at some more advanced techniques such as list comprehension and dictionary comprehension. Although there are a number of libraries that can make a Pythonist's life even easier, have a solid foundation would be a key to understand and learn more advanced topics. [Read More]

D3 Embedded with Jupyter Notebook

Use Jupyter notebook to draw D3

In this tutorial, I will embed D3 object into Jupyter Notebook. It's not recommended to write D3 or javascript in general with Jupyter notebook, but I could see some benefits from a literate programming perspective. I can see the results right away instead of rendering the whole html page or use Blockbuilder, which is actually pretty neat. I would definitely use blockbuilder on the fly or learn from others' works. Another benefit of using Jupyter notebook is to conveniently use Python to generate data and assign it to the D3 object. [Read More]

D3 Visualization Enter-Append method

D3 Use Enter Append to add elements

D3-Visualization-Enter-Append What if we don't have elements predefined in svg? What should we do to add/match data with DOM element? We can use enter.append() method Untitled2 /*! * * Twitter Bootstrap * */ /*! * Bootstrap v3.3.7 ( * Copyright 2011-2016 Twitter, Inc. * Licensed under MIT ( */ /*! normalize.css v3.0.3 | MIT License | */ html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } a { background-color: transparent; } a:active, a:hover { outline: 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } dfn { font-style: italic; } h1 { font-size: 2em; margin: 0. [Read More]

Advanced Javascript Array Methods

forEach Iterates through an array Runs a callback function on each value in the array always returns “undefined” var arr = [1,2,3,5] arr.forEach(function(d,i,arr){ console.log(d,i); }); How does forEach work var forEach = (arr, callback) => { for(var i = 0; i < arr.length; i++) { callback(arr[i],i,arr); } } Using forEach in a function var halfValues = (arr) => { let newArr = []; arr. [Read More]

JS Closure

Definition A closure is a function that makes use of variables defined in outer functions that have previously returned We have to “return” the inner function for this to work We can either call the inner function right away by using an extra () or we can store the result of the function in a variable Closure only exists when an inner function makes use of variables defined from an outer function that has returned. [Read More]