Visualizing Proportions - Data Points: Visualization That Means Something - page 157

You're still missing the horizontal axis, so add another Rule, separately to
get what you see in Figure 5-15.

P To see and
interact with the
stacked bar graph,
visit http://
book.flowingdata
.com/ch05/
stacked-bar.html .
Check out the
source code to see
how HTML, CSS,
and JavaScript fit
together.

vis.add(pv.Rule)
.bottom(y)
.left(-15)
.right(0)
.strokeStyle(“#000”)

Lead-in copy and remaining labels are added with HTML and CSS. There
are entire topics for web design though, so I'll leave it at that. The cool
thing here is that you can easily combine the HTML and CSS with Protovis,
which is just JavaScript and still make it look seamless.

Hierarchy and Rectangles

In 1990, Ben Shneiderman, of the University of Maryland, wanted to visu-
alize what was going on in his always-full hard drive. He wanted to know
what was taking up so much space. Given the hierarchical structure of
directories and files, he first tried a tree diagram. It got too big too fast to
be useful though. Too many nodes. Too many branches.

P See http://
datafl.ws/11m
for a full history
of treemaps and
additional ex-
amples described
by the creator, Ben
Shneiderman.

The treemap was his solution. As shown in Figure 5-16, it's an area-based
visualization where the size of each rectangle represents a metric. Outer
rectangles represent parent categories, and rectangles within the parent
are like subcategories. You can use a treemap to visualize straight-up pro-
portions, but to fully put the technique to use, it's best served with hierar-
chical, or rather, tree-structured data.

FIGurE 5-16 Treemap generalized