Response plots with D3

D3js based plotting for Angular. This module focuses on easy usage and responsiveness. It provides plots in a custom or default 4:3 aspect ratio, at a dynamic width of 100% parents width. On window resize the plots scale, and after resize (200ms) they redraw.

Installation

npm i ng-d3plot
#or
yarn add ng-d3plot

Usage

In your root (or whatever) module import the needed modules.

import {
  HistogramModule,
  LineChartModule,
  PieModule
  TimeSeriesModule
} from 'ng-d3plot';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HistogramModule,
    LineChartModule,
    PieModule,
    TimeSeriesModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

In the modules component templates use the tags as follows

<d3p-histogram [data]="data" [config]="config"></d3p-histogram>
<d3p-line-chart [data]="dataLine" [config]="configLine"></d3p-line-chart>
<d3p-pie [data]="data" [config]="config"></d3p-pie>
<d3p-time-series [data]="data" [config]="config"></d3p-time-series>

Where the @Input()s are of type.

| | data | config | |-------------|-----------------------------------------|----------------------------------| | Histogram | Array<number> | Config & { ticks?: number } | | Line Chart | Array<{x: number, y: number}> | Config | | Pie Chart | Array<{label: string, value: number}> | Config & { color?: string[] } | | Time Series | Array<{date: Date, value: number}> | Config |

the basic Config interface looks like

interface Config {
  xLabel?: string;
  yLabel?: string;
  title?: string;
  aspectRatio?: number;
}

TBD

It is planned to add simple map (country: value).

Get in contact

• Check the authors website
• Get in touch via twitter or facebook