Network Analysis and Visualisation for the Web

Tutorial, Mozilla Festival, 2014

A tutorial demonstrating techniques to visualize our Facebook networks using the Facebook API and Python.

Source code

Generate the network graph

  1. Download the code from the GitHub repo. Unzip.
  2. Download your network data from the Facebook API.

    -‘Personal network’ -> start -> click ‘gdf’ and Save as…

  3. Put this data inside the unzipped folder from GitHub.
  4. On command line, go inside the InteractiveVis folder.
  5. Make script ‘’ executable:

    chmod u+x

  6. Run the GitHub script to install dependencies:

    sudo ./

    -This installs numpy, networkx, and pyparsing. It’s important that the networkx installed in your Python is version 1.8.1.

  7. Run the Python script to load data, detect communities, and layout nodes:


  8. Load up a local server:

    python -m SimpleHTTPServer

  9. On Firefox, go to: http://localhost:8000/network/?config=config_fb.json/

Analyze the network graph

  1. Import the NetworkX library into Python:

    import networkx as nx

  2. Import the Counter object:

    from collections import Counter

  3. Import graph data into Python:

    G = nx.read_gml('facebook.gml')

  4. This will allow you to export the nodes in a useable format, for example:

     cent = nx.degree_centrality(G)
     cent = Counter(cent)

    -These functions combined will output the 10 most connected nodes in the graph. There are many other centrality measures, see the documentation for NetworkX