Meet Bloomberg’s Dataview
Iterating toward a reusable animated chart flow
At Bloomberg, we talk about data a lot. Whether it’s market movements or government policies, we find ourselves describing numbers, trends, and changes over time. Articles will often facilitate this with the usual sequence of descriptive paragraphs followed by static charts. On the Visual Data team, we are taking this pairing of data and narrative and creating new experiences. The team consists of both news graphics and data products components, but the lines are often blurred. We have five graphic journalists working directly with newsroom editors on mostly short-term graphics, two designers that work on more long-term features, two prototypers playing with new ideas/data and making interactive graphics, as well as three developers building infrastructure, guiding product development, and keeping the lights on. A relatively tiny team compared to a graphics behemoth like the New York Times, especially considering how many journalists Bloomberg has (~2,400). It’s in our best interest to come up with formats that are dynamic and reusable.
One of our most recent works, “How Americans Die,” is an instance of what we call a “dataview.” The impetus behind dataview was a hope to provide clear and concise storytelling, while giving the supporting data more prominence and explorability. With our team leader, Lisa Strausfeld’s idea that “the data is the story, and we’re just walking you through it,” it made sense to flip the paradigm of charts placed in a body of text. Instead we wanted the chart to be fully immersive on screen and add notes, like signposts, to guide you.
We found a perfect editorial partner in Bloomberg View contributor Matthew Klein, who has a deft hand at mining data, analyzing it, and paring it down to the most compelling points. View publisher, Tim O’Brien noted Klein’s data-centric work and brokered the marriage with our team. So we based our initial build of the dataview around an in-progress jobs report piece that Matt worked up to debunk the cheer of overall employment numbers increasing and expose the lack of high-paying positions available since the recession. It was a bit of a back-and-forth cutting the copy down into shorter, tweet-like notes, and getting the pacing right, feeling it out as we went along. We also added features for better comprehension like dropping the opacity on certain datasets in a group and highlighting time periods along the x-axis to make the view better reflect the note contents.
Anatomy of a Dataview
The main components are broken out into datasets, scenes, and notes. It handles each dataset as a unique object and gives it attributes such as color, units, label, and source. Scenes are described as being within a certain time period, containing specific datasets, and having a choice of render method. Currently the choices are lines, areas, stacked areas, columns, or stacked columns—standard charting. Other parameters can be given for an animated pan/zoom on a desired scope or having multiple y-axes. Notes are pulled from the html and paired with each scene. These are also used for the Internet Explorer < 9 version, which is a slideshow of screenshots.
As you move from scene to scene the chart is simply updating by changing the extent of time and domain of data. It moves the previous rendering along the axes in the scale of the next to be drawn. This gives the appearance of sliding around one boundless chart, housing all the data. The dataview adapts to the client screen size on load and stays responsive by keeping the view state and re-rendering the whole svg once the window is no longer resizing. Given the lean amount of content in each view, this allows it to work well on desktop or mobile. We’ve been adding features with each iteration—highlighting different datasets by clicking their label, keyboard arrow control—but still need to add better touch events and a way to scrub the data without a mouse.
Composing “How Americans Die” took Matt about 50 hours. On projects like this, he hands off a thorough Excel document with all data, versions of the charts, and corresponding notes, which makes it very easy for me to bring it all into the framework. (This is the current manual process for authoring a dataview, but we hope to soon make an easy interface so the form can be used more widely by other editors.)
Tuning and Feedback
Another result of wanting to publish quickly, was that we didn’t do much user testing. Google Analytics gives us a good indication that a large majority of visitors click all the way through, however, comments on HackerNews from “How Americans Die” have been an abundant source of feedback. There was confusion over why deaths were shown as either total individuals, or per 100k, or as a percentage—people felt it difficult to compare values. Also UI concerns like, “Either I am blind, or they aren’t there but there were a few slides where I was trying to figure out the Y axis representation because it wasn’t labeled clearly.”
Other than that, it was great to see people exploring the data and coming up with their own questions and conclusions. We hoped this format would lead to a more open-ended navigation of the content. It seems like we’ve had some success, but plan to continue pushing this (possibly adding an open graphing feature for all datasets to be revealed at the end of the narrative).
Data, Design, Development, & Bikes. Currently doing the first three with Bloomberg @BBGVisualData.