Pixels Are The New Pies

It may be just me, but I think the grid approach does a better job in representing size, given there is a sense of volume to each area.

But then again, what to I know about design.

You would think that the "Designing for Print" conference did happen. These are surprisingly similar. It's a great trend to note, though, because these graphics look great. I would much rather see something like this than see a pie chart.

I suspect it also has something to do with how much easier it is to layout a square or rectangle in a print layout (or on the web) than it is to do the same with a circle. It'd probably be easier to avoid trapped white space and the like when working with grids.

I assume the white portion of the NYTimes chart is "did not respond/had no opinion", given that the percentages don't add up to 100% (10+10+24+48 = 92, and the hole is 8 blocks in size).

When I saw the example from the Times Sunday my first thought was, "bleh". I takes longer to absobe the info than a traditional pie chart would have. I suppose there's a certain kind of designer who is more interested in getting you to spend lots of time looking at his k3wl design than communicating the data.

Areas might be fine except the odd shapes make it hard to compare items. On the NYT chart on the left, compare the yellow to the brown. Same area, different shapes. You have to either count or you look at the numbers to compare the two.

A bar chart would be much easier to read.

Talk about adding needless complexity. It's like looking at a map of New England to find out which state was colonized first. I suppose bar charts are passe this season.

What a horrible idea. Any designer who has spent more than ten minutes seriously studying his/her profession should know that there are serious psychological aspects to communication being completely ignored.

Reading these pixel charts is almost impossible with any accuracy, much like telling whether a white square on a black field is the same size or different than an adjacent black square on a white field. our eyes and brains simply don't function that way.

Having someone try to grasp that some irregular area is slightly bigger or smaller than some other irregular area is about the worst form or designer abuse I can imagine.

Bar charts may be "boring", but they're boring because they are used (and abused) so often due to their effectiveness at conveying comparative information.

Edward Tufte has discussed our inability to relate the areas of a pie chart to one another before (radial areas are hard to compare). I think this new block-area based take is easier to compare the areas by utilizing the grid, but it still falls short. It does represent all of the components as parts of a whole, and I get a general sense of the data, but can accurate comparisons of similar numbers be made quickly when the two areas look completely different?

The use of irregular shapes makes useful comparisons diffictult, and the use of a common ratio, or a common height or width would make comparing quantities easier. But then, isn't that going toward a bar chart?

If the topic of discussion is visual design, then yes, these "pixel charts" are definitely more eye-catching than a traditional pie or bar chart.

If the topic is presentation of information, however, a bit of caution is in order. Quick, tell me the approximate relative proportions of dark green and light green in the left "chart." That's what I thought. My point is that any type of chart can be designed poorly. The chart on the right is much better in this regard, since all same-color pixels are in blocks, instead of arbitrary shapes. But that's more "boring," of course, and might not win kudos from the design community. "Gotta ramp it up -- make Pac-Man! Yeah, that's the ticket!"

It's not that I love boring ol' charts; I just get surprised when people start disassociating visual design from its intended purpose.

The pixel charts are atrocious. Compare the 24% region to the 48% region of the NYT chart - it looks much less than half as big. The Wired chart is just plain illegible. Radial areas may be harder to compare, but randomly shaped pixellated areas are much, much harder.

If you want to make comparative judgement easy (as the NYT graphic should), use a linear scale (bar graph or similar). Don't use areas. The Wired chart is more excusable to me, because it's not trying to facilitate compares, just to show what portion of the whole is in a category.

I simply don't like the NYT design. Awful, but at least they're experimenting. The Wired one is interesting, and at least it makes sense at first glance. This also showed up in Business Week a while back. I think it's a more catching use of the pixel/block approach: http://www.businessweek.com/magazine/content/07_24/b4038405.htm

Maybe it's the higher volume of data in the Wired and BW examples that naturally lends to better use of the form?

The NYT chart actually suggests to me that the green area is the "core" belief, around which the other responses revolve as subordinate. Gosh, I'd certainly find that offensive. And how incomplete are the options for that question? A great demonstration of how surveys can skew impressions merely by being poorly conceived.

The Wired chart is merely the latest in a continuing series of graphic design cutenesses which worked for me up until the magazine underwent a major design revision a few years ago. It's not helpful, because it requires more work to interpret this data within such a small, irregularly-divided space. Eye-catching, yes. But that wasn't enough for me to refrain from canceling my subscription. Pixels aren't the solution to everything. Print should employ its strengths while it still exists.

