basil-ionic-d3-timer
A demonstration of using a custom component in ionic.
This demonstration has a number of features
- Ionic 2 tabs application
- countdown timer rendered using d3.js
- use of a component in an ionic application
- communication between the component and page class using @input and @output, handling messages with ngOnChanges
- written in Typescript
- uses SCSS for some basic styling of the ion-grid and buttons
D3.js features
- use of d3-timer's timer and interval functions
- use of scaleLinear and scalePow
- rendering d3 arc's and text
- use of d3 filters to create a drop shadow (see Stefan Judis' Cloud storage ui codepen which you can find here).
This ring countdown timer was inspired by this Larry Williamson's Countdown Rings Codepen which you can find here.