Starting a Web Server on MAC for D3.js

Running the webpage locally requires starting a web server especially if it has javascript in the webpage.

  1. download/clone the repository from github link (or any other link) to a folder in your machine.
  2.  Switch to terminal and cd into the folder containing downloaded files and start the webserver as follows
     python -m http.server 8070

    This will start a webserver on the port 8070.

  3. Open web browser and type: ​http://localhost:8070/index.html
  4. index.html is loaded by default. Instead of index.html append [name].html to view the corresponding page.

Was used for this project.


Learning GIT version control

git has undoubtedly become the version control standard throughout industry and this skill is almost inevitable for collaboration. This post is a small starting point for anyone new.

git documentation can be intimidating/overwhelming for most newbies  with lots of options/commands. In reality, most developers end up using a handful.

[Since it is always hard to remember], I have this cheatsheet (atlassian) posted on my desk.

Another nifty little command on MAC terminal to get the graphical repository browser :

$ gitk

Check these awesome websites which can teach you to use git graphically.


  1. (highly recommended)
  2. Git-IT (Git is an excellent learn by doing cross-platform project)

Some useful links for beginners to get involved

  3. Medium blog for first timers

Finding d3 bl.ocks

If you are a user of d3 for visualization, you might already know what a bl.ock is. Apart from Mike Bostock’s bl.ocks, often it is very hard to navigate/find a good examples which you can use and build on top. Since most of the d3 examples are new creative ventures, it is often hard to classify them and hence indexing. These are some websites where you can navigate bl.ocks of users :



View story at

Return top “N” elements from an array

top_n returns a mask = [True, False, True, False, False ...] with “True” for top n values. The mask is passed into an array as index to get “True” values.

import numpy as np
from scipy.stats import rankdata

def top_n(list_array, n = 1):

  Returns a boolean mask with "True" for greatest "n" number of values
  np_array = np.array(list_array)
  # creating a mask
  mask = np.zeros(len(np_array.flatten()), dtype=bool)
  r =rankdata(np_array, method ="dense")
  # rank matrix with highest value =1
  for index, val in enumerate(r):
    if  val <= (n):
	mask[index] = True
  return mask.reshape(np_array.shape)

boolean_filter will return a list where boolean is true.

def boolean_filter(b_list, boolean):
  This function returns values in b_list where the boolean is true
  return [item for i, item in enumerate(b_list) if boolean[i]==True]