So at least two high-profile graphic designers apparently seem bored by convention, to the degree that they're both willing to hobble the usefulness of the work they're doing. Or their art directors are. Do I smell desperation in the air?

I never found pie charts hard to read. Thick slices vs. thin slices = greater vs. lesser. How is that a problem for a culture raised to prefer visual cues to in-depth text?

It looks to me like the designers have gotten used to those hard drive utilization tools that display your files like a packed grid of squares and rectangles. (See, for example, Disk Inventory X http://www.derlien.com/.)

These pixel type graphs confuse rather than clarify to my eyes. Looking at the NYT map, it looks like the dark green option is around 75% instead of just 48%. The pixels toward the center are "heavier" when they are grouped together. If the chart had the green tiles on the perimeter and the multiple colors toward the center it would look much more balanced. As much of a pain as the pie chart is to design with, the advantage is that the distance from center is consistent for all the options. "Spacial placement" and "solidity of grouping" in the pixel versions can be unintentionally (or perhaps intentionally) deceiving.

When I first saw the NYT chart, I interpreted it as a spiraling into the center starting on the left (bright yellow) edge. But then the center zone doesn’t work out.

In any case, it is hard to understand the relationships in either shape or color - it’s like you are looking for meaning where none exists (which may be a subtle joke, considering the topic of the article).

Yeah, this design is not very good. Why use two dimensions for one-dimensional data? Does the location of each segment mean anything? Is there a direct way to compare the data without just looking at the numbers? Do the colors actually mean anything at all? For this type of data, a simple bar graph would have been a lot more useful.

Edward Tufte would say that

>For this type of data, a simple bar graph would have been a lot more useful.

Just numbers and labels would have simply sufficed on the left. Although the relative positions still lead the viewer astray, the one on the right shows a bit more virtue its original context. There you can see rectangles being a more efficient use of space than cylinders, and the grid being used for a logarithmic expansion of relevant data.

It seems like this pixel representation takes the good part of a pie chart, a fixed area that represents the total 100%, with the good part of square areas, that they are easier to compare areas of than wedges. But it fails in that the pixels make irregular shapes, making them hard to compare.

The best bet would be to take a square (the total, 100%), and make each group not pixels but columns of equal height (the height of the square). The width of each column then determines the area and thus the data point. So you end up with a colored square comprised of a series of stripes. It's easy to compare stripe width and thus interpret the data.

It seems like this pixel representation takes the good part of a pie chart, a fixed area that represents the total 100%, with the good part of square areas, that they are easier to compare areas of than wedges. But it fails in that the pixels make irregular shapes, making them hard to compare.

The best bet would be to take a square (the total, 100%), and make each group not pixels but columns of equal height (the height of the square). The width of each column then determines the area and thus the data point. So you end up with a colored square comprised of a series of stripes. It's easy to compare stripe width and thus interpret the data.

I was pretty surprised to the the religion square pie chart coming out of the New York Times graphics department which is usually excellent. There's a good discussion about square pies from an academic perspective over at EagerEyes:

http://eagereyes.org/Techniques/SquarePieCharts.html

I have a more detailed critique of the Times chart here:

http://juiceanalytics.com/writing/2007/07/square-pie-eye/

I would suspect that the 'irregular shapes are hard to compare' argument is some of the reason to choose this layout. If you're trying to fudge some figures or spread FUD, what better way than with a confusing chart.

I think the square design is
a) easier to layout
b) familiar because of HD defrag software etc
c) New..! Improved..! Different..! Web2.0..!
d) harder to read than a pie chart

I call chartjunk. Show a damn table.

"If it ain't broke why fix it?" These charts are much harder to read than pie charts. Pie charts have been around for eons for because of their simplicity - capturing presenting the data without additional complications.

I am sorry but this just sounds like a "web 2.0" attempt to reinvent the wheel just for change sake rather than to improve something.

I'm pretty sure you could run some tests and show these pixel charts are misread by people e.g. how many people will unconsciously perceive the green area as continuing 'behind' the empty block above?

the advantage of the pie chart is that you don't have a subjective way of choosing the shape of pixels for each area: everything is treated equally

