For several weeks, the Tampa Bay Times has been publishing Failure Factories, a series exploring the effects of the Pinellas County school district’s decision to resegregate its schools. On the web we decided to try something new: kicking off the series with a D3-powered graphic that used data to show readers how dire the situation is for black students in south St. Petersburg.

We were aiming for a brief and engaging piece that would invest readers in the stories to come. In that sense, our experiment was successful. #FailureFactories was trending in the Tampa Bay region before the first day of the project ran. We heard from readers across the country that they were waiting anxiously for the series, and both the graphic and the 5,000-word first installment in the series have been among the most viewed stories we’ve published this year.

Why We Did It This Way

Early versions of our first-day story focused on how Pinellas County’s failure rate for black children is strikingly high compared to other Florida counties. The story eventually narrowed to be about the five elementary schools that were struggling the most as a result of the Pinellas County School Board abandoning integration. But we thought the broader, simpler narrative was still powerful and important. We decided to make it a stand-alone web piece—told in graphics.

This is in line with our belief that the web versions of our investigations shouldn’t exactly match what we run in the newspaper. (There we ran a full-page graphic, inspired heavily by elements of the web chart, with help from one of our news artists, Steve Madden.)

The print counterpart of our interactive graphic

We also like to look for opportunities to do what we call “social sidebars”—digestible slices of a story designed to spread on social media and to bring new readers into the investigation. We want our findings to reach the widest possible audience, which means we need stories that work well for different platforms and different types of readers.

The structure for the data team—what we call our group of seven data specialists, developers and web designers—made this approach possible. We’re attached to the paper’s investigative team and are responsible for both helping prove investigative stories and ensuring they’re told engagingly online. For this series we’ve contributed analysis, web design, and also multiple online-only elements, with more to come.

Nathaniel joined the team as an intern in January, was assigned full-time to “Failure Factories” by February, and was hired as a data reporter in June. Adam runs the data team and was Nathaniel’s editor for both data and web elements of this project, along with Chris Davis, the Times’ deputy managing editor for investigations and data.

Nathaniel sits within shouting distance of the reporters on the team; he switched back and forth between contributing analysis critical to our investigation and developing the chart that would kick it off.

The Virtue of Many Drafts

An early analysis of resegregation

Crafting a story out of the analysis didn’t come easily. Over the months Nathaniel spent analyzing data for the project, he turned out dozens of unique drafts of the chart. Most began with exploratory data analyses, which in this case meant scores of scatterplots, looking at test scores and enrollment for every elementary school in Florida.

When we looked at Pinellas over time, we saw a fascinating pattern. In our district, this is what resegregation looked like: A handful of elementary schools in south St. Petersburg—shown in green in the plot at right—were becoming blacker and blacker, even as the rest of the district became whiter.

This analysis guided one of the most distinctive slides of the chart, letting readers scroll to see south St. Petersburg’s schools becoming more segregated year after year:

Waterfall-style vertical scrolling reveals the patternsmore dramatically

In this visualization, time advances vertically down the page—an admittedly unusual decision, given that time is more usually shown left to right, along the X axis. We liked the visceral effect that came from letting readers scroll to see the pattern reveal itself, and we didn’t think that effect would work as well if readers were scrolling down while the chart unfurled sideways.

This wasn’t our first idea. Early sketches showed a stack of year-by-year Census Reporter-style distribution charts. The idea to link those points was inspired by an effort to emulate the encoding of slope, as in Marey’s graphical timetable, which D3 creator Mike Bostock had already reconstructed on the web strikingly.

We were also heavily influenced by another Bostock concept called object constancy—a data visualization technique that uses animations to draw attention to different patterns within the same data.

In our case, this gave us a powerful way to show how the schools’ increasing segregation corresponded to decreasing test performance:

Using object constancy to contrast patterns in the data

Not every unusual effect we tried worked this well. Here’s one that didn’t. Many drafts featured our opening map, showing school districts’ 2014 test performance, transforming into a line chart of how that performance changed over time:

A striking but ultimately unhelpful draft

Though visually gripping, we had to kill this darling. When we showed it to people around the room, we found they were coming away focused on the dip in the middle—a result of changes in Florida’s standardized tests, not the important story our reporting and analysis had uncovered.

Simpler effects often proved far more effective. For example, this zoom—cutting from every elementary in the state to only the worst-performing schools—set up a dramatic series of slides showing how our schools stood out among the worst. They were easy to make and yet were highlighted by some readers as their favorite part of the story:

Simpler effects allowed patterns to reveal themselves clearly

A Few Other Things We Learned

