Chapter 9. Lay Them Out

In this chapter we will cover:

  • Building a pie chart
  • Building a stacked area chart
  • Building a treemap
  • Building a tree
  • Building an enclosure diagram

Introduction

The D3 layout is the focus of this chapter—a concept we have not encountered before. As expected, D3 layouts are algorithms that calculate and generate placement information for a group of elements. However there are a few critical properties worth mentioning before we dive deeper into the specifics:

  • Layouts are data: Layouts are purely data centric and data driven, they do not generate any graphical or display related output directly. This allows them to be used and reused with SVG or canvas or even when there is no graphical output
  • Abstract and reusable: Layouts are abstract, allowing a high degree of flexibility and reusability. You can combine and reuse layouts in various different interesting ways.
  • Layouts are different: Each layout is different. Every layout provided by D3 focuses on a very special graphical requirement and data structure.
  • Stateless: Layouts are mostly stateless by design to simplify their usage. What statelessness means here is that generally layouts are like functions, they can be called multiple times with different input data and generate different layout output.

Layouts are interesting and powerful concepts in D3. In this chapter we will explore some of the most commonly used layouts in D3 by creating fully functional visualization leveraging these layouts.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset