O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

D3 and CoffeeScript

Video Description

Create powerful data visualizations by learning how to use CoffeeScript and D3. With this fast-paced video course, you’ll leverage your knowledge of Python syntax to pick up the basics of CoffeeScript, the language that compiles to JavaScript. Then you’ll tackle the fundamentals of the D3 JavaScript library for implementing visualizations that are attractive, well designed, interactive, and updatable in real-time.



If you’ve been scared away by JavaScript in the past, or hit a frustrating roadblock in previous encounters with D3, download this video or stream it through our HD player, and learn how combining D3 with CoffeeScript will allow you to build some awesome data visualizations.



  • Work step-by-step on three simple but compelling D3 visualization examples
  • Use Coffeescript as a stepping-stone to ease your way into Javascript
  • Reduce D3’s notoriously heavy learning curve by learning the basics
  • Walk away with rudimentary understanding of CoffeeScript and D3 that you can apply to other projects immediately
  • Use CoffeeScript to abstract away some of the more difficult aspects of Javascript


  • Nikhil Gopal has worked as a programmer, analyst, and scientist at major biotechnology companies such as Affymetrix and Illumina. He’s currently working on his PhD at the University of Washington in Seattle, specializing in novel algorithms and data visualization strategies in the realm of biomedical and health informatics.



    Note: learners can access practice files at http://oreilly.com/go/vis_coffeescript_examples

Table of Contents

  1. Introduction to D3 and Coffeescript 00:02:40
  2. Environment 00:08:39
  3. Python vs Coffeescript 00:06:38
  4. D3 Core Concepts 00:12:26
  5. Asynchronous 00:10:40
  6. SVG Coordinates 00:10:14
  7. Stock Chart 00:20:32
  8. Chloropleth 00:17:18
  9. Network 00:19:52