https://github.com/zhangyu94/d3-timeseries
Reusable multi-resolution timeseries layout plugin for d3
https://github.com/zhangyu94/d3-timeseries
d3v3 linechart multi-resolution pixel-layout timeseries
Last synced: 9 months ago
JSON representation
Reusable multi-resolution timeseries layout plugin for d3
- Host: GitHub
- URL: https://github.com/zhangyu94/d3-timeseries
- Owner: zhangyu94
- License: mit
- Created: 2016-08-19T08:51:45.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2017-07-08T07:10:46.000Z (almost 9 years ago)
- Last Synced: 2025-04-09T23:59:47.954Z (about 1 year ago)
- Topics: d3v3, linechart, multi-resolution, pixel-layout, timeseries
- Language: JavaScript
- Homepage: http://zhangyu94.github.io/d3-timeseries/
- Size: 258 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# d3-timeseries
D3 3.0 implementation of timeseries plugin that supports easy customization of bitmap / horizongraph / linechart or multiresolution layout self adaptive to display height.
The plugin is implemented as a closure that support method chaining.
## Installing
Dependency: D3-timeseries requires D3 3.x version and jquery as dependency
Installing: All the content of d3-timeseries plugin is in the folder libs/d3_timeseries. To use bitmap or horizon or linechart, you can just download the corresponding single file (and corresponding css, if it has) in the folder. Two different versions of linechart are provided that share the same css file.
## How to render a line chart
**Step1**. Binding: use jquery to select a div, and bind a d3_linechart object to it with $("#"+divID).d3_linechart()
**Step2**. Style specification: customize it with method chaining, such as $("#"+divID).d3_linechart().height(200).data(data)
**Step3**. Render: Evoke ($("#"+divID).d3_linechart().render())() to get the chart rendered. Another option is to use d3_linechart = $("#"+divID).d3_linechart() to get the renderer, and render the chart yourself with svg.datum(data).call(d3_linechart)
## Usage example
```js
var linechart = [{
label: "Data Set 1",
data: [
{x:0,y:0},
{x:1,y:1,color:"red"},
{x:2,y:2,color:"red"},
{x:3,y:-3},
{x:4,y:4,color:"red"},
{x:5,y:17},
{x:6,y:3},
{x:7,y:3}
]
}]
var renderer = $("#"+divID).d3_linechart()
.data([linechart])
.x_scale_type("linear")
.draw_xgrid(true)
.draw_ygrid(true)
.margin({top: 20, right: 80, bottom:20, left: 40})
.render()
renderer()
```
## Credits
The Horizon Graph layout is credit to the layout in https://bl.ocks.org/mbostock/1483226