Learning Raphaël JS Vector Graphics

Over 70 code examples to create vector graphics and data visualizations!

Overview

• 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

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.

What you will learn from this book

• 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

Approach

A step-by-step guide to understanding the principles underlying vector drawing, using illustrations and code demos along with interactive maps to fully exploit the JavaScript library to create a data visualization widget.

Who this book is written 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
Chapter 2: Basic Drawing with Raphaël
Chapter 3: Drawing Paths
Chapter 4: Transformations and Event Handling
Chapter 5: Vector Animation
Chapter 6: Working with Existing SVGs
Chapter 7: Creating a Suite of Social Media Visualizations