Free Sample
+ Collection

Learning Raphaël JS Vector Graphics

Damian Dawber

Over 70 code examples to create vector graphics and data visualizations!
RRP $14.99
RRP $29.99
Print + eBook

Want this title & more?

$12.99 p/month

Subscribe to PacktLib

Enjoy full and instant access to over 2000 books and videos – you’ll find everything you need to stay ahead of the curve and make sure you can always get the job done.

Book Details

ISBN 139781782169161
Paperback130 pages

About This Book

  • Create impressive vector graphics and data visualizations in your browser
  • Add animation and interactivity to your web applications
  • Work with native SVGs to create complex vector graphics
  • Develop cross-browser vector graphics solutions

Who This Book Is For

Learning Raphaël JS Vector Graphics has been written for anyone with an interest in frontend browser technologies with little or no knowledge of vector graphics drawing. Designers, integrators, frontend developers, and data visualization developers will get something out of reading this book. The book assumes knowledge of HTML and CSS and a working familiarity with JavaScript.

Table of Contents

Chapter 1: The Graphical Web
Vector drawing on the Web
The SVG specification
Applications of Raphaël
Downloading Raphaël
Creating Raphaël JavaScript applications
Chapter 2: Basic Drawing with Raphaël
The drawing context
Drawing basic shapes
Embedding images
Element attributes
Working with text
Chapter 3: Drawing Paths
Path drawing concepts
Path drawing commands
Drawing curves
Utility methods for working with paths
Chapter 4: Transformations and Event Handling
Basic transformations and event handling
Working with matrices
The drag-and-drop functionality
Chapter 5: Vector Animation
Basic animation
Animating paths
Animation easing
Animating transformations
Animation using custom attributes
Chapter 6: Working with Existing SVGs
Inspecting paths
SVG to Raphaël conversion tools
Choropleth maps
Open source SVGs
Chapter 7: Creating a Suite of Social Media Visualizations
Social network usage
Tweets by time
Supplementary material
The future of Raphaël

What You Will Learn

  • Learn how to work with existing SVGs to create complex vectors
  • Become familiar with the SVG specification for creating complex drawings and the Raphaël JavaScript library
  • Get to grips with how to create complex vector drawings using paths
  • Add user interactivity to your applications
  • Learn how to apply transformations to vector graphics
  • Create stunning animations to bring your vector drawings to life

In Detail

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.

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.

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.

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.

Learning Raphaël JS Vector Graphics is packed full of illustrations and has over 70 demos to really hammer home the concepts covered.


Read More