Export & Sharing¶

Transform your ChronoScope timeline into beautiful, shareable TimelineJS visualizations.

Overview¶

ChronoScope offers professional export capabilities that let you share your timeline story with the world. Export to TimelineJS - a free, interactive timeline tool from Northwestern University's Knight Lab that creates stunning, web-embeddable timelines.

TimelineJS Export¶

What is TimelineJS?¶

TimelineJS is a free, open-source tool that creates beautiful, interactive timelines. It's used by journalists, educators, historians, and storytellers worldwide to present chronological narratives in an engaging format.

Features: - 📱 Responsive - Works on desktop, tablet, and mobile - 🎨 Customizable - Multiple color schemes and fonts - 🗺️ Maps - Optional location integration with Google Maps - 📸 Media-rich - Embed images, videos, and links - 🌐 Web-embeddable - Share anywhere with a simple embed code

Export Formats¶

Excel Format (.xlsx)¶

Best for: Uploading directly to timeline.knightlab.com

The Excel export creates a spreadsheet with 19 columns in TimelineJS format:

JSON Format (.json)¶

Best for: Self-hosting or advanced customization

The JSON export follows the TimelineJS3 specification with full event metadata:

{
  "title": {
    "text": {
      "headline": "My Timeline",
      "text": "A comprehensive view of my journey"
    }
  },
  "events": [
    {
      "start_date": {
        "year": "2020",
        "month": "1",
        "day": "15"
      },
      "text": {
        "headline": "Event Title",
        "text": "Event description with details"
      },
      "group": "Career",
      "background": {
        "color": "#8B7355"
      }
    }
  ]
}

Color Schemes¶

ChronoScope includes 6 professionally-designed, accessibility-compliant color schemes:

1. Earth Tones ⭐ (Default)¶

Perfect for: Professional portfolios, personal life stories, memoirs

Background: #8B7355 (Warm Taupe)
Accent:     #D4A574 (Sand)
Text:       #3E2723 (Dark Brown)
Secondary:  #9E8B73 (Stone)

Vibe: Warm, natural, professional, timeless

2. Professional Slate¶

Perfect for: Corporate presentations, business history, annual reports

Background: #546E7A (Blue Gray)
Accent:     #78909C (Light Slate)
Text:       #ECEFF1 (Off White)
Secondary:  #90A4AE (Soft Gray)

Vibe: Clean, modern, corporate, trustworthy

3. Vibrant Sunset¶

Perfect for: Creative portfolios, art projects, life celebrations

Background: #FF6F61 (Coral)
Accent:     #FFD54F (Golden Yellow)
Text:       #FFFFFF (White)
Secondary:  #FF9472 (Peach)

Vibe: Bold, energetic, creative, celebratory

4. Academic Navy¶

Perfect for: Research presentations, academic history, thesis timelines

Background: #1E3A5F (Navy Blue)
Accent:     #4A90E2 (Sky Blue)
Text:       #FFFFFF (White)
Secondary:  #6C8EAD (Light Blue)

Vibe: Scholarly, authoritative, traditional, prestigious

5. Minimal Grayscale¶

Perfect for: Any professional use, print-friendly, maximum accessibility

Background: #F5F5F5 (Light Gray)
Accent:     #424242 (Dark Gray)
Text:       #212121 (Near Black)
Secondary:  #757575 (Medium Gray)

Vibe: Timeless, versatile, professional, accessible

6. Forest Green¶

Perfect for: Environmental projects, growth stories, nature themes

Background: #2E7D32 (Forest Green)
Accent:     #66BB6A (Light Green)
Text:       #FFFFFF (White)
Secondary:  #4CAF50 (Green)

Vibe: Natural, growth-oriented, sustainable, hopeful

Font Combinations¶

Choose from 10 professional font pairings (all TimelineJS built-in):

Export Workflow¶

Step 1: Access Export Tab¶

1. Navigate to 📤 Export to TimelineJS tab
2. Review the introduction and benefits

Step 2: Configure Settings¶

Color Scheme Selection¶

Choose a color scheme that matches your timeline's purpose:

• Portfolio/Resume → Professional Slate or Earth Tones
• Creative Work → Vibrant Sunset
• Academic → Academic Navy
• Environmental → Forest Green
• Print/Accessible → Minimal Grayscale

Font Selection¶

Pick fonts that complement your content:

• Professional → Georgia/Helvetica (Default)
• Modern → Bitter/Raleway
• Bold → Abril Fatface/Droid Sans
• Elegant → Clicker Script/Garamond

Grouping Options¶

Organize events by:

• None - Chronological only
• Category - Group by event type (work, education, etc.)
• Year - Group by year ranges
• Location - Group by geographic location

Date Precision¶

Choose display format:

• Full Date - Show year, month, day (Jan 15, 2020)
• Year-Month - Show year and month (Jan 2020)
• Year Only - Show only year (2020)

Optional Features¶

• ☑️ Include confidence scores - Show event confidence as stars (⭐⭐⭐⭐⭐)
• ☑️ Generate map links - Add Google Maps links for locations

Step 3: Preview¶

Review the live preview showing:

• First 10 events in table format
• Applied color scheme
• Date formatting
• Grouping structure

