Table of Contents
Install the package and its peer dependencies via npm:
npm install d3 @asymmetrik/sentio
To build from source:
git clone firstname.lastname@example.org:Asymmetrik/sentio.git cd sentio npm install npm run build
The artifacts will be located in the ./dist dir.
Sentio is built for consumption using module systems or through global import.
To import Sentio into the global
<link rel="stylesheet" href="./node_modules/dist/sentio.css" /> <script src="./node_modules/d3/dist/d3.js" charset="utf-8"></script> <script src="./node_modules/dist/sentio.js" charset="utf-8"></script>
Otherwise, you can directly import the components of the library if you're using Typescript or ES6 modules.
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.
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.
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.
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.
See LICENSE in repository for details.