MATHEW BRADY// TECH LENS

Engineering Interactive Data Ecosystems.

Full-stack developer building robust technical architectures, custom data platforms, and highly optimized web systems.

[ 3D Wireframe Mesh Canvas Active ]

Case Study 01

Child Care Deserts

Project Note: The live platform has been updated by the CAP engineering team since my tenure. The breakdown below details the original architecture, UI layout, and feature engineering from my initial deployment.

Project Overview

The most ambitious project during my tenure at the Center for American Progress. Comprised of seven map layers, one of which contains over 2.2 million data points, this interactive mapping tool reveals insights about the American child care and demographic landscape like never before.

The Architectural Role

My role was to work closely with the child care research team every step of the way, from inception to publication. I developed the project goals and scope, created graphics to illustrate the visual design, cleaned and structured the datasets, selected and integrated appropriate 3rd party tools such as Mapbox, coded the front-end UI and back-end architecture, and kept the team and my department informed of all progress via consistent communication and effective project management.

System Inspector Canvas

Dynamic Location Architecture

Location search functionality with auto-complete and fly-to animations. Homepage loads with a randomly selected location from a predetermined list of visually striking locales.

Guided Narrative Storytelling

Storytelling via information bites, curated to demonstrate map functionality and key narrative takeaways. Steps automatically trigger demographic map layer selection and comparison slider positioning.

Stateful URL Serialization

Dynamic view sharing via unique URLs so users can freely explore and customize the map, then share their unique view including lat/long position, zoom level, and demographic layer parameters.

Privacy-Preserving Synthetic Microdata

Each of the 2.2 million data points represents a synthetically calculated family unit of ten families. Based on actual census data, the units protect citizen privacy while maintaining high accuracy.

Interactive Comparison Slider

The comparison slider allows for interactive contrasting between the two selected maps. This feature results in a mental 'overlay' experience without the visual noise of overlapping maps.

Multi-Layered Demographic Viz

Six demographic census-tract map layers add depth and unique insights. Comparing and contrasting the layers against each other and the child care dot map amplifies the power of this data visualization tool.

Specification Breakdown

Dynamic Location Architecture

Location search functionality with auto-complete and fly-to animations. Homepage loads with a randomly selected location from a predetermined list of visually striking locales.

Guided Narrative Storytelling

Stateful URL Serialization

Dynamic view sharing via unique URLs so users can freely explore and customize the map, then share their unique view including lat/long position, zoom level, and demographic layer parameters.

Privacy-Preserving Synthetic Microdata

Each of the 2.2 million data points represents a synthetically calculated family unit of ten families. Based on actual census data, the units protect citizen privacy while maintaining high accuracy.

Interactive Comparison Slider

The comparison slider allows for interactive contrasting between the two selected maps. This feature results in a mental 'overlay' experience without the visual noise of overlapping maps.

Multi-Layered Demographic Viz

Case Study 02

Cost of Child Care Calculator

costofchildcare.org↗

Project Overview

A unique, visually-striking take on what might otherwise be a straightforward calculator web app. The emphasis on delightful custom illustrations to humanize each of the policy impact selections results in a faster, more intuitive understanding of how valuable every dollar is to providing quality child care.

The Architectural Role

My role was to design and develop the interactive calculator, as well as create a standalone website to house it, with a visual identity separate but adjacent to the CAP brand. Partnering with our digital strategy team and the child care research team, I planned the website scope, designed mock ups, built custom architecture for the calculator function and graphics rendering, coded the entire website front-end and back-end, integrated multiple rounds of team feedback, and performed final QA and deployment.

System Inspector Canvas

Cost of Child Care Calculator Interface Layout

Localized Data Engine

State-by-state selections localize the calculator data for a more precise and accurate representation of the costs associated with each policy toggle, providing a personally relevant experience.

Dynamic Illustration Rendering

Dynamic graphics change to visually reflect each and every selection by the user. The room gets larger, colors brighter, and teachers more involved as users choose to pay caregivers more.

Diverse Care Modeling

Age selection options have a large impact on cost calculations. Including home base care expands the relevancy of the tool to a more diverse user base. Each selection is also reflected visually in the illustrations.

Contextual Explainer Logic

Each toggle generates a corresponding paragraph of explainer text to further inform the user on the high cost of child care and why every dollar spent is so vital to providing quality care.

State-Conflict Resolver

Toggles for each policy suggestion affect the calculator math and trigger appropriate graphic changes. Some toggles contain additional back-end logic to handle conflicting user selections.

Standalone Brand Architecture

Site navigation and architecture is designed to function as a completely standalone web identity while simultaneously taking visual and UI/UX cues from the traditional CAP website experience.

Specification Breakdown

Localized Data Engine

State-by-state selections localize the calculator data for a more precise and accurate representation of the costs associated with each policy toggle, providing a personally relevant experience.

Dynamic Illustration Rendering

Dynamic graphics change to visually reflect each and every selection by the user. The room gets larger, colors brighter, and teachers more involved as users choose to pay caregivers more.

Diverse Care Modeling

Contextual Explainer Logic

Each toggle generates a corresponding paragraph of explainer text to further inform the user on the high cost of child care and why every dollar spent is so vital to providing quality care.

State-Conflict Resolver

Toggles for each policy suggestion affect the calculator math and trigger appropriate graphic changes. Some toggles contain additional back-end logic to handle conflicting user selections.

Standalone Brand Architecture

Site navigation and architecture is designed to function as a completely standalone web identity while simultaneously taking visual and UI/UX cues from the traditional CAP website experience.

Case Study 03

LGBTQ Discrimination Survey Platform

americanprogress.org↗

Project Overview

This groundbreaking research survey is one of the most comprehensive of its kind, featuring ten overall survey categories, eighty-nine individual questions, and results specific to eight demographics. The variety and detail of survey questions made it a challenge to translate into the colorful set of data visualizations in the final product.

The Architectural Role

Taking guidance from the researchers who developed the survey and its methodology, my role was to envision an interactive solution that would make the complex survey results as easy as possible to understand, and display them in a visually appealing way within the constraints of the existing CAP website. I did the graphic design, database architecture, interactive D3 charts, logic to swap between demographics within each chart and category on the fly, as well as the quality of life functionality and details.

System Inspector Canvas

LGBTQ Discrimination Survey Platform Interface Layout

Universal State Cascade

Default demographic drop-down selector updates all charts with one click. The interactive was designed with the standard column width, native typefaces, and general styling of the CAP website in mind.

Macro-Control Utilities

Quality of life features such as the 'expand/close all' button as well as section-by-section open and close buttons are essential to keeping readers oriented and in control while navigating the dataset.

Categorical Navigation Hierarchy

Turning survey categories into collapsible sections serves as both an initial table of contents for quick navigation, and provides visual cues to the reader via consistent color-matching with charts and legends.

Localized Scope Overrides

Drop-down selectors update demographic data with scope localized to the individual chart while maintaining the capacity for override when the universal drop down at the top of the interactive is triggered.

Contrast-Aware Typography

Interactive charts respond to mouse hover events by highlighting bars and legend chiclets. Stacked bar labels switch from black to white depending on background hue to maintain readability and contrast.

Chromatic Orientation Mapping

Chart legends highlight corresponding data bands. Vibrant color palettes increase visual appeal, reduce large dataset exploration fatigue, and help the reader stay oriented in the midst of a long scroll.