Step 4: Validate¶

ChronoScope performs automatic validation:

✅ Success: All events have required fields (Year, Headline)

⚠️ Warnings: Some events missing optional data (Month, Description, etc.)

❌ Errors: Events missing required fields - cannot export

Step 5: Download¶

Choose export format:

Excel Download¶

1. Click 📥 Download Excel (.xlsx)
2. File saves as chronoscope_timeline_YYYY-MM-DD_HHMMSS.xlsx
3. Upload to timeline.knightlab.com

JSON Download¶

1. Click 📥 Download JSON
2. File saves as chronoscope_timeline_YYYY-MM-DD_HHMMSS.json
3. Use for self-hosting or custom integration

Using Your Export¶

Method 1: Upload Excel to TimelineJS¶

Easiest method - no coding required

1. Go to timeline.knightlab.com
2. Click "Make a Timeline"
3. Choose "Upload Spreadsheet"
4. Upload your exported Excel file
5. Click "Publish"
6. Copy the embed code

Timeline goes live immediately!

Method 2: Upload JSON to TimelineJS¶

For advanced customization

1. Go to timeline.knightlab.com
2. Click "Make a Timeline"
3. Choose "Use JSON"
4. Paste your exported JSON
5. Customize further if needed
6. Click "Publish"

Method 3: Self-Host Timeline¶

For full control and privacy

1. Download TimelineJS source from GitHub
2. Place your JSON file in the timeline directory
3. Update index.html to point to your JSON
4. Host on your web server or GitHub Pages

Example embed code:

<link title="timeline-styles" rel="stylesheet"
      href="https://cdn.knightlab.com/libs/timeline3/latest/css/timeline.css">
<script src="https://cdn.knightlab.com/libs/timeline3/latest/js/timeline.js"></script>

<div id='timeline-embed' style="width: 100%; height: 600px"></div>

<script>
timeline = new TL.Timeline('timeline-embed',
  'path/to/your/chronoscope_timeline.json');
</script>

Advanced Customization¶

Custom Background Images¶

Add visual interest with background images:

1. Find event in exported file
2. Add URL to Background column (Excel) or background.url (JSON)
3. Supported formats: JPG, PNG, GIF

Example:

Background: https://example.com/images/graduation.jpg

Custom Media¶

Enrich events with images and videos:

Supported media types: - 📸 Images (JPG, PNG, GIF) - 🎥 YouTube videos - 🎬 Vimeo videos - 🔗 External links

How to add:

1. Excel: Add URL to "Media" column
2. JSON: Add to media.url field

Example:

"media": {
  "url": "https://www.youtube.com/watch?v=VIDEO_ID",
  "caption": "Graduation ceremony video",
  "credit": "Family Video Collection"
}

Date Display Customization¶

Override automatic date formatting:

Excel: Use "Display Date" column JSON: Use display_date field

Examples: - "Summer 2020" - "Q1 2023" - "Early Career" - "Renaissance Period"

Troubleshooting¶

Export Shows Warnings¶

Export Fails Validation¶

Timeline Looks Wrong on TimelineJS¶

Events in Wrong Order¶

Best Practices¶

Content Optimization¶

✅ DO:

• Keep headlines concise (< 50 characters)
• Write engaging descriptions (100-200 words)
• Include relevant media for visual interest
• Use consistent grouping categories
• Add locations for geographic context

❌ DON'T:

• Use overly long headlines (timeline becomes crowded)
• Skip descriptions (timeline lacks context)
• Mix grouping schemes (confusing navigation)
• Forget to attribute media (copyright issues)

Visual Design¶

Color Scheme Selection:

• Match scheme to content purpose
• Consider audience preferences
• Test accessibility (use Minimal Grayscale for max accessibility)
• Stay consistent across related timelines

Font Selection:

• Prioritize readability over decoration
• Match formality to content (formal → Georgia, casual → Amatic)
• Test on mobile devices
• Avoid overly decorative fonts for body text

Performance¶

File Size Optimization:

• Limit media to reasonable sizes (< 5MB per image)
• Use external hosting for large files
• Compress images before uploading
• Consider lazy loading for long timelines (100+ events)

Loading Speed:

• Use CDN-hosted media when possible
• Optimize images for web
• Minimize external dependencies
• Test on slow connections

Export Settings Reference¶

Quick Settings Table¶

Example Exports¶

Professional Resume Timeline¶

Settings: - Color: Professional Slate - Font: Bitter/Raleway - Grouping: Category - Precision: Year-Month

Result: Clean, corporate timeline perfect for LinkedIn or portfolio

Academic Research Timeline¶

Settings: - Color: Academic Navy - Font: Georgia/Helvetica - Grouping: Year - Precision: Full Date

Result: Scholarly timeline ideal for thesis or research presentations

Personal Life Story¶

Settings: - Color: Earth Tones - Font: Lustria/Lato - Grouping: None - Precision: Year

Result: Warm, narrative timeline for memoirs or family history

Next Steps¶

After exporting:

• 🌐 Publish on TimelineJS
• 📊 Explore Other Visualizations
• 🔗 Create Knowledge Graph
• 📝 Add More Events

Quick Reference¶

Back to Documentation Home