Looks to me like they’ve been playing too much Qix.

My TV has 1 big pixel. What happened to big pixels?

IMO, the left chart (NYT) is crap, becase the 24% share is too spread out.

The right one is better at this, although not as good as it could be.

Currently, only the "biggest share" is obvious in both of them.

I think the pixel charts look nifty -- well, the one on the right moreso -- but for all those who say a pie chart is "hard to read," by all means, please share some pie with me. I'll cut and you choose.

I mean, c'mon. We evolved to recognize the size of pie, not the size of randomly conjoined squares.

There is a huge flaw in representing data in this fashion, in that it doesn't fit with how humans perceive how much area is covered by different regions.

For example, I'm sure you've all heard the question "Why is the destination always on the edge of the map?"

A glance at any map reveals it's broken into a grid, say 9x5. The area of the page is 45, whereas the area of the squares of the perimeter total 24, which is over 50%.

This means that the destination is more likely to be on the edge than anywhere else on the page, something which is not obvious hence the question!

You just have to look at the game of "Go" to see how important it is to grab territory at the edge of the board, because that's where most of it is!

I just don't get it. Pie charts exist precisely to do percentage comparisons across a single dimension so that the size of the info-graphic can be parameterized easily relative to the layout of other elements on the page/screen. That's why you rarely see a pie-chart as the lone graph in any analysis. Any rectilinear visualization of the one-dimensional data has at least 1 meaningless and arbitrary dimension.

Tufte is correct that, particularly for smaller values along different polar arcs (i.e. small slices separated by significantly larger slices), relative comparison can be difficult. That's why one never sees a properly designed pie chart without an accompanying legend and/or labels with the numeric quantities. For highly categorized and sparsely populated datasets, the chart will group smaller quantities along the same arc and have an accompanying magnified view of the aggregate slices.

The only salient attribute I can find for these origami/tessellated versions of the bar-chart is that they allow for a more compact layout of the information by cleaving any associations between the legend font size and the pitch and width of the bar elements along a single axis.

Here’s why this doesn’t work - it’s not computationally efficient to compare values with these charts. These numbers could more easily be viewed/compared if they just put them in traditional x-y/cartesian space - numbers could be compared visually (is value m higher or lower than value n) instead of counting or using x*y operations to compute the actual value for any measure. Now whether this correlates to some aesthetic quality is another topic, but I know these graphs do not cut it in terms of supplying casual comparitive information, which is what these charts were supposed to do, right?

Oh, come on, does no one get the sight gag? The NYT chart is supposed to double as a graphic of a golden, greenish tunnel leading to a brilliant white light. You know, for a story on the afterlife?

I hope the graphical designer wished to be understood, but failing that he's taking the chance to laugh maniacally at you all as a small consolation prize.

brett, what a neat idea. Let's turn it 90°. And now for a name.. How about "stacked bar (chart)"?

It's called a 'treemap' folks

http://en.wikipedia.org/wiki/Treemap

I'd be interested to hear what Edward Tufte has to say about "pixel charts". My hunch is that he'd dismiss them as the latest trend in "chart junk"... that is, visual displays of quantitative data that serve to obscure understanding, rather than facilitating.

It's called a 'treemap' folks.
http://en.wikipedia.org/wiki/Treemap

Most people won't spend more than 5 seconds looking at this chart (except for people on this comment thread). With a traditional pie chart someone could spend 5 seconds and walk away with useful information. These chart require study.

LAME

Pie are square?

I crack myself up... Guffaw.

I like these better than pie charts, however, all the chunks need to be the same shape for this to convey any meaningful information. If it's simply the number of squares, then you have to actually count the squares to determine size comparison. If they're the same general shape and not irregular pieces, then you can visually judge size differences.

This is truely revolutionary

whats the point of that chart i mean now you have info in the middle and its unorganized if they were going to do that why not just make a list if they dont like the pie chart but then again i dont understand why they need to change it in the first place

@ t.s. - treemaps use rectangular shapes - no irregular junk. These graphs are pretty terrible, and if these 'pixel graphs' are going to continue on as a trend, Tufte needs to yell a little louder and stop this madness.

Yep. T.S. is correct - this type of quantified information display is typically known as a treemap. More info here: http://www.cs.umd.edu/hcil/treemap-history/

