{"id":13930011,"url":"https://github.com/vasturiano/timelines-chart","last_synced_at":"2025-05-14T14:07:43.625Z","repository":{"id":8444941,"uuid":"58434674","full_name":"vasturiano/timelines-chart","owner":"vasturiano","description":"Timelines Chart","archived":false,"fork":false,"pushed_at":"2025-03-21T03:44:24.000Z","size":963,"stargazers_count":592,"open_issues_count":66,"forks_count":128,"subscribers_count":21,"default_branch":"master","last_synced_at":"2025-05-14T11:17:02.658Z","etag":null,"topics":["d3js","heatmap","kapsule","swimlanes","time-series","timeline-chart","timelines"],"latest_commit_sha":null,"homepage":"http://vasturiano.github.io/timelines-chart/example/categorical/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vasturiano.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-05-10T06:14:43.000Z","updated_at":"2025-05-06T21:50:37.000Z","dependencies_parsed_at":"2024-01-17T05:26:46.802Z","dependency_job_id":"53dd819e-381e-48a9-8126-1868c0d4a1fc","html_url":"https://github.com/vasturiano/timelines-chart","commit_stats":{"total_commits":220,"total_committers":7,"mean_commits":"31.428571428571427","dds":0.08181818181818179,"last_synced_commit":"937b559750b78f0c2ef50aee5164263e1b80081e"},"previous_names":["vasturiano/stacked-timelines-chart"],"tags_count":50,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vasturiano%2Ftimelines-chart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vasturiano%2Ftimelines-chart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vasturiano%2Ftimelines-chart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vasturiano%2Ftimelines-chart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vasturiano","download_url":"https://codeload.github.com/vasturiano/timelines-chart/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254160015,"owners_count":22024566,"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":["d3js","heatmap","kapsule","swimlanes","time-series","timeline-chart","timelines"],"created_at":"2024-08-07T18:02:40.576Z","updated_at":"2025-05-14T14:07:43.607Z","avatar_url":"https://github.com/vasturiano.png","language":"JavaScript","funding_links":["https://www.paypal.com/cgi-bin/webscr?cmd=_donations\u0026business=L398E7PKP47E8\u0026currency_code=USD\u0026source=url","https://www.paypal.com/cgi-bin/webscr?cmd=_donations\u0026business=L398E7PKP47E8\u0026currency_code=USD\u0026source=url)!"],"categories":["others"],"sub_categories":[],"readme":"Timelines Chart\n==============\n\n[![NPM package][npm-img]][npm-url]\n[![Build Size][build-size-img]][build-size-url]\n[![NPM Downloads][npm-downloads-img]][npm-downloads-url]\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"//vasturiano.github.io/timelines-chart/example/categorical/\"\u003e\u003cimg width=\"80%\" src=\"https://vasturiano.github.io/timelines-chart/example/preview.png\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nA parallel timelines layout (swimlanes) for representing state of time-series over time.\nEach timeline segment can be assigned a value on a color scale, either continuous (heatmap mode) or ordinal (for categorical representation).\nTime-series can be grouped into logical groups, represented as distinct sections. Allows for exploration using drag-to-zoom or a timeline brush.\n\nCheck out the examples:\n* [Categorical](https://vasturiano.github.io/timelines-chart/example/categorical/)\n* [Continuous (Heatmap)](https://vasturiano.github.io/timelines-chart/example/heatmap/)\n* [Custom Time Format](https://vasturiano.github.io/timelines-chart/example/custom-time-format/)\n\n## Quick start\n\n```js\nimport TimelinesChart from 'timelines-chart';\n```\nor using a *script* tag\n```html\n\u003cscript src=\"//cdn.jsdelivr.net/npm/timelines-chart\"\u003e\u003c/script\u003e\n```\nthen\n```js\nconst myChart = new TimelinesChart(\u003cmyDOMElement\u003e)\n  .data(\u003cmyData\u003e);\n```\n\n## API reference\n\n| Method | Description | Default |\n| --- | --- | --- |\n| \u003cb\u003edata\u003c/b\u003e([\u003ci\u003earray\u003c/i\u003e]) | Getter/setter for chart data (see below for syntax details). | `[]` |\n| \u003cb\u003ewidth\u003c/b\u003e([\u003ci\u003enumber\u003c/i\u003e]) | Getter/setter for the chart width in px. | *\u0026lt;window width\u0026gt;* |\n| \u003cb\u003emaxHeight\u003c/b\u003e([\u003ci\u003enumber\u003c/i\u003e]) | Getter/setter for the chart's maximum height in px. | 640 |\n| \u003cb\u003emaxLineHeight\u003c/b\u003e([\u003ci\u003enumber\u003c/i\u003e]) | Getter/setter for the maximum height of each line, in px. | 12 |\n| \u003cb\u003eleftMargin\u003c/b\u003e([\u003ci\u003enumber\u003c/i\u003e]) | Getter/setter for the chart's left margin, which contains the left-side group axis labels. | 90 |\n| \u003cb\u003erightMargin\u003c/b\u003e([\u003ci\u003enumber\u003c/i\u003e]) | Getter/setter for the chart's right margin, which contains the right-side series axis labels. | 100 |\n| \u003cb\u003etopMargin\u003c/b\u003e([\u003ci\u003enumber\u003c/i\u003e]) | Getter/setter for the chart's top margin, which contains the color legend. | 26 |\n| \u003cb\u003ebottomMargin\u003c/b\u003e([\u003ci\u003enumber\u003c/i\u003e]) | Getter/setter for the chart's bottom margin, which contains the time axis labels. | 30 |\n| \u003cb\u003euseUtc\u003c/b\u003e([\u003ci\u003eboolean\u003c/i\u003e]) | Getter/setter for whether to display time in the local time zone (`false`) or in UTC (`true`). | false |\n| \u003cb\u003etimeFormat\u003c/b\u003e([\u003ci\u003estring\u003c/i\u003e]) | Getter/setter for the time format to use in tooltips. See [d3-time-format](https://github.com/d3/d3-time-format#locale_format) for available options. | `%Y-%m-%d %-I:%M:%S %p` |\n| \u003cb\u003exTickFormat\u003c/b\u003e([\u003ci\u003efunction\u003c/i\u003e]) | X axis tick label formatter function, as pass-through to [d3-axis](https://github.com/d3/d3-axis#axis_tickFormat). By default, it uses a [multi-scale time format](https://bl.ocks.org/mbostock/4149176). | |\n| \u003cb\u003edateMarker\u003c/b\u003e([\u003ci\u003edate object\u003c/i\u003e]) | Getter/setter for the date marker to show as a vertical line. If a falsy value is used, no marker is shown. | `null` |\n| \u003cb\u003eminSegmentDuration\u003c/b\u003e([\u003ci\u003enumber\u003c/i\u003e]) | Getter/setter for the minimum time duration (in msecs) of a segment in order for it to be shown. | 0 |\n| \u003cb\u003eminSegmentWidth\u003c/b\u003e([\u003ci\u003enumber\u003c/i\u003e]) | Getter/setter for the minimum displayed px width of a segment. | 1 |\n| \u003cb\u003egetNLines\u003c/b\u003e() | Returns number of timelines currently visible in the chart. | - |\n| \u003cb\u003egetTotalNLines\u003c/b\u003e() | Returns total number of timelines in the chart. | - |\n| \u003cb\u003ezQualitative\u003c/b\u003e([\u003ci\u003eboolean\u003c/i\u003e]) | Getter/setter for whether the segment data color values are categorical (true) or quantitative (false). This will affect how the color legend is presented, and changing it will automatically toggle the `zColorScale` between defaults. | false |\n| \u003cb\u003ezColorScale\u003c/b\u003e([\u003ci\u003ed3 scale object\u003c/i\u003e]) | Getter/setter for the color scale to be used for coloring the segments according to their data values. This object should be a D3 color scale object. | qualitative: `d3.scaleOrdinal(\u003ccolor-list\u003e)` \u003cbr\u003e quantitative: `d3.scaleSequential(\u003ccolor-interpolator\u003e)` |\n| \u003cb\u003ezDataLabel\u003c/b\u003e([\u003ci\u003estring\u003c/i\u003e]) | Getter/setter for the units of z data. Used in the tooltip descriptions. | |\n| \u003cb\u003ezScaleLabel\u003c/b\u003e([\u003ci\u003estring\u003c/i\u003e]) | Getter/setter for the color scale label. Only applicable to quantitative z scales. | |\n| \u003cb\u003esort\u003c/b\u003e([\u003ci\u003e[function, function]\u003c/i\u003e]) | Sorts the timelines and groups according to two name comparison functions: `function(labelCmpFn, groupCompFn)`. Each comparison function should follow the signature `function(nameA, nameB)` and return a numeric value. | `(\u003calpha-numeric-cmp\u003e, \u003calpha-numeric-cmp\u003e)` |\n| \u003cb\u003esortAlpha\u003c/b\u003e([\u003ci\u003e[boolean]\u003c/i\u003e]) | Sorts the timelines and groups in alpha-numeric order. The boolean parameter indicates whether the order should be ascending (`true`) or descending (`false`). | true |\n| \u003cb\u003esortChrono\u003c/b\u003e([\u003ci\u003e[boolean]\u003c/i\u003e]) | Sorts the timelines and groups in chronological order of their most recent data point. The boolean parameter indicates whether the order should be ascending (`true`) or descending (`false`). | true |\n| \u003cb\u003ezoomX\u003c/b\u003e([\u003ci\u003e[startDate, endDate]\u003c/i\u003e]) | Getter/setter for the chart's time (horizontal) zoom. A null value indicates a zoom reset to full extent.  | `null` |\n| \u003cb\u003ezoomY\u003c/b\u003e([\u003ci\u003e[number, number]\u003c/i\u003e]) | Getter/setter for the chart's vertical zoom. The parameter should follow the syntax `[\u003cstart row index\u003e, \u003cend row index\u003e]`. A null value indicates a zoom reset to full extent.  | `null` |\n| \u003cb\u003ezoomYLabels\u003c/b\u003e([\u003ci\u003e[number, number]\u003c/i\u003e]) | Getter/setter for the chart's vertical zoom in terms of timeline labels. The parameter should follow the syntax `[\u003cstart label\u003e, \u003cend label\u003e]`. A null value indicates a zoom reset to full extent.  | `null` |\n| \u003cb\u003eonZoom\u003c/b\u003e([\u003ci\u003efunction\u003c/i\u003e]) | Getter/setter for the callback function for user initiated zoom (incl. zoom resets). Callback will have two parameters: `onZoom([startDate, endDate], [startY, endY])`. | `null` |\n| \u003cb\u003eenableOverview\u003c/b\u003e([\u003ci\u003eboolean\u003c/i\u003e]) | Getter/setter for whether to show an interactive timeline overview below the chart. | true |\n| \u003cb\u003eoverviewDomain\u003c/b\u003e([\u003ci\u003e[startDate, endDate]\u003c/i\u003e]) | Getter/setter for the time extent shown in the overview section below the chart. | *\u0026lt;auto-derived from data: `[minTs, maxTs]`\u0026gt;* |\n| \u003cb\u003egetVisibleStructure\u003c/b\u003e() | Returns data representation of timelines currently visible in the chart. | - |\n| \u003cb\u003egetSvg\u003c/b\u003e() | Returns graphic (SVG) representation of currently visible chart. | - |\n| \u003cb\u003eenableAnimations\u003c/b\u003e([\u003ci\u003eboolean\u003c/i\u003e]) | Getter/setter for whether to animate transitions. | true |\n| \u003cb\u003eonLabelClick\u003c/b\u003e([\u003ci\u003efunction\u003c/i\u003e]) | Getter/setter for the callback function for clicking on the Y axis labels. Callback will include the clicked label (if applicable) and group parameter: `onLabelClick(\u003cstring\u003e, \u003cstring\u003e)`. | `null` |\n| \u003cb\u003eonSegmentClick\u003c/b\u003e([\u003ci\u003efunction\u003c/i\u003e]) | Getter/setter for the callback function for clicking on a segment. Callback will return a segment object: `onSegmentClick(segment)`. | `null` |\n| \u003cb\u003esegmentTooltipContent\u003c/b\u003e([\u003ci\u003efunction\u003c/i\u003e]) | Getter/setter for the callback function to populate a custom tooltip for segments. The segment data point is provided as sole argument: `segmentTooltipContent(d)`. Supports plain text or HTML content. | `null` |\n| \u003cb\u003erefresh\u003c/b\u003e() | Rerenders chart. | - |\n\n## Data syntax\n\n```\n[\n  {\n    group: \"group1name\",\n    data: [\n      {\n        label: \"label1name\",\n        data: [\n          {\n            timeRange: [\u003cdate\u003e, \u003cdate\u003e],\n            val: \u003cval: number (continuous dataScale) or string (ordinal dataScale)\u003e\n          },\n          {\n            timeRange: [\u003cdate\u003e, \u003cdate\u003e],\n            val: \u003cval\u003e\n          },\n          ...\n        ]\n      },\n      {\n        label: \"label2name\",\n        data: [...]\n      },\n      ...\n    ],\n  },\n  {\n    group: \"group2name\",\n    data: [...]\n  },\n  ...\n]\n```\n\n## Giving Back\n\n[![paypal](https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_donations\u0026business=L398E7PKP47E8\u0026currency_code=USD\u0026source=url) If this project has helped you and you'd like to contribute back, you can always [buy me a ☕](https://www.paypal.com/cgi-bin/webscr?cmd=_donations\u0026business=L398E7PKP47E8\u0026currency_code=USD\u0026source=url)!\n\n[npm-img]: https://img.shields.io/npm/v/timelines-chart\n[npm-url]: https://npmjs.org/package/timelines-chart\n[build-size-img]: https://img.shields.io/bundlephobia/minzip/timelines-chart\n[build-size-url]: https://bundlephobia.com/result?p=timelines-chart\n[npm-downloads-img]: https://img.shields.io/npm/dt/timelines-chart\n[npm-downloads-url]: https://www.npmtrends.com/timelines-chart\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvasturiano%2Ftimelines-chart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvasturiano%2Ftimelines-chart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvasturiano%2Ftimelines-chart/lists"}