somehow-timeline

— part of somehow —

WIP svelte infographics

_{by Spencer Kelly}

lays-out visual elements using y-axis as time

uses spacetime to parse and handle dates/times.

work-in-progress!

<script>
  import { Timeline, Column, Line } from 'somehow-timeline'
</script>
<Timeline start="Jan 1 2020" end="Dec 30 2020" height="500">
  <Column width="75">
    <Line start="January 1 2020" end="Feb 20 2020" color="pink" width="15px" dotted="{true}" label="Before" />
    <Line start="Feb 20 2020" end="November 11 2020" width="15px" dotted="{true}" color="#6699cc" label="Middle" />
    <Line start="November 11 2020" end="December 20 2020" width="15px" color="fire" label="After" />
  </Column>
</Timeline>

API

• Timeline
• Ticks
• Line
• Column
• Img
• Label
• Duration
• MainLine
• Point

---

MIT