Dataviz needs good UI tools

by Sergiy Nesterko on May 12th, 2015

A few weeks ago I set out to participate in a geospatial visualization challenge. It was exciting to finally get a chance to make an interactive map with more than markers and basic mouseover effects. It was also intriguing to try and display uncertainty on a map.

But, even the basic visualization below took more time than planned.

See databit Geospatial Prototype by Sergiy Nesterko on Databits.

What I realized very soon after starting my work was that I was spending 80% of the time implementing the user interface for my visualization. This UI experiment, for example, combines a tooltip with clickable menu. It took the most time and still isn’t well rounded!

This is a real problem. I want to think about how to make an aesthetically pleasing and effective visualization, and not endlessly debug a misbehaving UI element.

Can the lack of good open source UI elements be a limitation for dataviz? Are makers of visualizations constrained in their creativity because of the lack of good UI elements? I set out to see about that. Here is a competing challenge entry by Quinn Lee:

See databit medical geospatial by Quinn Lee on Databits.

Here Quinn uses a very nice generalized cross filter library called DC.js.

The main UI elements of Quinn’s data visualization are the plots themselves — you can click on their parts, zoom in/out on maps, and highlight a range of the time series plot. All these interactions will change the way the plots look. This is great. The only caveat is that this UI pattern is native to DC.js and is not very generalizable should you decide to say replace the maps in Quinn’s visualization with maps built with d3.geo.

Here is another challenge entry, by Moritz Winger.

See databit GeoSpatial Challenge by Moritz Winger on Databits.

I really like the colors and style of the piece.

In terms of UI, you can interact with the visualization by hovering over different elements, and clicking some of them. The question is this: would a rich open source UI element library help Moritz make an even better visualization?

I would like to see these elements available when making an interactive visualization:

  1. Good tooltip menus for hover effects. D3-Tip is a great start and no wonder it gets o much usage and development. But, it does not always work
  2. Good contextual menus. That is what I am working to implement with my TooltipMenuHybrid class in the first visualization in this post
  3. Good open source libraries for positioning your plots in a mobile-friendly layout, and to allow users to drag and resize them. Again, my LittlePlot class above is one such experiment
  4. Libraries for keeping the state of the visualization in the URL bar
  5. …and so on

That said, it has certainly become easier to analyze data and convey data-driven insight today than ever before. The growth in open source
tools and related resources for dataviz isn’t slowing down. That means that the set of UI options available to creative coders will keep expanding and the bottleneck I describe here will soon go away.

Tags: , ,

Leave a Reply