/somehow-timeline

a svelte component for layout with time as y-axis

Primary LanguageJavaScript

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>

image

API

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

MIT