Category Archives: infovis

Designing the technology of ‘Blade Runner 2049’

The original Bladerunner is my favorite movie and can be credited as sparking my interest in human-technology/human-autonomy interactions.  The sequel is fantastic if you have not seen it (I’ve seen it twice already and soon a third).

If you’ve seen the original or sequel, the representations of incidental technologies may have seemed unusual.  For example, the technologies feel like a strange hybrid of digital/analog systems, they are mostly voice controlled, and the hardware and software has a well-worn look.  Machines also make satisfying noises as they are working (also present in the sequel).  This is a refreshing contrast to the super clean, touch-based, transparent augmented reality displays shown in other movies.

This really great post/article from Engadget [WARNING CONTAINS SPOILERS] profiles the company that designed the technology shown in the movie Bladerunner 2049.  I’ve always been fascinated by futuristic UI concepts shown in movies.  What is the interaction like?  Information density? Multi-modal?  Why does it work like that and does it fit in-world?

The article suggests that the team really thought deeply about how to portray technology and UI by thinking about the fundamentals (I would love to have this job):

Blade Runner 2049 was challenging because it required Territory to think about complete systems. They were envisioning not only screens, but the machines and parts that would made them work.

With this in mind, the team considered a range of alternate display technologies. They included e-ink screens, which use tiny microcapsules filled with positive and negatively charged particles, and microfiche sheets, an old analog format used by libraries and other archival institutions to preserve old paper documents.

 

Calling the Media out for Misleading InfoViz

I was reading an article on my local news today and saw this graphic, apparently made for the article.

screenshot-2016-12-10-at-12-14-30-pm
Being from Alabama, and just a pattern-recognition machine in general, I immediately noticed it was an anomaly. The lightest pink surrounded on all sides by the darkest red? Unlikely. The writer helpfully provided a source though, from the FBI, so I could look at the data myself.

screenshot-2016-12-10-at-12-19-42-pm

There, right at the start, is a footnote for Alabama. It says “3 Limited supplemental homicide data were received.” Illinois is the only other state with a footnote, but because it’s not so different from its neighbors, it didn’t stand out enough for me to notice.

Florida was not contained in the FBI table and thus is grey – a good choice to show there were no data for that state. But as for Alabama and Illinois, it’s misleading to include known bad data in a graph that has no explanations. They should also be grey, rather than imply the limited information is the truth.

I looked up similar data from other sources to check how misleading the graphic was. Because wouldn’t it be nice if my home state had figured out some magic formula for preventing firearm deaths? Unfortunately, The Centers for Disease Control (CDC) statistics on gun deaths put Alabama in the top 4 for the most gun deaths. That’s quite the opposite of the optimism-inducing light pink in the first graphic. The graph below is for 2014 while the first graphic is for 2013, but in case you might be thinking there was some change, I also looked up 2012 (the CDC appears to publish data every two years). The CDC put firearm deaths per person in Alabama even higher that year than in 2014.
screenshot-2016-12-10-at-12-25-54-pm

In closing, I don’t think this graphic was intentionally misleading. Sure, there are plenty of examples where I would be happy to accuse malice instead of bad design. Most times it’s probably just people working under a deadline or with software tools that don’t allow custom corrections. We do have to be careful – I’d hate to see Alabama not receive aid to curb their firearm death rate based on poor information visualizations.

Parking sign re-design

I’ll be the first to admit that I experience cognitive overload while trying to park. When there are three signs and the information needs to be combined across them, or at least each one needs to be searched, considered, and eliminated, I spend a lot of time blocking the street trying to decide if I can park.

For example, there might be a sign that says “No parking school zone 7-9am and 2-4pm” combined with a “2 hour parking only without residential permit 7am-5pm” and “< —-Parking” to indicate the side of the sign that’s open. It’s a challenge to figure out where and how long I can park at 1pm or what happens at 7pm.

Designer Nikki Sylianteng created new signs for parking in Los Angeles that incorporated all information into a single graphic.

