@mhjuma/timeline

D3 Timeline

d3 timeline with brush axis.

Installation

NPM

npm install @mhjuma/timeline

CDN

<script type="text/javascript" src="https://unpkg.com/@mhjuma/timeline"></script>

Usage

const domElement = document.getElementById('app');

const chart = timeline()
    .width(1920)
    .height(1020)
    .data(myData)
    .render(domElement);

Data Contract

The data object passed to the timeline chart must be an array of the following type:

interface Data {
    name: string;
    start: string;
    end?: string;
    group?: string;
    track?: number;
}

Where the start and end values are either Date objects or a string that is ISO8601 compliant.

Property	Type	Required	Description
name	string	Yes	Datapoint label
start	Date or string	Yes	Start time for datapoint
end	Date or string	No	End time for interval datapoint
group	string	No	Group the datapoint belongs to
track	number	No	Track (row) the datapoint will be drawn on within the group

Example:

const myData = [
    {
        name: 'foo',
        start: '2022-01-01T00:00:00.000Z',
        end: '2022-01-10T00:00:00.000Z',
    },
    {
        name: 'foo',
        start: '2022-01-01T00:00:00.000Z',
        end: '2022-01-10T00:00:00.000Z',
    }
];

API

Function	Description	Default
width(width?: number)	Chart width in px	960
height(width?: number)	Chart height in px	500
margin(margin?: { top: number, right: number, bottom: number, left: number })	Chart margins in px	{ top: 20, right: 20, bottom: 20, left: 20 }
backgroundColor(color?: string)	Chart background color	'#FFFFFF'
gridColor(color?: string)	Gridlines color	'#EAEAEA'
nodeColor(color: (d: Data) => string)	Callback to set datapoint background color	schemeAccent
textColor(color: (d: Data) => color)	Callback to set datapoint text color	'black'
text(text: (d: Data) => string)	Callback to set datapoint label	d.name
tooltips(tooltips: boolean or (domElement: SVGGElement, visible: boolean, data: Data) => void)	Boolean to show default tooltip or callback to set custom tooltip	false
xAxis(xAxis?: boolean)	Boolean to show xAxis for timeline and brush	false
xBrush(xBrush?: boolean)	Boolean to show brush	false
click(click: (d: Data) => void)	Callback when a datapoint is clicked	undefined
highlight(click: (d: Data) => boolean)	Callback to determine if datapoint is highlighted	undefined
data(data: Data[])	Data array	[]
render(domElement: HTMLElement)	Renders the chart	undefined

Credit

This project was inspired by the following projects:

• timelines-chart
• Timeline for d3 - proof-of-concept

Changelog

View recent updates

License

MIT