Skip to Content
Interactive Data Visualization for the Web, 2nd Edition
book

Interactive Data Visualization for the Web, 2nd Edition

by Scott Murray
August 2017
Beginner to intermediate
472 pages
10h 17m
English
O'Reilly Media, Inc.
Content preview from Interactive Data Visualization for the Web, 2nd Edition

Chapter 13. Layouts

Contrary to what the name implies, D3 layouts do not, in fact, lay anything out for you on the screen. The layout methods have no direct visual output. Rather, D3 layouts take data that you provide and remap or otherwise transform it, thereby generating new data that is more convenient for a specific visual task. It’s still up to you to take that new data and generate visuals from it.

The list of D3 layouts includes:

  • Chord

  • Cluster

  • Force

  • Pack

  • Partition

  • Pie

  • Stack

  • Tree

  • Treemap

In this chapter, I introduce three of the most common: pie, stack, and force layouts. Each layout performs a different function, and each has its own syntax and considerations.

If you are curious about the other D3 layouts, work your way through the examples in this chapter first, to get familiar with D3’s general approach. Then check out the many examples on the D3 website, and be sure to reference the official API documentation.

Pie Layout

d3.pie() might not be as delicious as it sounds, but it’s still worthy of your attention. It is typically used to create a doughnut or pie chart, like the example in Figure 13-1.

dvw2 1301
Figure 13-1. A simple pie chart

Feel free to open the sample code for this in 01_pie.html and poke around.

To draw those pretty wedges, we need to know a number of measurements, including an inner and outer radius for each wedge, plus the starting and ending ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

AirBnbBlueOriginElectronic ArtsHomeDepotNasdaqRakutenTata Consultancy Services

QuotationMarkO’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.
Julian F.
Head of Cybersecurity
QuotationMarkI wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.
Addison B.
Field Engineer
QuotationMarkI’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.
Amir M.
Data Platform Tech Lead
QuotationMarkI'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.
Mark W.
Embedded Software Engineer

You might also like

Storytelling with Data: A Data Visualization Guide for Business Professionals

Storytelling with Data: A Data Visualization Guide for Business Professionals

Cole Nussbaumer Knaflic

Publisher Resources

ISBN: 9781491921296Errata Page