Book Image

Learning Raphaël JS Vector Graphics

By : Damian Dawber
Book Image

Learning Raphaël JS Vector Graphics

By: Damian Dawber

Overview of this book

<p>Raphaël is an exceptional library that makes drawing vector graphics in the browser straightforward. It boasts a large number of methods that facilitate drawing and animating graphics, allowing developers to create flexible, interactive web applications and data visualizations.<br /><br />Learning Raphaël JS Vector Graphics takes you from being a complete vector graphics novice to an accomplished vector graphics developer. Packed with illustrations and code demos, this book covers a wide array of concepts and takes you through them by example. The Raphaël library is covered in detail and in the context of its real-world applicability. <br /><br />This book looks at the powerful vector graphics drawing library, Raphaël, and how you can utilize it to draw vector graphics and create interactive web applications with ease.</p> <p><br />You will learn how to draw complex vector graphics and how to transform, animate, and interact with them. We will also look at working with existing vector graphics to add an extra layer of complexity to our applications, and finish up by creating a series of data visualization demos. If you want to learn how to create appealing, interactive graphics and data visualizations, then this is the book for you.</p> <p><br />Learning Raphaël JS Vector Graphics is packed full of illustrations and has over 70 demos to really hammer home the concepts covered.</p>
Table of Contents (14 chapters)

Animation using custom attributes


Raphaël facilitates advanced animation via custom attributes . Custom attributes can be used to apply, or animate, multiple attributes on a particular element based on custom-defined logic.

Custom attributes

A custom attribute is a custom-defined function that returns a set of attributes to be applied to an element. It can be thought of as a helper function for which existing attributes are derived based on calculation. A custom attribute is defined as an attribute of the customAttributes namespace as follows:

Paper.customAttributes.yourAttribute = function(a1, a2, ...){};

Here, the a1, a2, ... arguments are numeric and yourAttribute is the name of the custom attribute. A custom attribute can then be used in the same ways that we have used other element attributes so far.

As an example, consider that we need to represent population data using the following:

  • The radius of a circle to indicate relative population size

  • The color of a circle to indicate how densely...