bd2-ngx-polarplot

bd2-ngx-polarplot

Angular component for plotting data in cyclic coordinates (mod range).

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

1. Import the PolarPlotModule module:

@NgModule({
...
  imports: [
  ...
    PolarPlotModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

1. Place the component in your template:

<bd2-ngx-polar-plot
  [data]="data" [domain]="domain" [showIndividuals]="all"
  [scaleRadius]="true" >
</bd2-ngx-polar-plot>

1. 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, defaults selected. 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 option all

• 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 petal

• scaleWidth: 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 petal

• optional errors: number[], optional, errors values for each series, if missing the std. deviation of the inuput series is used for scaling width or radius

• optional palette: string[], optional, collors to be used with the data

• optional labels: string[], labels of the data, will be rendered in the center on hover over the petal

• optional labelsOn: boolean, if true the label on hover works otherwise disabled

• optional lookAndFeel, some rendering parameters, check the code for options

• optional 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 1.0.0.

The git source contains the component code under src/lib and the angular demo page at src/demo. It is a CLI project so:

• Run ng serve for a dev server. Navigate to http://localhost:4200/ to see the demo app and check the effect of different options
• Run ng test to execute the unit tests via Karma.

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.

Bd2NgxPolarplot

This library was generated with Angular CLI version 7.2.0.

Code scaffolding

Run ng generate component component-name --project bd2-ngx-polarplot to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project bd2-ngx-polarplot.

Note: Don't forget to add --project bd2-ngx-polarplot or else it will be added to the default project in your angular.json file.

Build

Run ng build bd2-ngx-polarplot to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build bd2-ngx-polarplot, go to the dist folder cd dist/bd2-ngx-polarplot and run npm publish.

Running unit tests

Run ng test bd2-ngx-polarplot to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.