https://github.com/alangrafu/timeknots

Minimalist timeline in javascript based on d3.js. This work was inspired by https://github.com/mquan/timeline
https://github.com/alangrafu/timeknots

Last synced: 5 days ago
JSON representation

Minimalist timeline in javascript based on d3.js. This work was inspired by https://github.com/mquan/timeline

• Host: GitHub
• URL: https://github.com/alangrafu/timeknots
• Owner: alangrafu
• License: apache-2.0
• Created: 2012-09-28T08:47:07.000Z (about 12 years ago)
• Default Branch: master
• Last Pushed: 2017-10-31T11:39:28.000Z (about 7 years ago)
• Last Synced: 2024-11-02T05:04:05.746Z (7 days ago)
• Language: JavaScript
• Homepage:
• Size: 271 KB
• Stars: 181
• Watchers: 11
• Forks: 64
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-starred - alangrafu/timeknots - Minimalist timeline in javascript based on d3.js. This work was inspired by https://github.com/mquan/timeline (others)

README

        
timeknots

=========

Minimalist timeline in javascript

General Options

===============

* `width`: width of the visualization (default: `600` pixels)

* `height`: height of the visualization (default: `200` pixels)

* `radius`: radius of the knots (default: `10` pixels)

* `lineWidth`: width of the lines used to draw timeknots (default: `4` pixels)

* `color`: color used for the visualization (default: `999`)

* `background`: Background color of the visualization (default: `FFF`)

* `dateFormat`: Format of the dates displayed (default: `%Y/%m/%d %H:%M:%S`)

* `horizontalLayout`: orientation in which the timeknots will be displayed horizontal or vertical (default: `true`),

* `showLabels`: Include labels showing the first and last dates (default: `false`)

* `labelFormat`: Format used to display the dates in the labels (default: `%Y/%m/%d %H:%M:%S`)

Knot options

============

It is possible to include or override certain options for particular knots. These options are

* `img`: Include the image in this URL when the tooltip is displayed

* `radius`: Draw this knot with this particular radius

* `color`: Draw this knot using this particular color

* `lineWidth`: Draw thiw knot using this particular line width

* `background`: Draw thiw knot using this particular background

Examples

========

A set of example can be found at [http://graves.cl/timeknots/example/index.html](http://graves.cl/timeknots/example/index.html)