bd2-ngx-polarplot
v18.0.0
Published
Angular component for plotting data in cyclic coordinates (mod range).
Downloads
7
Maintainers
Readme
bd2-ngx-polarplot
Angular component for plotting data in cyclic coordinates (mod range).
Interactive demo
Although it is called polar plot, it is not the de-facto polar plot in the sense in the matlab, as the data are one dimensional rather then angle/radius in typical polar plot.
It was designed to plot circadian phases, so peak times in data in 24 scale.
The domain range is cyclic, so the data are mod range, ie data 3, 27, 28 will be plotted as 3, 3, 4.
The petals represents the mean value of the series. Petals radius and width can be scaled by std dev of the data or the provided error values.
How to use it
Installation
npm install bd2-ngx-polarplot --save
Using
- Import the PolarPlotModule module:
@NgModule({
...
imports: [
...
BD2NgxPolarplotModule
],
bootstrap: [AppComponent]
})
export class AppModule { }
- Place the component in your template:
<bd2-ngx-polar-plot
[data]="data" [domain]="domain" [showIndividuals]="all"
[scaleRadius]="true" >
</bd2-ngx-polar-plot>
- Inputs
data: number[][]
series of data to represents as petals. For example:
data = [
[-23.4,1,25.2,48.7,73.1],
[22.5,21.5,20.6],
[3.5,4.9,3,4.9],
[15.1,16.2,16.1,12.2,12.8]
]
gives 4 petals as in the screenshot
domain: [start, end]
data will be represented around the circle[start,end)
mod domain range. Start does not have to be 0. The example above is made with domain[0,24]
showIndividuals: node | selected | all
, defaultsselected
. Determines how individual data points are presented, none no rendering, all, all data points are represented as cricles in the corresponding locations, selected the individual data points are rendered only when the corresponding petal is hoovered over. The example above is taken with optionall
scaleRadius: boolean
, default true, petals radius/length is scalled by the std deviationo of the data or provided errors. The larger the deviation/error the shorted the petalscaleWidth: boolean
, default false, petals width can be scalled by the std deviation of the data or provided errors values. The larger the error the wider the petaloptional
errors: number[]
, optional, errors values for each series, if missing the std. deviation of the inuput series is used for scaling width or radiusoptional
palette: string[]
, optional, collors to be used with the dataoptional
labels: string[]
, labels of the data, will be rendered in the center on hover over the petaloptional
labelsOn: boolean
, if true the label on hover works otherwise disabledoptional
lookAndFeel
, some rendering parameters, check the code for optionsoptional
removed: number[]
, indexes of the data groups that should be removed from plot. The removed groups are being rendered just hidden so the labels, colors are preserved and bringing them back/removing does not triggers transitions in the not removed petals
The angular demo project
This project was generated with Angular CLI version 8.3.20.
Credits
Integration with D3 is based on the code from d3-ng2-service by Tom Wanzek. The d3-ng2-service was actually used during development but then removed to reduce the dependencies and bundle size.
The axis grid is based on the radar plot implementation by Nadieh Bremer: radar chart, radar chart redesigned
The examples from Tom Wanzek [https://tomwanzek.github.io/d3-ng2-demo/] were also of great help.
Performance optimization was achieved by using tricks described by Pascal Precht in articles about using: ngZone ChangeDetectionStrategy.