Building Interactive
Data Ecosystems.
Full-stack software engineer specializing in high-fidelity data visualization. Engineering robust front-end web systems and proprietary data architectures for national research organizations from conceptual wireframes to deployment.
// THE PLATFORM CAPABILITIES
A full-stack engineer who bridges the gap between high-fidelity UI/UX design and scalable architecture. I take data-heavy systems from raw conceptual wireframes all the way through specialized data visualization design to production-ready cloud deployment.
In-Depth Case Studies.
These three production systems document how I take complex projects from raw data architecture and wireframes through to high-fidelity frontend visualization and live deployment, highlighting the full spectrum of my technical skillset.
Full Portfolio Matrix
Immerse yourself directly into the complete index.
Child Care Deserts
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.
As the lead engineer, I was responsible for transforming this research scope into a live interactive ecosystem. My impact centered on [System Architecture] by scaling data frameworks from raw database tables into optimized client states, executing high-fidelity [Data Engineering] pipelines via D3 arrays to isolate childcare data trends instantly, and managing the end-to-end frontend deployment to guarantee seamless response times across major national research operations.
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.
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.
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.
Cost of Child Care Calculator
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.
As the lead engineer, I was responsible for transforming this research scope into a live interactive ecosystem. My impact centered on [System Architecture] by scaling data frameworks from raw database tables into optimized client states, executing high-fidelity [Data Engineering] pipelines via D3 arrays to isolate childcare data trends instantly, and managing the end-to-end frontend deployment to guarantee seamless response times across major national research operations.
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.
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.
LGBTQ Survey Platform
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.
As the lead engineer, I was responsible for transforming this research scope into a live interactive ecosystem. My impact centered on [System Architecture] by scaling data frameworks from raw database tables into optimized client states, executing high-fidelity [Data Engineering] pipelines via D3 arrays to isolate childcare data trends instantly, and managing the end-to-end frontend deployment to guarantee seamless response times across major national research operations.
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.
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.
Selected Projects Matrix
A filterable index of core application builds, structural open-source modules, and functional data prototypes. Select a stack tag node below to parse specific dependencies.
Child Care Deserts Mapping Tool
2.2M PointsAn interactive mapping platform processing massive geospatial data layers to visualize demographic landscape insights across America.
Cost of Child Care Calculator
< 50ms Render LatencyA localized web calculator application built with a custom visual identity and real-time visual calculations for complex financial models.
Collapsible Database Sync Engine
O(1) Node Access TimeEngineered an interactive data visualization platform for comprehensive social research surveys using optimized relational database schemas.