code-for-a-living November 18, 2019

The Interactive News Platform for Everyone

Journalists have an uneasy relationship with technology. On one hand, journalism at the highest levels still focuses on print distribution, a technology hundreds of years old. On the other hand, even the Gray Lady has a snazzy mobile app and  stories custom made for virtual reality. Traditional news outlets are increasingly discovering the power of…

Journalists have an uneasy relationship with technology. On one hand, journalism at the highest levels still focuses on print distribution, a technology hundreds of years old. On the other hand, even the Gray Lady has a snazzy mobile app and  stories custom made for virtual reality. Traditional news outlets are increasingly discovering the power of interactive journalism. To do that right, you need a team of people working on a story—a journalist, a data scientist, a programmer, and a UX designer. It’s rare that you get all four skills in a single person. 

University of Washington computer science PhD student Matthew Conlen has been trying to bridge this gap. After four years doing computational journalism and data visualization at media companies like FiveThirtyEight and the New Yorker, he’s building his own open sourced interactivity-first platform—Idyll—and a yearly online magazine—Parametric Press—that shows off what can be done. “One of the things that I’m most passionate about,” he said, “is really thinking about how the computer can be used to help people communicate better, especially with really technical or complex topics that involve a lot of data or involve some complex system.”

We sat down with Conlen and talked about his experience in both tech and news, the middle ground between them, and how his projects are making it easier for others to create interactive news. 

Programming the news

After his undergrad experience, Conlen got a job at an Adtech company analyzing data and doing backend work. That didn’t last long. “I kind of went out into the world with this math and computer science background and became really interested in how I could apply that in a way that wasn’t just doing kind of web development all the time.” He landed at the Huffington Post—one of the first news outlets attempting to do more than just words and pictures—developing internal tools for journalists. 

Conlen is the first to admit that he’s not a journalist. But there he started learning the workflows and processes that journalists use while creating data visualizations and other interactive tools. “That got me to understand and think about how technology can be applied in that sort of setting,” he said. It wasn’t just graphs with sliders, his team developed novel data analysis tools that tracked what users highlighted in articles the most so they could surface the most interesting content. 

“I think one of the most fun things that we made was called Tomato Vision,” said Conlen. “Essentially, it was this live tool where you could watch political debates with other people in real time. Then people could throw virtual tomatoes at the screen when they’re happy or not so happy about what the politicians were saying. We used it to actually do a live screening of a debate at a venue in Brooklyn. This was before Facebook live and those video platforms where emojis on the screen was a common thing.” 

After that Conlen found his niche doing freelance data visualization for journalism outlets and scientists, including CNN, a neuroscience lab, and scientists at NASA jet propulsion laboratory. In working with all these outlets, he realized there was a pretty wide divide in how journalists thought about their stories and the possibilities that the interactive web offered them. 

The limitations are coming from inside the tech!

Journalists today are very good at finding a narrative and assembling it into a compelling story. They often lack the technical skills, however, to code that story into a compelling interactive piece. Beyond that, there are design considerations that must be part of the story from the beginning. “How do you make it so that something’s intuitive for readers?” Conlen asked. “How do you make it so that something that’s interactive works on phones as well as desktop devices? How do you make it performant? How do you expect a journalist to actually do the data analysis that was required to make the article interesting in the first place?”

Most outfits that create interactive stories have a team to put them together. For smaller teams, it becomes harder to do that with much polish. Conlen believes that the easiest way to make interactivity accessible for all is to change the nature of the content management systems (CMS). 

Almost every online publication runs off of some sort of CMS. We here at the Stack Overflow blog do. Vox Media built and now sells its own. The CMS is where journalists build out their stories, and it can be a central limitation, as it prevents interactivity from being anything other than a second thought, an iframe in the middle of a story. And anything in that iframe might as well be in a box. “Everything in that box is stuck in that box,” said Conlen. “You can’t click on a link in the text and have it update a diagram or anything like that. Because of that, it’s hard to think about how you would approach designing articles from a more holistic sense.”

Most news organizations work around this by building up a secondary publishing stack away from their main publishing stack. You’ll see these stories on a subdomain of the main site, a projects.site.com, for example. If an organization is willing to build up this secondary infrastructure, then they get interactive news. “It’s really only available to people with the time and energy and money who are willing to do that,” Conlen noted. “I think that’s a big technical challenge just from the publishing side.”

The graphics-heavy nature of interactive news means these sites will often be using additional libraries, like D3 or Three.js. “Most journalists don’t know how to use JavaScript, let alone know how to do graphics programming,” said Conlen. Tools like Apparatus are bridging the gap, making interactive stories easier to approach. But it would be easier if interactivity was baked into the CMS from the beginning. 

A platform and publication built for interaction

