Log inSign up
pmaxx
pmaxxexcel_to_roadmap
Public
Like
excel_to_roadmap
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Sign up now
Code
/
Search
roadmap.ts
README.md

Interactive Project Roadmap Visualization by Quarter

This Val Town project creates a visually stunning and interactive roadmap visualization from Excel data, organized by quarters.

Features

  • Dark/Light Mode: Toggle between dark and light themes with automatic preference saving
  • Editable Tasks: Click the edit icon on any task card to modify its details
  • Quarter-Based Timeline: Visualizes tasks and milestones on a timeline organized by quarters (Q1, Q2, Q3, Q4)
  • Interactive Filtering: Toggle visibility of different teams/categories
  • Responsive Design: Works on desktop and mobile devices
  • Visual Indicators: Color-coding for categories and special styling for milestones
  • Quarter Dividers: Clear visual separation between quarters
  • Risk Level Badges: Visual indicators for task risk levels
  • Task Cards with Quarter Info: Detailed information about each task including which quarter(s) it spans
  • Interactive Tooltips: Hover over elements to see more details
  • Smooth Animations: Enhances user experience

Data Structure

The roadmap visualization uses the following data structure:

Category    Task                     Start Date    End Date      Risk Level    Type
Green team  Brand Refresh            1/1/2025      2/15/2025     Medium        
Green team  Social Media Campaign    2/20/2025     3/20/2025     Low           
Green team  Product Launch Event     4/15/2025     4/15/2025     High          Milestone
Orange team Feature A Implementation 1/15/2025     2/28/2025     High          
Orange team Feature B Implementation 3/1/2025      4/10/2025     Medium        
Orange team Version 2.0 Release      4/15/2025     4/15/2025     High          Milestone
QA          Testing Phase 1          2/20/2025     3/10/2025     Low           
QA          User Acceptance Testing  4/1/2025      4/10/2025     Medium        
QA          Final Approval           4/12/2025     4/12/2025     Low           Milestone
Operations  Infrastructure Setup     1/10/2025     2/10/2025     BAU           
Operations  Deployment Preparation   4/5/2025      4/14/2025     TBC

Technologies Used

  • Chart.js: For the timeline visualization
  • Luxon: For date handling
  • Twind: For styling (Tailwind CSS in the browser)
  • Val Town: For hosting and serving the application

How to Use

  1. Access the roadmap visualization through the HTTP endpoint
  2. Use the category filters at the top to show/hide specific teams
  3. Hover over timeline bars or milestone markers to see more details
  4. Scroll down to see the task cards with detailed information

Customization

To customize this roadmap with your own data, modify the roadmapData array in the code with your own tasks, dates, and categories.

HTTP
Code