Book Image

Data Visualization with D3 4.x Cookbook - Second Edition

By : Nick Zhu
Book Image

Data Visualization with D3 4.x Cookbook - Second Edition

By: Nick Zhu

Overview of this book

Master D3.js and create amazing visualizations with the Data Visualization with D3 4.x Cookbook. Written by professional data engineer Nick Zhu, this D3.js cookbook features over 65 recipes. ? Solve real-world visualization problems using D3.js practical recipes ? Understand D3 fundamentals ? Includes illustrations, ready-to-go code samples and pre-built chart recipes
Table of Contents (21 chapters)
Data Visualization with D3 4.x Cookbook - Second Edition
Credits
About the Author
About the Reviewer
www.PacktPub.com
Customer Feedback
Preface

Binding an array as data


One of the most common and popular ways to define data in D3 visualization is through the use of JavaScript arrays; for example, say you have multiple data elements stored in an array, and you want to generate corresponding visual elements to represent each and every one of them. Additionally, when the data array gets updated, you would want your visualization to reflect such changes immediately. In this recipe, we will accomplish this common approach.

Getting ready

Open your local copy of the following file in your web browser:

https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter3/array-as-data.html .

How to do it...

The first and most natural solution that might come to mind is iterating through the data array elements and generating their corresponding visual elements on the page. This is definitely a valid solution, and it will work with D3; however, the enter-update-exit pattern we discussed in the introduction provides a much easier and more efficient...