Proposal for SVG Open 2009

The SVG Open 2009 is in October at Google's campus in California. I recently submitted my proposal for a course on writing SVG through Javascript and the Raphael Javascript Library. Below is my proposal. Let's hope it is approved and I am able to continue work in SVG.

I am proposing to teach a course about building an interactive SVG module on the web through the use of the Raphael Javascript Library. From start to finish, the course will walk attendees through the process of creating an interactive widget, with a number of features ranging in complexity from basic layout to event-driven interaction. The widget will be a moderately complex application consisting of parts SVG, Javascript, jQuery, and HTML. While Javascript experience is expected, it is not necessary, considering the syntax of Javascript in this capacity is not far different than many other languages.

The widget, which will be used to demonstrate a number of techniques in creating both interactive and layered elements in SVG, is a "People Connection" module which shows a graph of how various people are connected to each other. See Figure 1 and Figure 2 for illustrations, and see http://www.daylife.com/topic/Barack_Obama/beta#title=Connections for a demonstration.

The 150 minute course will consist of 3 parts, with questions taken throughout:

• Introduction to Raphael (35 min)
  • 5 minutes: Introduction and Overview of the People Connection widget
  • 10 minutes: Looking at the Raphael JS Library's methods and documentation
  • 10 minutes: Setting up data for the module to be used in drawing
  • 10 minutes: Loading data into Raphael
• Drawing the widget (45 min)
  • 10 minutes: Images
  • 15 minutes: Shapes
  • 20 minutes: Lines, straight and curved (quadratic and bicubic)
• Interaction model (60 min)
  • 20 minutes: Handling user/triggered events
  • 15 minutes: Animation
  • 25 minutes: Interacting with the DOM and jQuery

There is a time buffer built into each part, and if there is extra time, I will be prepared to discuss:

• Raphael versus other SVG/Javascript libraries
• Other projects built on Raphael
• Browser compatibility with Raphael

For each section of the course, I plan to discuss:

• Implementation and coding conventions
• Potential pitfalls with certain techniques (browser incompatibilities, misconceptions, and common mistakes)
• Building the widget by coding in real-time (and not using blobs of code already written).

The flow of this walk-through course will be aligned with the building of the People Connection widget, where I will start with a empty file and progress over each step used in creating the overall effect and feel of the finished widget. Each piece of the widget puzzle will be complemented with a demonstration of the incremental improvement. At the end of the course, a complete widget, with all of its pieces, will be fully functional and fully explained.