Book Image

D3.js 4.x Data Visualization - Third Edition

By : Aendrew Rininsland, Teller
Book Image

D3.js 4.x Data Visualization - Third Edition

By: Aendrew Rininsland, Teller

Overview of this book

Want to get started with impressive interactive visualizations and implement them in your daily tasks? This book offers the perfect solution-D3.js. It has emerged as the most popular tool for data visualization. This book will teach you how to implement the features of the latest version of D3 while writing JavaScript using the newest tools and technique You will start by setting up the D3 environment and making your first basic bar chart. You will then build stunning SVG and Canvas-based data visualizations while writing testable, extensible code,as accurate and informative as it is visually stimulating. Step-by-step examples walk you through creating, integrating, and debugging different types of visualization and will have you building basic visualizations (such as bar, line, and scatter graphs) in no time. By the end of this book, you will have mastered the techniques necessary to successfully visualize data and will be ready to use D3 to transform any data into an engaging and sophisticated visualization.
Table of Contents (11 chapters)
3
Shape Primitives of D3

Animation

The first question worth asking is: Why would animation improve this project?

If you're making something that isn't really intended to communicate data and is just designed to trip people out at your local warehouse rave, then because it would make it look cool is a totally valid response. Don't let me discourage you from running rainbow color interpolators through your charts if you think it'd be fun (because, speaking from personal experience, creating crazy animated art with D3 is a rather enjoyable use of a Saturday afternoon).

If, however, you're rendering data, a bit more consideration is probably necessary. What is your data doing? If it's a value increasing over time, animating a line going upward from left-to-right makes more sense than fading in the line all at once.

Previously, we set attributes on our various SVG objects as we...