Skip to content
Branch: master
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
38 lines (23 sloc) 2.06 KB

Class: Intro to D3

In this workshop, you'll learn the basics of D3.js, an exciting JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS to create interactive visualizations on the web.

The workshop will be a mix of lectures and hands-on exercises in pairs. It will be taught by {{ teacher_name }}, {{ teacher_description }}.

Topics covered

  • SVG basics
  • D3 data-binding, events
  • D3 scales, axis, colors
  • Creating charts



Attendees should be comfortable with HTML and CSS fundamentals (HTML tags and attributes, CSS selectors) and JavaScript fundamentals (syntax, data structures, conditionals, loops). Attendees should also be comfortable with the DOM API (access and modification methods). That means that you attended our Intro to HTML & CSS workshop, Intro to JavaScript workshop, and Making Webpages Interactive workshop, or you learned those concepts online.

You can review them online at a few places:

  • HTML & CSS: Khan Academy's HTML & CSS course, Codecademy's HTML & CSS course, GDI SF's HTML & CSS slides
  • JS: Khan Academy's Intro to JS course, Codecademy's JS course, GDI SF's JS slides
  • DOM API: Khan Academy's "Making Webpages Interactive" course, GDI SF's "Making Webpages Interactive" slides

Tech requirements

  • Your laptop (Mac, PC, Linux) and charger
  • A modern web browser (Chrome, Firefox, Safari)
  • A text editor - we recommend either Sublime Text 2 or Atom (both free)

If you do not have a laptop, please contact the instructors. We have a limited number of Chromebooks for students to borrow.


Payment is required to attend. If you'd like to attend but cannot afford the cost, click here to request a scholarship. Due to the number of applications, only the scholarship recipient will receive an email a few days before the workshop. Thank you for your understanding!

You can’t perform that action at this time.