• Storyboard early and often with the people who know the story best. At times we became obsessed with chaining compelling visual moments together at the expense of story. Ultimately, the parts of this we’re most happy with came when we simplified.

  That process was driven by working closely with reporter Michael LaForgia and project editor Chris Davis, who helped us craft a unique story for the chart to tell. This continued until the moment the project launched. A smart last-minute suggestion from our data team colleague Alexis N. Sanchez led LaForgia to propose the final phrase to close the interactive: Who’s responsible? This powerful moment would not have been possible without tight collaboration with LaForgia, who while finalizing the first story also wrote most of the slides and stayed with us in the newsroom till late the night before the project launched, helping us polish.

• Go the extra mile to find the best data. Most reporters in Florida (including us) generally use a common set of standardized student testing data that’s available online, which shows passing rates on a grade-by-grade, test-by-test basis. This forces reporters to address math and reading performance separately—an important distinction, but one that makes it almost impossible to do a single visualization that tells a complete story.

  We thought a single metric would be more concrete and powerful, so our reporters took an extra step: Filing a records request with the state Department of Education for a dataset we’d never seen before this project but that logic dictated must exist. For every school in the state, we asked for data, broken down by race, showing the intersection of students who passed both math and reading. That data would ultimately power the most powerful moments in our chart. We plan to eventually publish it for journalists and researchers.

• Great digital journalism is not the art of making templates. One question that’s come to us many times since this launched—from friends inside and outside the newsroom—was whether we plan to make a tool to build graphics like this all the time. We do not.

  We believe in reusable code and learned many things that we hope will become libraries to make projects like this faster to build. (Don’t be surprised if you see a project down the road featuring that map-to-line-chart animation we showed off earlier.) Nonetheless, we think telling great stories online requires unique effects that aren’t likely to work for just any story. Our paper has always believed in crafting distinctive narratives for big projects, and on the web, we think that usually means custom code.

In Other Shameless Self-Promotion…

Kicking this project off with a chart isn’t the only new thing we tried for this series digitally. Also of possible interest:

31 Kids, One Story: Doing Our Case Studies as a “Revolving Narrative”

Martin Frobisher and Alexis N. Sanchez worked with reporter Lisa Gartner to build an interactive narrative around the experiences of children we interviewed who attend resegregated schools. This was another experiment for us, replacing what would traditionally be a series of vignettes or a database.

Narratives embedded within a larger story

Giving Every Device the Right-Sized Image

Big, beautiful photos that don’t melt mobile devices

Martin, the lead designer on this project, used beautiful full-screen section breaks throughout the first part of our series. We were able to do this in part because of a system built by Martin and Eli Murray (our new brilliant intern) to dynamically deliver the proper quality of photo to different devices. That let us use stunning HD images on big Retina screens without worrying about making our page slow-loading on phones.

This works thanks in part to BBC’s Imager.js (thanks BBC!) and, for the full-screen images, some dark magic in CSS (thanks Martin!). We hope to open-source this system one day, along with our larger story-building toolkit.

Connecting with Readers Who Care

Eli also built a system to let readers sign up for email alerts just about new parts of this series. Those emails—notes about each installment of the project from the reporters—are a new feature for us. They’ve proven popular with readers, and we expect them to be increasingly useful as the project continues to develop over the next several months.

An example email we used to connect with readers

For D3 Nerds Only: Introducing select_or_append

D3 usually separates element selection and appending elements. It’s a beautiful abstraction, but when a lot of your code relies on updating elements—as one does going forward and backwards in a stepper graphic—this can lead to sprawling code. We forked one of our favorite libraries—d3 jetpack—and added select_or_append, which works like a standard D3 selection, but appends the selected element if it doesn’t already exist.

This let us turn code like this::

var doohickey;
if element.select('.blinkey').empty() {
legend = element.append('g').attr('class', 'blinkey’)
} else {
doohickey = element.select('blinkey')
}
doohickey.attr('color', 'black') //do stuff

Into this:

var doohickey = element.select_or_append(‘g.blinkey')
.attr('color', 'black') //do stuff

Summing Up

This may seem like a lot of digital elements for one series. But unlike the chart, many of these innovations are reusable, and we’re a new team—eager to experiment with ideas about how to best package investigative journalism online.

But even if that weren’t true, we probably would’ve invested the time. We strongly believe in watchdog journalism and want our most ambitious and important projects to feature gripping storytelling on every platform. We consider ourselves lucky to work for editors who agree.

Which is not to say that we don’t also get to have some fun along the way. In the late nights leading up to the project’s launch, the Failure Factories team of reporters, editors, and data specialists banded together around our whiteboard, making what is, hands down, our favorite visualization to come from this project:

• Share on Twitter
• Share on Facebook