Uma Thurman: Interactive Career Timeline

An interactive visualization of Uma Thurman's film and television career, featuring a comprehensive timeline of her work from 1988 to 2022.

Features

Interactive Timeline

• Chronological view: Films plotted across her career timeline
• Box office view: Films plotted by commercial success vs. time
• Genre color coding: Visual distinction by film genre
• Size encoding: Circle sizes represent ratings in box office view

Filtering & Controls

• Film type filters: Show all films, major films only, or other films
• Year scrubber: Highlight films by proximity to selected year
• Click interactions: Select films for detailed information

Rich Data Visualization

• Major film highlights: Special styling for career-defining roles
• Career milestones: Key moments marked on timeline
• Decade analysis: Statistical breakdown by decade
• Responsive design: Optimized for all screen sizes

Enhanced Information

• Film details: Box office, ratings, directors, descriptions
• Career statistics: Film counts, ratings, achievements
• Genre distribution: Visual representation of film diversity
• Achievement timeline: Awards and recognition highlights

Technical Implementation

Technologies Used

• D3.js v7: Data visualization and DOM manipulation
• Modern CSS: Grid, flexbox, custom properties, animations
• Vanilla JavaScript: ES6+ modules and classes
• Responsive Design: Mobile-first approach with breakpoints

Code Organization

• index.html: Main page structure and content
• styles.css: Complete styling with CSS custom properties
• data.js: Film data and metadata
• timeline.js: D3 visualization logic
• index.js: Application initialization and controls

Key Features

• Modular architecture: Separated concerns for maintainability
• Accessibility: Focus states, semantic HTML, ARIA labels
• Performance: Efficient D3 data joins, optimized animations
• Extensibility: Easy to add new data points or visualization modes

Data Sources

Film information compiled from various sources including:

• Internet Movie Database (IMDb)
• Box Office Mojo
• Critical reception data
• Career milestone documentation

Usage

1. Explore the timeline: Hover over dots to see film details
2. Filter content: Use buttons to focus on specific film types
3. Switch views: Toggle between timeline and box office views
4. Scrub through years: Use the year slider to highlight periods
5. Select films: Click dots for detailed information panel

Browser Support

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

Development

To run locally:

1. Clone the repository
2. Serve files with a local HTTP server
3. Open in a modern web browser

No build process required - uses modern browser APIs.