Introduction to D3, JavaScript, etc.

Materials

Example Interactive Plots

High-level D3 plots from R

Sample Code

Galleries

Understanding D3 Concepts

Animation

  • Gap Minder scatterplot over time
  • Selections

  • Selections - update, new/enter, remove alphabet example
  • An illustration of selections with three small datasets, showing which will be added, removed or updated.
  • An illustration of using selections to add, remove and update elements when the observational units in the dataset change.
  • An illustration of incorrect selections where we don't match the observations across data sets by key, but simply use the ordering/position.
  • Layouts

    Networks

  • Fisheye lens on a network
  • Discussion of how to adapt the network matrix
  • Senate matrix
  • Senate matrix with simple-minded hyperlinks
  • Senate matrix with names colored
  • Senate matrix with links to govtrack
  • Maps

    Resources

  • Running a local Web Server
  • Python
  • python -m SimpleHTTPServer &
    
    Then you can view files from this directory and its sub-directories in the Web browser via
    http://localhost:8000/filename.html
    
  • Node.js
  • http-server &
    
    Then you can view files from this directory and its sub-directories in the Web browser via
    http://localhost:8080/filename.html
    

    You first need to install http-server via

    npm install http-server -g
    
    and this requires npm to be installed as part of the node distribution.

  • D3 Reference Documentation
  • So many Web pages and examples
  • Books
    • Interactive Data Visualization for the Web, Scott Murray. O'Reilly.
    • Data Visualization with D3.js Cookbook, Nick Qi Zhu, Packt Publishing.
    • Mastering D3.js, Pablo Navarro Castillo, Packt Publishing