神刀安全网

D3 heatmap representing time series data similar to GitHub's contribution chart

D3 Calendar Heatmap

A d3.js heatmap representing time series data. Inspired by Github’s contribution chart

D3 heatmap representing time series data similar to GitHub's contribution chart

TODO’s

  • Enable/disable tooltip
  • Editing of tooltip text
  • Editing of the cell gradient colours
  • Configuration of the start/end dates
  • Add optional callback for click events on the day cells

Configuration

Property Usage Default Required
data Path to data to render on the chart none yes
selector DOM selector to attach the chart to body no

Dependencies

Usage

1: Include the calendar-heatmap.js code after d3.js and moment.js <script src="path/to/calendar-heatmap.js"></script>

2: Format the data so each array item has a date and count property. As long as new Date() can parse the date string it’s ok. Note – there all data should be rolled up into daily bucket granularity.

3: Configure the chart and render it

// chart data example var chartData = [{   date: valid Javascript date object,   count: Number }]; var chart1 = calendarHeatmap()               .data(chartData)               .selector('#chart-one'); chart1();  // render the chart

Pull Requests and issues

…are very welcome!

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » D3 heatmap representing time series data similar to GitHub's contribution chart

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