⏳ Timeline Graphics Design Guide

Timeline visualizations are powerful storytelling tools що показують chronological progression, historical context або sequential events. Для mushroom education, timelines можуть display research history, cultivation stages, trip progression, або personal microdosing logs. Цей гід охоплює design patterns, implementation techniques, та interactive features для engaging temporal visualizations.

📅 Timeline Types для Mushroom Content

1. Historical Research Timeline

Показує: Key discoveries у psychedelic mushroom research

Приклади:

  • 1955: Gordon Wasson discovery
  • 1958: Albert Hofmann isolates psilocybin
  • 1970: Controlled Substances Act
  • 2006: Johns Hopkins study
  • 2020: Oregon legalizes therapy

2. Cultivation Timeline

Показує: Growing stages від spore до harvest

Duration: 6-10 тижнів

Milestones:

  • Day 0: Inoculation
  • Week 2: 50% colonization
  • Week 4: Birth cakes
  • Week 6: First pins
  • Week 7: Harvest

3. Trip Experience Timeline

Показує: Subjective effects over time

Duration: 4-8 годин

Phases:

  • T+0: Ingestion
  • T+30m: Onset (body load)
  • T+1h: Come-up (visuals start)
  • T+2h: Peak (intense)
  • T+4h: Plateau
  • T+6h: Come-down

4. Microdosing Log Timeline

Показує: Personal tracking календар

Pattern: Fadiman protocol (Day 1: dose, Day 2-3: off)

Metrics:

  • Mood rating
  • Energy level
  • Focus quality
  • Sleep quality

🎨 Visual Timeline Example

Psilocybin Research History

1955

R. Gordon Wasson Visit

American banker experiences mushroom ceremony з Maria Sabina в Oaxaca, Mexico. Publishes "Seeking the Magic Mushroom" у LIFE magazine.

1958

Psilocybin Isolation

Albert Hofmann (LSD discoverer) successfully isolates та synthesizes psilocybin at Sandoz labs.

1960-1963

Harvard Psilocybin Project

Timothy Leary та Richard Alpert conduct research. Eventually dismissed due to controversy.

1970

Schedule I Classification

Controlled Substances Act classifies psilocybin as Schedule I (no medical use). Research halts for decades.

2006

Johns Hopkins Study

Landmark study shows psilocybin produces mystical experiences з long-term positive effects. Research renaissance begins.

2018

FDA Breakthrough Therapy

Psilocybin granted breakthrough therapy designation для treatment-resistant depression.

2020

Oregon Measure 109

Oregon becomes first US state to legalize psilocybin for therapeutic use.

2023-2026

Expanding Legalization

Multiple states та countries consider decriminalization. Phase 3 clinical trials ongoing for PTSD, depression, anxiety.

💻 HTML/CSS Timeline Implementation

Vertical Timeline (Responsive):

<div class="timeline">
  <div class="timeline-item">
    <div class="timeline-marker"></div>
    <div class="timeline-content">
      <span class="timeline-date">1958</span>
      <h3>Psilocybin Isolation</h3>
      <p>Albert Hofmann isolatesпsilocybin...</p>
    </div>
  </div>
  <!-- More items -->
</div>

<style>
.timeline {
  position: relative;
  max-width: 800px;
  margin: 40px auto;
  padding-left: 50px;
}

/* Central line */
.timeline::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #f093fb 0%, #a6c1ee 100%);
}

.timeline-item {
  position: relative;
  margin-bottom: 40px;
}

.timeline-marker {
  position: absolute;
  left: -38px;
  top: 0;
  width: 20px;
  height: 20px;
  background: #f093fb;
  border: 4px solid white;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(240, 147, 251, 0.2);
  z-index: 1;
}

.timeline-content {
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.timeline-date {
  display: inline-block;
  font-weight: 700;
  color: #f093fb;
  font-size: 1.1em;
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  .timeline {
    padding-left: 40px;
  }
  .timeline::before {
    left: 10px;
  }
  .timeline-marker {
    left: -28px;
  }
}
</style>

Horizontal Timeline (Desktop):

<div class="horizontal-timeline">
  <div class="h-timeline-track">
    <div class="h-timeline-item">
      <div class="h-marker"></div>
      <div class="h-content">
        <span class="h-date">Week 1</span>
        <p>Inoculation</p>
      </div>
    </div>
    <!-- More items -->
  </div>
</div>

<style>
.horizontal-timeline {
  overflow-x: auto;
  padding: 40px 20px;
}

.h-timeline-track {
  display: flex;
  position: relative;
  min-width: 800px;
}

.h-timeline-track::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #f093fb 0%, #a6c1ee 100%);
}