For his PhD research project, Conlen has been working on an open-source publishing tool designed specifically for interactive articles—Idyll. It’s a Markdown-based language that compiles out to JavaScript and HTML, taking away the need for journalists to write the code themselves. “In the Markdown, you can embed interactive components like buttons or sliders,” said Conlen, “and then hook them up and say when the slider goes here, I want this other thing to do this. It’s Markdown plus a way of orchestrating these different interactive components on the page.” For more complex graphics, you can use other tools—React, D3, and other libraries—to code more specific visualizations. 

Conlen credits his time in newsrooms for the inspiration to create Idyll. “The language was really inspired by a lot of the work that I did at FiveThirtyEight where I was working on their publishing stack and figuring out how a newsroom can create interactive and data-driven content and do it in a manner that isn’t a huge developer lift every time you want to make an article like that.” 

With that technical and process knowledge going into this publishing tool, he needed a way to show it off. So he created Parametric Press. It was the natural next step in his work. “I really wanted to not just build this tool that people could use but provide a platform for people who want to work on this kind of stuff because it’s hard to break into writing this interactive content,” he said. “It’s this dual purpose. We want to make really cool content, but we also want to use it to sort of push this agenda of taking advantage of the web as a medium.”

To show off what he was looking for from writers, his first call for proposals (CFP) included some interactivity in it. “The first CFP had this Too-Long-Didn’t-Read slider,” said Conlen. “You could slide this thing and it would stretch or compress the length of the CFP text. You could slide it all the way until it had the least text. Here’s the due date, here’s where the email to send it to. That’s all you get. You slide it all the way to the right and you get more information about us as a publication and kind of what we’re trying to do.”

Conlen definitely came to the publication with an editorial point of view; not a political agenda, but one rooted in his love of tech and computers. The first issue on science and society makes that clear. “We wanted to focus on science and technology from a positive viewpoint and bring a little bit of the magic back to it,” said Conlen. “I feel like all the news today is just bashing tech companies and there’s a lot of this sort of disillusion with startups in Silicon Valley culture.”

All five articles in the first issue have some sort of interactivity in them. Some use just Idyll, like the “On Particle Physics” simulations. Others, like the “Myth of the Impartial Machine,” use custom code from libraries like D3. It all depended on what the authors wanted and were comfortable with. 

His experience with creating an issue of Parametric Press has created a feedback loop with Idyll. Initially, it started as just a markup language, but because of his experience with this first issue, he made some changes to include CMS/single-site generator-like functionality. “We were searching for a solution to that, so we built something custom to support Parametric Press and then ended up making a PR to the Idyll project and merging a lot of that functionality back in.”

Pressing forward

Right now, Parametric Press is on a yearly publication schedule. Putting together an all interactive publication is a daunting task for a small editorial team. Ideally, Conlen says he’d like to release more issues a year, but he has multiple projects in motion right now, not to mention his PhD studies. He’s hoping the yearly issue is enough for folks. “We release everything all at once rather than a drip. So hopefully, it should tide people over for awhile.”

The next issue is planned to release in the Spring of 2020 and will focus on climate change, including models and simulations, so readers can explore the science around it. Conlen is planning on releasing the CFP for that issue around December 1st. “Parametric Press is at a nice place right now—it’s still early days for it. We’re just going to try to keep doing what we’re doing and hopefully we can grow our audience and publish more frequently at some point in the future.”

As for Idyll, Conlen has seen some interest from editorial organizations and journalists, so he continues to work on new features. In the next year, he plans to work on a WYSIWYG editor to further reduce the barrier to entry for writers interested in interactive stories. After that, he wants to add tighter integration with the existing add-on tools, like Apparatus, and Vega-Lite, which offers a high-level grammar of interactive graphics for writers who want to quickly specify interactive charts and other data visualizations. 

Conlen continues push for greater interactivity in web communications. Some of his other research has been about understand how interactive content like this affect readers and what designs are effective in communicating. He published a paper last year analyzing the usage patterns of readers on interactive articles. Conlen offered a mission statement of sorts: “I want to continue pushing in terms of finding good design guidelines for creating this stuff, understanding what designs work, what doesn’t, and how it affects people’s learning and understanding. So, really being able to say, ‘This interactivity has an actual like cognitive impact.’ Rather than saying, ‘This thing is really cool and it’s fun to play with.’”

Tags: , ,
Podcast logo The Stack Overflow Podcast is a weekly conversation about working in software development, learning to code, and the art and culture of computer programming.

Related

code-for-a-living June 5, 2020

The Overflow #24: Survey says…

June 2020 Welcome to ISSUE #24 of the Overflow! Break into a two-four and read the newsletter by developers, for developers, written and curated by the Stack Overflow team and Cassidy Williams at Netlify. The survey results are in! Nullable types are out! Eye contact is back! From the blog The 2020 Developer Survey results…
podcast February 4, 2020

Podcast: Your Buddy is Typing

Teresa Dietrich, Stack Overflow's new Chief Product Officer, talks about the time a new feature for AOL Instant Messenger almost took down the company's whole network.
Avatar for Ben Popper
Director of Content