Ryan Marx Visualizing data Creating experiences
Photo by John J. Kim
Find me here:
Hi. I'm Ryan.
I am a journalist, designer and developer based in Chicago, and I've spent my career in the information communications business. Through visualization, writing, editing and ux design, I find the important messages and express them in the best ways possible.
Throughout the years, I've made it all: small static charts, large featured interactives, standalone presentations and dashboard user interfaces. Each format has its place, and choosing the right one for the job is a delicate, practical art.
Whether the solution is a few carefully chosen words or something more, the goal always is to distill mountains of information into meaningful and empowering experiences. This makes repeat customers out of media consumers.
It's important to know when to collaborate, delegate and run solo. Success requires juggling the needs of multiple audiences on multiple platforms, and being a quick study doesn't hurt either. (All while on deadline, of course.)
How I work
For starters, I work well with others. As a group, we need to discover our true goals, define them clearly, and consider our resources. A well-scoped project is important to success and, when it comes to data management, app architecture and inclusive design, I always try to do things the "right way" within that scope.
I speak fluent front-end: HTML, CSS and Javascript. I know my way around Node and can get things done with Python and Go. I'm a big fan of the Svelte.js framework. I also know others (including Wordpress). I like Github Actions and using Google Spreadsheets as an ad-hoc CMS.
I appreciate good, useful documentation. From others, for the tools I'm using. Also to me from my previous self. Future me needs a lot of help.
Experience
Storytelling developer
My team — The Storytelling Studio — collaborates with newsrooms across the company to facilitate top-notch storytelling by developing tools, frameworks and custom experiences to empower our partners in more than 200 newsrooms across the country. We use an agile, human-centered approach as we iteratively test our hypotheses and refine our goals. Journalists often approach us with their centerpiece work and a desire to maximize its impact. We build our tools from end to end to achieve a facility on our company's infrastructure and a alignment of technologies that wouldn't otherwise exist.
Assistant DataViz Editor
I helped coordinate the efforts of all graphic reporters and artists across long- and short-term projects while leading our transformation into a digital-focused team. I helped develop technology stacks, templates and best practices for everything from static graphics to fully composed articles and interactives. Though the graphics team was full of expert artists and journalists, our digital abilities were minimal. For our transformation to succeed, the plan needed to include everyone and, thus, a key responsibility for me was to serve as a coach/mentor to help us all contribute to our digital growth.
Graphics Coordinator, Business
I worked with business editors, reporters and columnists to identify and prioritize graphic opportunities for the daily business section and special projects. I participated in long- and short-term planning to devise digital experiences to enhance the daily and weekly coverage.
Graphics Editor
I identified and executed visual storytelling opportunities for the news, sports, business and features sections in print and online. I also worked to expand the nwi.com scope and community with online-only content.
Designer
My primary responsibility was combining photos, typography and copy into sharp, tightly edited presentations representing sound news judgment. I worked with editors, photographers and reporters to facilitate not only a compelling presentation but also a smooth production process. I designed newspaper pages and graphics for all sections and contributed digital presentation and graphics (especially around election time).
Copy editor, Presentation Editor
I designed newspaper pages and graphics for all sections, edited copy and helped coordinate entertainment coverage and special projects. I also helped guide the overall look and feel of the paper while coaching teammates on visual matters.
Selected work
These are projects to which I made significant contributions. I've included links to code repositories where possible. Some of these links are older and, given the nature of the web and media businesses, are no longer available or fully functional in the current environment. I've included them anyways because I remain proud of that work, but they are labeled impaired.
About the labels
- UI
- Whether it's a dashboard or something else, these are good examples of user interfaces I have built. These applications tend to have more interactivity.
- Data visualization
- The primary purpose of these projects is to tell a story by conveying data through a visual format.
- Featured
- A nicely-designed article or other featured content that might not have a ton of interactivity but is full of information and organization.
- Tools
- These are not one-off projects. The codebase consitutes a tool or framework and has been reused several times.
- Svelte
- Made with Svelte, a popular framework that I rather enjoy using.
- Impaired
- Older projects with published links that might not work well (or at all) anymore because of CMS migrations or other factors. I'm not in control of them anymore, but I remain proud of the work. Why not take a look at the code?
World Cup: Design your own uniform
Published: Nov. 18, 2022I designed the initial wireframes and, eventually, developed this web app, with a focus on scaffolding and UX. I worked with two other developers to incorporate the 3D modeling. Optimizing the mobile performance was a challenge, given the sheer volume of patterns/textures and other related files needed to make this a fun experience.
See the codeThe decider: A polar decision matrix
Published: October 2022In the run-up to the 2022 midterm elections, we were approached by multiple newsrooms looking to help undecided voters choose their candidates. I designed and developed this application which presents a series of prompts from user-selected topics. Responses to the prompts are categorized, and "agreement" is calculated.
See the codeExamples:
Cast of Characters
A developer friend-of-the-team asked us for help with the persistent need to make a "Who's who" dictionary of people for large investigative projects. We designed this page and built out a framework that pulls data from a Google spreadsheet and enriches it with some organizational tools and filtering/searching.
We've tracked Capitol rioters, corrupt ohio officials and colleges that cheat. It's been used to display violence databases and sports rankings and has more configurable features than anything else I've made. There are about 30 published instances.
See the codeExamples:
The USA TODAY News Quiz
Sometimes the news can and should be fun. Part of our ongoing 'news play' experiments, this quiz framework has been used to create topical and evergreen quizzes for 6 different news properties, and has been published weekly by USA TODAY for more than two years. The primary business goals of this project was to drive reader registrations (not subscriptions).
Thousands of quiztakers visited Gannett sign-up pages. To encourage habitual quiztaking, this frameworks supports the possibility of two different leaderboards — weekly and all-time — as well as syndication across Gannett properties.
Examples:
In-Depth
My team at Gannett is responsible for designing, engineering and maintaining the In-Depth article framework. This collection of tools enables more than 100 web producers across the company to craft visually stunning, reader-focused multimedia presentations using the everyday CMS and our own story editor.
It's been used to create more than 7,500 (as of December 2022) articles and is the tool of choice to present the strongest, most impactful journalism Gannett has to offer.
It has generated hundreds of thousands of pageviews, a 2x increase in engaged time over standard templates and frequently leads to subscriber conversions.
Examples:
In-depth: Audiograms
This component for the In-Depth toolbox was our second-pass at audio clips. I designed and developed this from scratch as an attempt to grow the poor interaction rates observed with the first version. It's bigger and bolder — more pixels on the page — and has a strong visual presence.
Examples:
In-depth: SMS emulator
This component from the In-Depth toolbox is a top-to-bottom refactor of an existing app. Originally written in Angular (with the data hard-coded into the application), I rewrote it in our preferred Svelte, and abstracted the input data so that it could be used in any project. Visually, it uses the same CSS styling variables as the broader article stylesheets, so it adapts to existing
Examples:
In-depth: Sliders
This component for In-Depth takes two images, lines them up and toggles between them. We had originally decided to let the myriad 3rd-party versions of this tool serve In-Depth, but this one provides us useful analytics.
Examples:
FAQs but better: The Big Page of Help
This concept was born in the early days of the Covid-19 pandemic. Our readers had lots of questions and needed easy access to the answers. Gannett was covering the heck out of the ordeal, but organizing that content in ways satisfy these specific, informational needs was difficult. Enter the big page of help.
Constructed with SEO as a top priority, these experiences are intuitive and transactional. Individual questions are grouped by topic, and each question, by design, has an answer with more information available if desired.
The concept has been adapted for civic resources, hurricane preparedness and voting.
See the codeExamples:
Wildfire lookup
Published: July 22, 2019This collaboration with the Arizona Republic and the USA TODAY graphics team is a custom-build interface for a custom-built database of wildfire potential in the U.S. west. Each town is measured by a series of metrics calculating the probability that it could be consumed by wildfire.
The application had a standalone instance with it's own URL, but it also was embedded into a handful of articles (built using the In-Depth framework) and pre-configured to display specific towns.
See the codeExamples:
Covid obituaries
The Covid-19 pandemic claimed at least 1.1 million Americans, and at least 6.6 million worldwide. This presentation was developed in conjunction with a newsroom in New Jersey as an artful, elegant and respectful way to display the names of people who had died in the pandemic. It was adapted for use in Detroit and south Florida for similar purposes.
See the codeExamples:
Cincy neighborhoods
Published: Feb. 24, 2022A new census brings new data, and we developed this data-explorer microsite with the journalists in Cincinatti who were intent on unpacking claims made by politicians about "the Cincinatti Comeback." This site presents a mountain of the most recent demographic data in two ways: by statistic and by neighborhood.
I worked with the journalists to design each of the different views and shared development duties with the entire team. It's proven to be a success as it consistently generates traffic/engagement which spikes when new investigative articles publish.
Examples:
This actual site
The website you are visiting right now is built with SvelteJS andand is compiled to a static HTML file. It requires no javascript to run.
See the codeIndonesia deforestation
Published: Published: Dec. 3, 2020This timelapse visualization depicts deforestation in Indonesia and projects the tree loss under several different scenarios. My work here was to design and build an interface to tell this story using the data provided.
Timeline: Class warfare in Chicago
Published: Published: July 27, 2014This collarboration with a couple of the Chicago Tribune's resident historians covers the Windy City's rich history of class warfare. It's presented in a flexible timeline rig which I built for our Tarbell-based workflow and consumes data from a Google spreadsheet.
See the codeFaces of DACA
Published: Jan. 24, 2018Tribune photographer Abel Uribe spent months taking portraits and interviews or DACA recipients, aka "dreamers." For a multimedia project of this scope and nuance, a simple photo gallery will not suffice. The goal here was simple and elegant, letting the people behind the various media shine.
See the codeGraphic novel presentations
For a Chicago Tribune investigative project on wards of the state, illustrator Rick Tuma and I worked with the Watchdog team to produce several youth-oriented stories in graphic novel format. The main investigative pieces were critical, but a bit dry. Much of the human elements were lost in the editing process, so we collected them in these graphic essays. This rig was used again for an essay commemorating the historic disaster of the SS Eastland.
See the codeExamples:
The Tax Divide - A 4-part series
Published: June 10, 2017Arguably the most important story the Tribune published in 2017 was an in-depth investagation into the corruption and inequality underlying Cook County's property-tax system. I designed the story rig as well as many of the charts and interactives contained therein. The content is delivered to the app via ArchieML. A subsequent version of this rig was used in the Tribune's water rates investigation.
See the codeThe problems with weedkillers and farming
Published: Dec. 4, 2015For an investigative story on the rise of weedkiller-resistant weeds, I made code-based animations (with illustrator Rick Tuma) and graphics showing how weeds learn to resist.
See the codeAll the bands at that big music festival
A visualization of all the bands to ever play Lollapalooza (updated for the 25th anniversary). Includes details for each band. The data was procured by scraping the Lollapalooza website and joining it with the taxonomy from Gracenote.
See the codePost-election: Examining Illinois after Trump election
Published: Nov 15, 2016The "blue island" in a red midwest was a theme we tackled in several ways following Donald Trump's presidential election. These charts try to shed light on what happened by exploring the red/blue midwestern divide via several demographics.
See the codeVisualization & Lookup: Paying for public schools
An analysis of school funding data showing that school districts in richer counties shoulder a larger share of public school costs than do districts in poorer counties. This presentation includes some analytics maps and charting along with a searchable interface for the entire dataset.
See the code