Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bluehalo/sentio
https://github.com/bluehalo/sentio
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/bluehalo/sentio
- Owner: bluehalo
- License: other
- Created: 2014-11-26T21:19:51.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2022-12-07T01:06:09.000Z (about 2 years ago)
- Last Synced: 2024-11-18T10:57:28.349Z (about 1 month ago)
- Language: JavaScript
- Size: 2.07 MB
- Stars: 2
- Watchers: 21
- Forks: 3
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGES.md
- License: LICENSE
Awesome Lists containing this project
README
# @asymmetrik/sentio
[![Build Status][travis-image]][travis-url]
> Sentio JS
> Provides a JavaScript library for visualizing and analyzing data.
> Sentio leverages several existing technologies, including [D3.js](http://d3js.org).
> Now supports D3 v7
## Table of Contents
- [Install](#install)
- [Usage](#usage)
- [API](#api)
- [Contribute](#contribute)
- [License](#license)
## Install
Install the package and its peer dependencies via npm:
```
npm install d3 @asymmetrik/sentio
```
To build from source:
```
git clone [email protected]:Asymmetrik/sentio.git
cd sentio
npm install
npm run build
```
The artifacts will be located in the ./dist dir.
## Usage
Sentio is built for consumption using module systems or through global import.
To import Sentio into the global ```sentio``` variable:
```
```
Otherwise, you can directly import the components of the library if you're using Typescript or ES6 modules.
## API
Sentio mimics d3's style of using closures to create resources and having shared getter/setter methods.
The general usage pattern is to create the chart and do some initial configuration:
```
var timeline = sentio.chartTimeline()
.width(500)
.height(100);
```
Then, you attach the chart to an element on the page,
bind data and/or provide series configuration,
and call the ```redraw()``` method to draw the chart:
```
var timelineDiv = d3.select('#chart');
timeline.init(timelineDiv)
.data(...)
.series(...)
.redraw();
```
For specific components, refer to the documentation in the source files.
### Chart Types
* `chartTimeline` - Static timeline. Allows multiple configurable series, and optional brushing.
* `chartRealtimeTimeline` - Realtime timeline. Same as the regular timeline, but it will automatically scroll the timeline at a realtime rate.
* `chartAutoBrushTimeline` - Specialized brush timeline that updates its extent automatically in response to changes to the brush.
* `chartDonut` - Donut chart. Allows custom color schemes and data series.
* `chartMatrix` - Visualize two dimensional data using a matrix heatmap.
* `chartVerticalBars` - Stacked bar chart that animates changes to the width of the bars as well as the order of the bars.
## Helpers/Utilities
* `modelBins` - Bin data into configurable bins.
* `controllerRealtimeBins` - Manage a bin model for use with the realtime timeline.
* `modelExtent` - Configurable manager of the extent of a data series.
* `modelMultiExtent` - Aggregate multiple data series with one extent.
* `controllerResponsiveUnits` - Generate timeline axis units that match the extent of the timeline.
* `timelineBrush` - Helper for managing a brush on a timeline.
## Contribute
PRs accepted. If you are part of Asymmetrik, please make contributions on feature branches off of the ```develop``` branch. If you are outside of Asymmetrik, please fork our repo to make contributions.
## License
See LICENSE in repository for details.
[travis-url]: https://travis-ci.org/Asymmetrik/sentio/
[travis-image]: https://travis-ci.org/Asymmetrik/sentio.svg