Project Overview:
2024 Live NFL Playoff Picture Projections

12/27/2024

Cover image of 2024 Live NFL Playooff Picture Projections site

2024 Live NFL Playoff Picture Projections

Go To Project

Building on the success of the previous two year's NFL Playoff Probabilities sites:

This year's NFL playoff probabilities project delivers a dynamic, real-time site that tracks live data throughout the NFL playoff season, showcasing updated probabilities and metrics for a variety of playoff scenarios.

The previous tech stack included Hugo, Vanilla JavaScript, Chart.js, and GSAP. For this year’s iteration, I contributed several key improvements, including:

  • Enhancing line chart interactions with refined click/hover functionality and advanced customizations using Chart.js
  • Adding subtle scroll-based animations to elevate the user experience
  • Creating a centralized data control file for streamlined data management
  • Redesigning the blinking “LIVE” dot into a more intuitive pill-style indicator with live text
  • Making major improvements to the semantics and structure of the HTML, refining the CSS, and optimizing the JavaScript for a cleaner, more performant codebase
ESPN.com homepage with 2024 Live NFL Playoff Picture Projections leading page 1
ESPN.com homepage with 2024 Live NFL Playoff Picture Projections leading front page on 12/27/2024

Looking ahead: Next season’s goals include transitioning to a React.js codebase, leveraging D3.js for advanced data visualizations, and adding new chart functionalities, such as multi-day data ranges, sorting, and other interactive features.