{"id":13426558,"url":"https://github.com/kristw/d3kit-timeline","last_synced_at":"2025-04-13T05:05:39.170Z","repository":{"id":57211346,"uuid":"47476381","full_name":"kristw/d3kit-timeline","owner":"kristw","description":"A simple timeline component that labels do not overlap.","archived":false,"fork":false,"pushed_at":"2022-12-27T19:45:27.000Z","size":624,"stargazers_count":378,"open_issues_count":6,"forks_count":44,"subscribers_count":19,"default_branch":"master","last_synced_at":"2025-04-13T05:05:28.093Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://d3kit-timeline.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kristw.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-12-05T23:17:18.000Z","updated_at":"2025-04-02T22:50:58.000Z","dependencies_parsed_at":"2022-08-30T13:11:47.827Z","dependency_job_id":null,"html_url":"https://github.com/kristw/d3kit-timeline","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristw%2Fd3kit-timeline","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristw%2Fd3kit-timeline/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristw%2Fd3kit-timeline/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristw%2Fd3kit-timeline/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kristw","download_url":"https://codeload.github.com/kristw/d3kit-timeline/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248665749,"owners_count":21142123,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T00:01:37.850Z","updated_at":"2025-04-13T05:05:39.141Z","avatar_url":"https://github.com/kristw.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Utils"],"sub_categories":[],"readme":"**Introduction** |\n[Demo](http://kristw.github.io/d3kit-timeline) |\n[API Reference](docs/api.md)\n\n# d3Kit-timeline [![NPM version][npm-image]][npm-url] [![Dependency Status][daviddm-image]][daviddm-url]\n\nIf you want to have a simple timeline that labels do not overlap, but too lazy to implement one from scratch, this library is for you. Below is a screenshot of four timelines of the same data, each can be created via ~10 lines of code. [See demo.](http://kristw.github.io/d3kit-timeline)\n\nThe use case of this library is not limited to temporal data. You can change the scale to be d3.scale.linear() or something else to support x-value that is not time.\n\nThis small library is built on top of [D3](http://d3js.org/), [d3Kit](https://github.com/twitter/d3kit) and [Labella.js](https://github.com/twitter/labella.js).\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"http://kristw.github.io/d3kit-timeline/\" style=\"width:100%;\"\u003e\n    \u003cimg src=\"examples/images/thumbnail.png\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\nNote: If you are upgrading from v0.x.x to v1.x.x, this library now return the constructor `d3KitTimeline` instead of `d3Kit`. Please see the [change logs](CHANGELOG.md) for more detail.\n\n### Install\n\n```\nnpm install d3kit-timeline --save\n```\n\nor\n\n```\nbower install d3kit-timeline --save\n```\n\n### Example Usage\n\nIf you have this dataset\n\n```javascript\nvar data = [\n  {time: new Date(1977, 4,25), episode: 4, name: 'A New Hope'},\n  {time: new Date(1980, 4,17), episode: 5, name: 'The Empire Strikes Back'},\n  {time: new Date(1984, 4,25), episode: 6, name: 'Return of the Jedi'},\n  {time: new Date(1999, 4,19), episode: 1, name: 'The Phantom Menace'},\n  {time: new Date(2002, 4,16), episode: 2, name: 'Attack of the Clones'},\n  {time: new Date(2005, 4,19), episode: 3, name: 'Revenge of the Sith'},\n  {time: new Date(2015,11,18), episode: 7, name: 'The Force Awakens'},\n];\n```\n\nHere is how to create a timeline with labels on the right.\n\n```javascript\nvar chart = new d3KitTimeline('#timeline', {\n  direction: 'right',\n  initialWidth: 400,\n  initialHeight: 250,\n  textFn: function(d){\n    return d.time.getFullYear() + ' - ' + d.name;\n  }\n});\n\nchart.data(data).resizeToFit();\n```\n\nFor more detailed usage please refer to the [API Reference](docs/api.md).\n\n### Import to your project\n\n##### Choice 1. Global\n\nAdding this library via ```\u003cscript\u003e``` tag is the simplest way. By doing this, ```d3KitTimeline``` is available in the global scope.\n\n```html\n\u003cscript src=\"bower_components/d3/d3.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"bower_components/d3kit/dist/d3kit.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"bower_components/labella/dist/labella.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"bower_components/d3kit-timeline/dist/d3kit-timeline.min.js\"\u003e\u003c/script\u003e\n```\n\n##### Choice 2: AMD\n\nIf you use requirejs, this library support AMD out of the box.\n\n```javascript\nrequire.config({\n  paths: {\n    d3:    'path/to/d3',\n    d3kit: 'path/to/d3Kit',\n    labella: 'path/to/labella',\n    'd3kit-timeline': 'path/to/d3kit-timeline'\n  }\n});\nrequire(['d3kit-timeline'], function(d3KitTimeline) {\n  // do something with d3KitTimeline\n});\n```\n\n##### Choice 3: node.js / browserify\n\nd3kit-timeline also supports usage in commonjs style.\n\n```javascript\nvar d3KitTimeline = require('d3kit-timeline');\n```\n\n### Author\n\nKrist Wongsuphasawat / [@kristw](https://twitter.com/kristw)\n\nCopyright 2015-2017 Krist Wongsuphasawat.\nLicensed under the [Apache License Version 2.0](http://www.apache.org/licenses/LICENSE-2.0)\n\n[npm-image]: https://badge.fury.io/js/d3kit-timeline.svg\n[npm-url]: https://npmjs.org/package/d3kit-timeline\n[daviddm-image]: https://david-dm.org/kristw/d3kit-timeline.svg?theme=shields.io\n[daviddm-url]: https://david-dm.org/kristw/d3kit-timeline\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkristw%2Fd3kit-timeline","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkristw%2Fd3kit-timeline","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkristw%2Fd3kit-timeline/lists"}