- What Are Data-Joins?
- A Conceptual Overview of Data-Joins: Enter
- Enter and Binding Data
- Using a Data-Join to Make a Bar Chart
- Using Anonymous Functions to Access Bound Data
- Finishing the Rest of the Chart
- Storing Data in Objects
- Summary
This chapter is from the book
This chapter is from the book
This chapter is from the book
A Conceptual Overview of Data-Joins: Enter
To cover how data-joins work, I’m going to introduce a new example, one that involves all the most fundamental aspects of using data-joins. To build our trusty old age distribution bar chart, we are indeed going to use data-joins, but not all aspects of them. So, although it’s a bit of a diversion, introducing a new example will help us cover the entire breadth of what data-joins are about.
This chapter only covers part of what data-joins can do, specifically the enter part of their life cycle. But we’ll come back to this same example to cover update and exit in Chapter 8.
Okay, here goes: Say you have a friend named Frank, and Frank has a strange obsession with celebrity gossip magazines and tabloids. US Weekly, People, the National Enquirer...if it’s a publication you’ve ever stared at idly while waiting in the grocery store checkout line, then Frank has a keen interest in it. The thing is, he doesn’t really care about the latest updates on Kim and Kanye. He just wants to know one thing: Who’s on the cover?
Frank has been taking note of the most prominently featured celebrities on the covers of about 20 different magazines and newspapers—a total of 50 covers a month—for an entire year. Plus, he’s done some additional research to figure out who was on those covers during the four years before he started paying attention. “I think the celebrities we are preoccupied with at any given time says a lot about the national psyche,” Frank says, a little too often. You have your doubts, but when Frank approaches you and asks if you’ll help him visualize all that information, you can’t say no.
Frank’s idea is to show the five most-featured celebrities every month for all five years of data he’s amassed. He wants the visualization to be interactive and animated, but he’s not sure what he wants it to look like. You have an idea, though. You scribble on a notepad for a few minutes, hand Frank a sketch (shown in Figure 5.1), and describe it. The graphic opens on a list of the top-five celebrities by cover count for the oldest month in the set, January 2009, you tell him. Next to each celebrity’s name is a bar that represents how many covers he or she appeared on that month, so it’s clear if one celebrity has totally dominated. The user will be able to switch to subsequent months in one of two ways: She can press a play button and sit back as the graphic advances through the months on its own, or she can move a slider to navigate to a month of her choosing. When the graphic transitions from one month to another, new celebrity names will enter the ranking, others will exit it, and still others will move up and down in the list, with their associated bars expanding and contracting to meet the updated cover count. “Sweet!” exclaims Frank, and he emails you his 3,000-row spreadsheet.
)
Figure 5.1 The rough sketch we made for Frank
Enter, update, exit...D3 was made for this.