Visualization Options¶

Explore your timeline through multiple interactive visualization types.

Overview¶

ChronoScope offers six visualization modes to help you understand your timeline from different perspectives:

1. Interactive Timeline - Chronological Gantt chart
2. Data Table - Sortable, filterable event list
3. Analytics Dashboard - Priority matrix and temporal distribution
4. Validation View - Quality assurance and confidence scoring
5. TimelineJS Export - Professional web-ready timelines
6. Knowledge Graph - Network relationship visualization

1. Interactive Timeline (Gantt Chart)¶

Overview¶

The primary visualization mode - a beautiful, interactive timeline showing events across time.

Visual Elements:

• Horizontal axis - Time (dates)
• Vertical axis - Event categories or chronological order
• Bars - Events with start/end dates
• Colors - Categories or priority levels
• Hover tooltips - Detailed event information

Features¶

Enhanced Tooltips¶

Hover over any event to see rich details:

📊 Senior Software Engineer

📅 Date: Jan 15, 2020 - Mar 30, 2023
📍 Location: TechCorp Inc., San Francisco, CA
📝 Description: Led development team of 5 engineers building
                cloud-native microservices...
🏷️ Tags: #career #engineering #leadership
👥 People: John Doe, Jane Smith
⭐ Confidence: 95%
🎯 Priority: 8/10

Tooltip Design: - Visual icons for quick scanning - Bold field labels - Truncated long descriptions (80-120 chars) - Confidence shown as percentage - Priority as X/10 format

Zoom & Pan¶

Controls: - Zoom in/out - Mouse wheel or pinch gesture - Pan left/right - Click and drag timeline - Reset view - Double-click background - Date range focus - Use sidebar filter

Use cases: - Explore specific time periods in detail - Navigate long timelines (10+ years) - Focus on clusters of events

Color Coding¶

By Category: - 💼 Work - Blue - 🎓 Education - Green - 📋 Project - Orange - 🏆 Achievement - Purple - 📝 Personal - Gray

By Priority: - High (8-10) - Dark colors - Medium (4-7) - Medium colors - Low (1-3) - Light colors

By Confidence: - High (> 80%) - Solid colors - Medium (50-80%) - Semi-transparent - Low (< 50%) - Light, faded

Filtering¶

Apply filters from sidebar:

Date Range: - Custom start/end dates - Quick presets (Last Year, Last 5 Years, All Time)

Categories: - Multi-select checkboxes - Show/hide specific event types

Confidence: - Minimum threshold slider (0-100%) - Filter out uncertain events

Priority: - Minimum/maximum range - Focus on important events

Search: - Full-text search in titles/descriptions - Real-time filtering as you type

Layout Options¶

Compact View: - Events stacked vertically - Maximum information density - Best for: Many short events

Expanded View: - Events spread out with spacing - Easier to read individual events - Best for: Fewer, longer events

Category Groups: - Events grouped by category - Separate swim lanes per category - Best for: Seeing category distribution

2. Data Table View¶

Overview¶

Spreadsheet-style view of all timeline events with sorting and filtering.

Columns:

Features¶

Sorting¶

Click column headers to sort:

• Single click - Ascending order
• Double click - Descending order
• Triple click - Clear sort

Multi-column sort: - Hold Shift + Click multiple headers - Primary → Secondary → Tertiary sorting

Example:

Sort by: Category (ascending) → Start Date (descending)
Result: Events grouped by category, newest first within each

Pagination¶

For timelines > 50 events:

• Page size options: 10, 25, 50, 100
• Previous/Next navigation
• Jump to page number
• Total event count displayed

Column Customization¶

Show/hide columns:

• Click column selector icon
• Check/uncheck columns
• Reorder by drag-and-drop
• Reset to defaults

Column width: - Drag column borders to resize - Double-click border to auto-fit - Settings persist across sessions

Row Actions¶

Click row to:

• View full event details in sidebar
• Edit event information
• Delete event (with confirmation)
• View source document

Bulk actions:

• Select multiple rows (checkboxes)
• Delete selected
• Bulk edit categories
• Export selection to CSV

Export Table Data¶

Download formats:

• CSV - Import into Excel/Google Sheets
• JSON - Machine-readable format
• Markdown - Paste into documentation

Include: - All columns or selected columns - Current filter/sort settings - Optional: Include confidence scores

3. Analytics Dashboard¶

Overview¶

Statistical visualizations revealing patterns and insights in your timeline.

Priority Matrix¶

2D scatter plot:

• X-axis - Time (start date)
• Y-axis - Priority (1-10)
• Bubble size - Event duration
• Bubble color - Category

Insights:

• Top-right quadrant - Recent high-priority events
• Bottom-left quadrant - Old low-priority events
• Large bubbles - Long-duration events
• Color clusters - Category concentrations

Use cases: - Identify most important recent events - Spot priority trends over time - Find long-running high-priority initiatives

Temporal Distribution¶

Histogram chart:

• Bars - Event count per time period
• X-axis - Time buckets (year, quarter, month)
• Y-axis - Number of events
• Colors - Categories stacked

