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 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.’”

Author

Ryan Donovan
Ryan Donovan is a Content Marketer at Stack Overflow. He's been writing for developers for two decades.

Related Articles

Comments

  1. Is this a sponsored post?

    1. No, this is an interview we did about something we thought our audience would enjoy

  2. After going through idyll documentation https://idyll-lang.org/docs i am not sure how a non technical person would understand? Start from installation to publish it technical. The user needs to know what variable is, components etc.

    1. Andrew Breza says:

      “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.”

      Having the WYSIWYG editor is essential to making this usable by most journalists. Building an IDE for a lay audience is no small task, so I’ll be cautiously optimistic.

    2. Matthew Conlen says:

      You’re right that there are still some technical concepts. In this first iteration we’ve been focused on making collaborations between technical and editorial folks easier.

      Other tools like a graphical editor are really essential to lower the barrier to entry to making these kinds of articles. It is a big design and programming challenge, as Andrew noted, but we’ve been working on a prototype and are excited to see where it goes!

  3. So this article is saying it’s cheaper to use Idyll than hire 4 specialists?

  4. so… is this the future of stackoverflow blog? will it be about marketing different products and libraries?

  5. Amazing article. Just checked out the parametric press official website. Wow!
    Just brilliant. I have subscribed to their newsletter and I hope they become a “thing”.
    Thank you StackOverflow for introducing me to them!
    Great article. Keep introducing us to such technology-related “cool stuff”. And I hope that the future of media looks like this.

    To all the people out there, saying this is sponsored, check out the idyll website and most importantly check out parametric press website. You will realize that the only reason this article appeared is that they are so god darn cool!
    Just when I thought I completely understood images and JPEG compression…. xd

  6. Conlen, you might be interested in checking our https://www.gicentre.net/litvis

    It is a similar editing environment, which shares some values with Idyll 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.