.h-timeline-item {
  flex: 1;
  position: relative;
  text-align: center;
}

.h-marker {
  width: 20px;
  height: 20px;
  background: #f093fb;
  border: 4px solid white;
  border-radius: 50%;
  margin: 10px auto;
  position: relative;
  z-index: 1;
}

.h-content {
  margin-top: 30px;
  padding: 15px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.h-date {
  font-weight: 700;
  color: #f093fb;
  display: block;
  margin-bottom: 5px;
}
</style>

🎭 Interactive Timeline Libraries

1. TimelineJS (Northwestern University)

URL: timeline.knightlab.com

Features:

  • Google Spreadsheet powered (easy для non-coders)
  • Multimedia support (images, videos, maps)
  • Responsive та touch-friendly
  • Free та open-source

Implementation:

<div id="timeline-embed" style="width: 100%; height: 600px"></div>
<script src="https://cdn.knightlab.com/libs/timeline3/latest/js/timeline.min.js"></script>
<link rel="stylesheet" href="https://cdn.knightlab.com/libs/timeline3/latest/css/timeline.css">

<script>
var timelineData = {
  "events": [
    {
      "start_date": { "year": "1955" },
      "text": {
        "headline": "R. Gordon Wasson Discovery",
        "text": "<p>American banker experiences...</p>"
      },
      "media": {
        "url": "wasson-photo.jpg",
        "caption": "R. Gordon Wasson"
      }
    }
    // More events...
  ]
};

window.timeline = new TL.Timeline('timeline-embed', timelineData);
</script>

2. Vis.js Timeline

URL: visjs.org

Features:

  • Highly customizable
  • Zoom та pan interactions
  • Groups та stacking
  • Real-time data updates

Use case: Microdosing log timeline з daily entries

3. Chart.js Timeline Chart

Best for: Data-driven timelines з metrics

Example: Psilocin concentration over time graph

📊 Data Visualization Timeline

Trip Intensity Timeline (Chart.js):

<canvas id="tripTimeline" width="800" height="400"></canvas>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('tripTimeline').getContext('2d');

new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['T+0', '30m', '1h', '1.5h', '2h', '3h', '4h', '5h', '6h', '7h', '8h'],
    datasets: [
      {
        label: 'Visual Intensity',
        data: [0, 2, 4, 6, 8, 9, 7, 5, 3, 1, 0],
        borderColor: '#f093fb',
        backgroundColor: 'rgba(240, 147, 251, 0.1)',
        tension: 0.4,
        fill: true
      },
      {
        label: 'Body Load',
        data: [0, 3, 5, 6, 5, 3, 2, 1, 0, 0, 0],
        borderColor: '#a6c1ee',
        backgroundColor: 'rgba(166, 193, 238, 0.1)',
        tension: 0.4,
        fill: true
      },
      {
        label: 'Emotional Intensity',
        data: [0, 1, 3, 5, 7, 8, 6, 4, 2, 1, 0],
        borderColor: '#ffd6f0',
        backgroundColor: 'rgba(255, 214, 240, 0.1)',
        tension: 0.4,
        fill: true
      }
    ]
  },
  options: {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: 'Psilocybin Experience Timeline (3g dried)',
        font: { size: 18 }
      },
      legend: {
        position: 'top',
      }
    },
    scales: {
      y: {
        beginAtZero: true,
        max: 10,
        title: {
          display: true,
          text: 'Intensity (0-10 scale)'
        }
      },
      x: {
        title: {
          display: true,
          text: 'Time After Ingestion'
        }
      }
    }
  }
});
</script>

✅ Timeline Design Checklist

Before Publishing:

  • ☐ Chronologically accurate dates/times
  • ☐ Clear visual hierarchy (most important events stand out)
  • ☐ Responsive design (mobile та desktop)
  • ☐ Loading states для large timelines
  • ☐ Accessible (keyboard navigation, screen readers)
  • ☐ Color-coded categories (if applicable)
  • ☐ Zoom/pan functionality (для long timelines)
  • ☐ Print-friendly version
  • ☐ Sources cited (historical timelines)
  • ☐ Performance optimized (lazy load або virtualization)