Insights:

• Tall bars - High-activity periods
• Gaps - Low-activity periods
• Color distribution - Category balance

Granularity options: - Yearly - Long-term trends - Quarterly - Seasonal patterns - Monthly - Fine-grained activity

Category Distribution¶

Pie chart:

• Slices - Event categories
• Size - Percentage of total events
• Colors - Consistent with timeline colors

Insights:

• Which categories dominate your timeline?
• Are you balanced across life areas?
• Where to focus more attention?

Confidence Trend¶

Line chart:

• X-axis - Time
• Y-axis - Average confidence score
• Line - Confidence trend over time

Insights:

• Are recent events more certain?
• Which periods have low confidence?
• Where to improve data quality?

Event Duration Analysis¶

Box plot:

• Boxes - Duration distribution per category
• Whiskers - Min/max durations
• Outliers - Unusually long/short events

Insights:

• Typical event length per category
• Which categories have longest events?
• Identify anomalously long/short events

4. Validation View¶

Overview¶

Quality assurance dashboard for timeline data integrity.

See: Validation Guide for full details

Key visualizations:

• Confidence score distribution - Histogram
• Missing fields report - Table
• Date consistency checks - List
• Duplicate detection - Similarity matrix

5. TimelineJS Export Preview¶

Overview¶

Live preview of how your timeline will look when exported to TimelineJS.

See: Export Guide for full details

Preview features:

• First 10 events in TimelineJS table format
• Applied color scheme preview
• Font selection preview
• Date formatting preview
• Grouping structure preview

6. Knowledge Graph Visualization¶

Overview¶

Network graph showing relationships between events, people, places, and categories.

See: Knowledge Graph Guide for full details

Key visualizations:

• Network graph - Nodes and edges
• Community detection - Clustered groups
• Centrality analysis - Hub identification
• Path visualization - Event sequences

Visualization Best Practices¶

Choosing the Right View¶

Color Scheme Recommendations¶

For presentations: - Use high contrast (Minimal Grayscale or Professional Slate) - Avoid overly vibrant colors - Ensure accessibility (WCAG AA compliant)

For personal use: - Choose colors matching your preference - Earth Tones for warmth - Vibrant Sunset for energy

Performance Optimization¶

For large timelines (> 500 events):

• Use Data Table for quick navigation
• Filter before visualizing
• Disable animations if laggy
• Consider Neo4j for Knowledge Graph

For slow devices:

• Reduce visible date range
• Increase minimum confidence threshold
• Hide less important categories
• Use pagination in table view

Interactive Features Reference¶

Plotly Chart Controls¶

All Plotly charts include:

• 📷 Camera icon - Download as PNG
• 🔍 Zoom - Box select or mouse wheel
• ↔️ Pan - Click and drag
• 🏠 Home - Reset to default view
• ↕️ Autoscale - Fit to data
• 🔲 Box select - Select data points
• 📊 Hover mode - Tooltip settings

Timeline-Specific Controls¶

Date range selector: - Drag handles to adjust range - Click outside to reset

Legend: - Click to hide/show category - Double-click to isolate category

Tooltips: - Hover to see details - Click to pin tooltip - Click away to unpin

Customization Options¶

Theme Settings¶

Color themes:

• Light mode (default)
• Dark mode (coming soon)
• High contrast mode
• Custom theme builder (coming soon)

Layout Preferences¶

Timeline layout:

• Compact - Maximum density
• Comfortable - Balanced spacing
• Spacious - Maximum readability

Dashboard layout:

• Grid view - All charts visible
• Carousel view - One chart at a time
• Custom layout - Drag-and-drop

Export Visualizations¶

Static Images¶

Download any chart:

1. Hover over chart
2. Click camera icon (top-right)
3. Choose format (PNG, SVG, JPEG)
4. Save to desired location

Resolution: - Default: 1200x800px - High-res: 2400x1600px (Settings → Export)

Interactive HTML¶

Export interactive charts:

1. Chart Settings → Export as HTML
2. Standalone HTML file created
3. Open in any browser
4. Fully interactive with zoom/pan

Use cases: - Share with colleagues - Embed in documentation - Archive for posterity

Troubleshooting¶

Chart Not Displaying¶

Performance Issues¶

Colors Look Wrong¶

Tooltips Not Showing¶

Advanced Features¶

Custom Queries (Knowledge Graph Only)¶

See: Knowledge Graph Guide

Use Neo4j Cypher queries for advanced filtering and pattern matching.

Timeline Annotations¶

Coming soon:

• Add text annotations to timeline
• Highlight significant periods
• Draw attention to key events

Comparative Timelines¶

Coming soon:

• Overlay multiple timelines
• Compare different time periods
• Side-by-side category comparison

Next Steps¶

After exploring visualizations:

• 📤 Export to TimelineJS
• 🔗 Explore Knowledge Graph
• ✅ Validate Data Quality
• 📝 Add More Events

Quick Reference¶

Back to Documentation Home