That said, treemapping is typically used to deal with information that is heirarchically related, not to compare disparate statistics or quantities.

While I like evolution in communicating complex data or trends, this goes against the whole purpose of graphic representation of data and trending. It should quickly draw in the reader by capturing their attention, compelling them to read the content. Now, if the content is the graphic, it may be a different story.

However, in this case, I would not even try to translate the charts: they are painful to look at, and I can't "get it" in 2 seconds like a pie or bar chart.

Sure, a pie chart may not depict data as finely, but you can get the big picture fast. All I see here is what someone else already touched upon: A fragmented hard drive.

Doing a grid like that keeps the smaller data points visible. A pie slice of 3% is so thin it usually gets lumped with other data to make something we can actually see. Brilliant change.

Oh noes! Lägg Å!

Curbed gets in the act today: http://curbed.com/archives/2007/08/01/graphmania_charting_construction_in_downtown_manhattan.php#468458

The Ascii art in the comments takes the cake. Asterisks are the OG pixels.

There's nothing really new here. The first example I can think of came from a French magazine I was reading in 1997. They were used in the same way as these "pixels" but were given a 3D appearance, because everyone knew back then that 3D was better than 2D. Also, many software applications have been showing data that way since many decades now, because it is just easier for the programmers.

And since I'm on the subject of software now, you should take a look at http://sourceforge.net/project/screenshots.php?group_id=179516 which shows what I believe is a better way to show multi-level data instead of that graph from Wired.

"The first example I can think of came from a French magazine I was reading in 1997." should have been "The first example on a printed format I can think of came from a French magazine I was reading in 1997 which were using cubes."

I'm not fond of this example, but a really nice modification of this style is the NYT's presentation of national election results, in which each congressional district can be displayed as a uniformly-sized square "pixel". [nyt]

The main virtue of this chart is that each 'pixel' is 1% of the area, hence if you use nice square regions folks can figure out what percentage they each are without having to label them with text (although the above examples still do). These plots definitely say more with less in that manner, however I doubt they'll ever completely eclipse the pie chart because they aren't as pretty or elegant looking.

My first encounter with this style of graphic was this carbon emissions pic:

http://www.theotherleading.com/ces/images/Grid_apr2007.jpg

Which I thought was pretty nice.

Is it me or could this be easily abused? I mean these appear to poorly display small but perhaps important differences in quantity. A devious editor could display data accurately while still making it appear as though the statistics supported (xyz) view.

Follow the link to see two pixel charts. They are meant to be confusing, which is something much easier done with pixel charts than with pie charts.

http://flickr.com/photos/mastababa/tags/stats/

I was pretty surprised to the the religion square pie chart coming out of the New York Times graphics department which is usually excellent. There's a good discussion about square pies from an academic perspective over at EagerEyes:

http://eagereyes.org/Techniques/SquarePieCharts.html

I have a more detailed critique of the Times chart here:

http://juiceanalytics.com/writing/2007/07/square-pie-eye/

I find the pixel charts to be more or less unreadable.

For example, on the religion chart you have two rows of 10 blocks each, but because one starts on the top row, and the top left block is already occupied, it's forced to wrap around one block on the right.

As others point out, comparing irregular shapes is not the best way to convey information.

I took the religion data and popped it into a pie chart. Do you honestly expect me to believe that the pixel chart is easier to read than this?

http://img247.imageshack.us/img247/1541/pietc9.jpg

These pixel charts are cute but useless for quick visualization of information.

And I don't get where people have problems reading pie charts. It seems rather easy to me -- way easier than these pixel charts.

I know for fact that some software-as-service CRM vendors such as Salesboom.com already offer business analytics using pixel charts.

Although these charts are useful for comparisons of few data items in a database, It becomes hard to understand if many data objects are analyzed, since it will be hard to see the smaller pixels as well as you will end up with too many arrows.

Yeah, and the squares suck almost but not quite exactly as much as pie charts.

Can somebody give these retards a copy of Tufte's Visual Display and a spoonful of common sense? *sigh

Find a Muralist where the artist's is the colour....

imagine if they used pixels instead of brushstrokes...

There's a book called How to Lie With Statistics the authors of those graphics should review. Then again, maybe they have and are using the graphs to make their own slanted point rather than what the data would show if done with a simple and standard pie chart.