Katie Marriner

The 8 Types Of Democrats And Republicans In The House

D3.js

I led the design and development of Quiet Caucuses, an interactive for FiveThirtyEight that maps the alignment between House members' caucus affiliations and their 2023 voting behavior. I built a custom scroll-driven interface using D3.js and JavaScript to reveal patterns in a high-dimensional dataset, translating vote similarity scores into an interpretable and responsive layout. The project required close coordination with reporters to iterate on data structure, visual encoding, and user flow.

Who Is Favored To Win The 2024 Presidential Election?

D3.js

I led the design of FiveThirtyEight's 2024 election forecast and helped develop the frontend, visualizing polling uncertainty and highlighting the significance of seven swing states.

How To Tell Who's On Track To Win On Election Night

D3.js, Python

I built a 50-page interactive combining custom-rendered county-level maps and data tables to guide readers and ABC reporters through live election results. I processed and simplified shapefiles into optimized TopoJSON for each state, then dynamically rendered maps with D3 to minimize load and maximize clarity. The interface paired spatial and tabular components to help users interpret partial vote returns in real time.

Who's On Track For The GOP Nomination?

D3.js

I designed and developed a three-part interactive for that visualizes the delegate race across the 2024 Republican primaries. The centerpiece was a set of five synchronized D3 line charts with a custom hover system that let users compare candidate trajectories without jitter or overlap. I also condensed a dense delegate calendar and benchmark data into a responsive, scrollable layout to balance clarity with depth.

Where should I retire?

Vue.js, D3-geo (command-line interface), Excel

I built an interactive retirement quiz for MarketWatch using Vue.js and JavaScript's Web Workers to deliver a smooth, responsive experience even with a large JSON file. The tool guided users through a series of questions about lifestyle, climate and cost preferences, then matched them to potential retirement locations based on a weighted scoring algorithm created by myself. I used a Web Worker to handle filtering and ranking logic off the main thread, ensuring fast, fluid updates and maintaining performance.

The rising cost of childcare is making life impossible for parents. Use our calculator to track the expense where you live.

D3.js, Svelte, Python, Pandas

Built with Svelte, this interactive lets readers explore childcare costs in their county using data from the National Database of Childcare Prices. Users can input their income to see how local childcare expenses compare to both their household earnings and the county median—making abstract cost burdens tangible at a personal level.

Economic indicator breakdown series

Svelte, D3.js, GitHub Actions, Python

A series of interactives where I breakdown and visualize top-line economic indicators and make its components searchable.

Potential homebuyers may start to feel some relief: Use our interactive to see how housing inventory changed in your county.

D3.js, Svelte, Python, GitHub Actions

I analyzed data on total listings of single-family homes collected by Realtor.com to organize and present data in a personalized way.

This is how America's booming demand for goods shattered the supply chain.

D3.js, Vue, Google Sheets

By collecting data from each of the nine largest container ports in the U.S., I created a unique dataset that tells the story of how the supply chain is being affected by the changing economy, particularly from the increased demand for goods.

These public pension systems used to have too much money. Now they're in crisis. What happened?

D3.js, Vue, Google Sheets

I analyzed data from over 200 public pension systems, identified outliers in funding ratios and put these data points into context of market conditions and legislation.

The K-shaped Recovery: The coronavirus pandemic has remade our working lives, and it's been anything but fair.

D3.js, Vue, Google Sheets

What S&P 500 CEOs spent on midterms

Python/pandas, Excel, OpenRefine, Vue.js

Looking at FEC data, I identified CEOs of S&P 500 companies for the 2018 reporting cycle using Python to fetch and format the data, OpenRefine to standardize last names and employers and Excel to analyze the data. I built the interactive with Vue.js.

Beat the Fed

Python, D3.js, JavaScript

I wrote a script that calculated the make-up of PCE inflation and could be run every month after the Commerce Department's release of the figures. I also contributed to the frontend design and development of the tool.

Search Hillary Clinton's emails

Bootstrap Tables, Handlebars.js

The State Department released Hillary Clinton's emails from the time when she was secretary of state on a monthly schedule. I implemented Bootstrap Tables and server-side pagination to improve load time. Features include the ability to search by certain senders/recipients and popular search terms to guide users on what to search for.