OpenVisConf was a conference held on 16th and 17th May in Boston, around the topic of visualization on the web. Here's what I learned.
TL;DR
Visualization, and especially interactive visualization, is starting to centralize on the web stack, but we're still just at the start of the medium. There's enormous possibilities, but few conventions and a lot of work that's more focused on technical achievements than on the substance of the data: more judicious editing is needed. Visualizations should convey a message and impart understanding, rather than going for a dazzling "wow" factor.
The "medium" of visualization today is Canvas, SVG, straight HTML/CSS, and/or WebGL; nearly everyone is using d3. R, Tableau, and Processing are used widely for exploration and prototyping. Canvas and SVG are definitely the most common; they have different applications. (For maps, people are generally using d3.geo and MapBox.)
Everyone is thinking about mobile/touch screens, but no one has really good solutions for it yet. Responsive design doesn't seem to map well onto visualizations, and some people have despaired entirely of getting enough responsiveness out of JavaScript and built native apps instead, or built much simpler "lo-fi" versions that had lower technical requirements and could be made responsive.
Also, Doug Schepers' talk on accessibility in visualization was brilliant and you should watch it when they put the video up. (I've summarized it a bit below, but there's a lot I didn't mention.)
Useful Points
- d3 is really awesome.
- Think about what you miss because of the tools you use. Different tools give you different things for free, and make other things hard. (Amanda Cox)
- Make sure you're solving interesting & useful problems: don't just visualize data, visualize the right data. (Juan Velasco, Jesse Kriss)
- Keep thinking outside of your usual wheelhouses so you know what the useful problems & the right data are. (Santiago Ortiz)
- Don't settle for limited datasets or aggregated data--dig into the details to find insightful connections and make the data come alive and tell a story. (Kim Rees)
- Data visualizations sit on a scale from the specific and easy to understand to the abstract and difficult to understand. You can gain understanding of a greater portion of a system/amount of data by adding layers of abstraction, but doing so means your user will have a greater cognitive load to get actionable information back out. (Abe Stanway)
- Edit and simplify. Be very judicious in what you present: don't overload your audience with data. Cut to the heart of the matter. (Juan Velasco)
- But it's good to let your users explore the data (after)--a good tool lets the user come to her own conclusions and also builds trust. (Kim Rees)
- Prototype a lot. Sketch things, play with data in R or Tableau and play with designs in Processing to come up with the right idea. Iterate, iterate, iterate. (And remember that iteration can take a long time. The difference between the right solution and almost the right solution can be very large.) (Amanda Cox, Kim Rees, Shawn Allen, Juan Velasco)
- Data visualization isn't just maps/charts/graphs: it can also be diagrams, videos, and even artistic renderings. There are near-infinite ways to visualize any data structure (Juan Velasco, Santiago Ortiz)
- Use sound and narration: people respond very well to being talked through an interactive. (Juan Velasco)
- Templating data visualization doesn't often produce great results. A cookie-cutter visualization is like a mad-libs journalism piece: it'll fill a column and do its job, but it's not likely to make a connection with the reader. (Amanda Cox)
- Certain strategies can work well: "illusions of comprehensiveness", "the goofy comparison", e.g. (Amanda Cox)
- Good design is important. A design that "delights" is likely to convey its message more effectively, even if a plain bar chart could've done the job. (Amanda Cox)
- Beware of the "wow" factor. It comes in two flavors: "Wow! …huh?" and "Huh? …wow." The first one is useless: impressing without comprehension is just showing off. Try to wow through insight. (Many people)
- Multiple technical solutions available on the web now: HTML/CSS, SVG, Canvas, WebGL. Each have advantages/disadvantages, so choose accordingly...
- HTML/CSS is great for simple or word-heavy data vis: it's extremely extremely fast and it's supported everywhere, but it's fairly limited in what it can present (though not as limited as you might think). (Miguel Rios, Shawn Allen)
- SVG is a little slow (especially on mobile) and it doesn't have great support (especially on mobile), but it makes interactivity really easy and having strong bindings between your data and the DOM lets you get away with some great things. (Miguel Rios, Shawn Allen)
- Seriously, guys, d3, amirite?
- When you're binding data to DOM elements, stick your data into data elements. You can style with them (e.g.
[data-value>4] { fill: red; }), and they're always there if you need them. More information = more flexibility. (Alex Graul, Shawn Allen) - SVG is also really cool for accessibility. Put a title attribute on your SVG elements and presto! you can have a screenreader-able chart. Text elements also get read out. Plus, SVG elements can take ARIA roles, so you can make sophisticated interactives accessible. (Doug Schepers)
- Canvas is widely supported (even on mobile) and quite fast (even on mobile). It's really flexible, but it's a little hard to make it interactive--you have to manage your object model and click maps separately from the visual representation. (Miguel Rios, Gabriel Florit, Shawn Allen)
- Plus, you can do compositing in canvas--use pixels as data to help interactivity, or just encode three data layers into RGB. (Note, however: dealing with canvas pixel maps is janky and slow.) (Shawn Allen)
- WebGL is amazingly fast--since it's hardware-accelerated, you can handle millions of points of data without a hiccup, but it's extremely difficult to use and there aren't a lot of great JS frameworks yet. (three.js got some mentions here.) Also, support is still pretty limited (Chrome, Safari, Firefox). (Miguel Rios, Shawn Allen)
- JavaScript is becoming the default platform for doing data visualization--there's a standardization of tools for data vis in JavaScript that hasn't really happened yet. (Alex Graul)
- Speaking of standard tools, have you heard of d3?
- Trust in JavaScript. It's a lot faster than you think it is. It's slower on mobile, but it's still probably faster than you think. (Alex Graul, Shawn Allen)
- When building visualizations, don't try to come up with a comprehensive solution: make sure you build something that's flexible and extensible. No black boxes. Also, beware Not Invented Here syndrome. (Alex Graul)
- Consider how d3 has already solved your problem.
- State machines are really useful for managing transitions in visualizations. (Especially ones that are narrative or transition between exploratory and narrative states.) (Alex Graul)
- Use CSS transforms: they're really fast, and they can let you get away with tricky things, like animating a graph rescaling without having to animate dozens of elements at once by applying transformations to the data. (Kai Chang)
- Responsive visualizations are really hard--there aren't a lot of great solutions. Simplify on the mobile side when you can--don't be afraid to be reductive. Don't try to force it, either: if a complex interactive just won't fit on a small screen, it won't fit. Don't show it. (Gabriel Florit, Shawn Allen)
- Stick to interface conventions, especially in touch interfaces. Keep your visual and functional metaphors straight.
- Think about "the original data visualization", something like an avocado: you can tell many things about it by looking at and touching it, and it's very intuitive. (Dominikus Baur)
- Consider solving small screens with layered content, letting users drill down into an interactive where it might be a single screen on a larger one. (Dominikus Baur, Juan Velasco, Gabriel Florit)
- In touch interfaces, keep interactions as close to the objects as possible. Avoid buttons and other abstracted interfaces. (e.g., bar charts you can swipe up and down lead to better information retention than ones you can edit with buttons). (Dominikus Baur)
- Did I mention d3?
Other interesting things
Doug Schepers' presentation on accessibility was really eye-opening. In addition to text/title attributes and ARIA, he also discussed some things coming in SVG to deal with metadata about relationships between of elements. Also, he showed some fantastic work on converting graphics into sound using pitch.
Kai Chang's talk on uses of parallel coordinates involved some seriously awesome math, but it's a technique that opens up really cool possibilities for teasing information out of particularly dense datasets. Check out his github page.
Tom MacWright demoed TileMill 2, which looks a lot like the earlier version, but is astonishingly fast. They're also doing some neat stuff using tile sprites to show different layers on the map with one image.
Gabriel Florit's talk on responsive visualization was a little disappointing--it sounds like he's found at least as many problems as solutions. He showed some thoughtful techniques for trying to deal with touch input on small screens, but nearly all of them involve serious compromises. I came out thinking that in most cases, you'll need to create separate versions.
Thanks so much to @ireneros and the folks at Bocoup for putting this conference together! It was a fantastic experience.