http://nikkisylianteng.com/project/parking-sign-redesign/
http://nikkisylianteng.com/project/parking-sign-redesign/

I still have some difficulty in going back and forth to the legend at the bottom, but probably just because I’ve never seen the signs before. Otherwise, one just needs to know the time and day of the week.

An interview with her can be found in the LA Weekly where she describes mocking up a laminated example in NY and asking people for feedback on the street via sharpies. (Yay for paper prototypes!) An NPR story focused on the negative reactions of a few harried LA denizens, who predictably said “I like how it was,” but I’d like to see some timed tests of interpreting if it’s ok to park. I’d also like to suggest using a dual-task paradigm to put parkers under the same cognitive load in the lab as they might experience on the street.

As for NY parking signs – I still can’t parse them.

Treemap sighting in the wild: U.S. Budget proposal

imageI get pretty excited when I see my favorite infovis being used: The Treemap

Just released today – the proposed U.S. budget as a treemap!

So, how well did this visualization work for its intended purpose:

  • Points awarded for using a treemap – it makes it so easy to see how massive social security and healthcare are.
  • Points deducted for the cluttered overlay text in the Transportation section.
  • Points deducted for making the areas clickable, but not actually providing more information beyond a platitude (“Military Personnel: When it comes to our service members and their families, America stands united in support. The budget helps ensure that those who serve our country receive all the support and opportunities they’ve earned and deserve.”)
  • Points deducted for making me click a link to “learn more” from a YouTube video of the entire State of the Union address when I could be learning more with a deeper treemap.

I’d like to see more of the blocks broken down into the components they fund, making it as informative and transparent as my go-to example of a treemap: the stock market. My second favorite treemap is a program that will treemap your harddrive, making it easy to see where those giant spacehogging files are hiding, deep in directories you forgot were there. I treemapped my lab server with it as we ran out of space and found giant video files about 10 directories down in an unlikely spot that were eating up our GBs.

Perhaps we could have a treemap that lets us change things in the budget to see how we would make it look, like the American Public Media interactive “Budget Hero” game from a few years ago (now defunct or I would link it)? I learned a LOT about what could budge and what couldn’t budge in the budget from that game.

*All the points deducted are far outweighed by my support of the treemap being used in the first place! Brilliant!

Effective visualization of an ongoing process

What does pop music visualization and neural imaging techniques have in common?  Keep reading…You may have already seen this (i’m a little late) but have you ever wanted your favorite song to last forever?  Enter “The Infinite Jukebox“.

You upload your favorite MP3 (or select among recent uploads) and the site will analyze and parse the beats.  When you hit play it will smoothly jump to another part of the song that sounds similar so there is no end.  That alone is cool, but the visualization of the process of playing and more importantly jumping to another section is surprisingly effective.  When a possible beat intersection is reached, an arc spans the circle and (randomly) jumps or stays.

The effect works best for some songs and not others.  You can get a nice at-a-glance view of the global organization of the song (highly locally repetitive like Daft Punk) or more globally repetitive (like a typical highly structured pop song):

It is probably by design that these diagrams look just like connectomes that map the neural pathways in the brain:

More on the circular diagrams of connectomes and the software used to make them (Circos).

Innate number sense changes with age

New research shows that our ability to rapidly estimate the number of things in a set (an ability called subitizing) peaks around 30 and declines with age.  Researchers posted an experiment online to measure this “number sense”.

This could have implications for the design of displays that require decision making based on judgements of the number of things.  A simple example might be comparing the star ratings on products when shopping online.

The team found that scores on the test improved gradually throughout the school years, peaking around age 30, then declining. Nonetheless, there were large individual differences in scores among people of the same age. Those differences appeared to be modestly linked to school performance: Those with the best innate number sense reported the highest ability in math in school. A subgroup of nearly 500 subjects were also asked to report their math scores on the SAT. Again, a higher innate numbers sense was associated with higher SAT scores.