Component Kitkat

Kitkat component handles the rendering of extensible graph components, including:

• Vertical & Horizontal Bar chart
• Line chart
• Pie chart

Building Kitkat

To install node modules:

npm install

To build the component (run browserify and uglify):

npm run build

Testing Kitkat

To run both style check and unit test:

npm test

Publishing Kitkat

To publish kitkat as a npm package:

1. Login to npm (Get credentials from Pey Lun or Yit Chun)

   npm login

2. Publish the package

   npm publish

NVD3

NVD3 is a reusable charting written in D3.js, inspired by the work of Mike Bostock's Towards Reusable Charts.

Kitkat component adopts NVD3's code structure, and consumes the following NVD3 models for added functionalities & features:

• axis.js
• multiBar.js -> vertical-base.js
• multiBarChart.js -> vertical.js
• multiBarHorizontal.js -> horizontal-base.js
• multiBarHorizontalChart.js -> horizontal.js
• scatter.js -> scatter-base.js
• line.js -> line-base.js
• lineChart.js -> line.js
• pie.js -> pie-base.js
• pieChart.js -> pie.js

References:

• NVD3 Homepage
• NVD3 on Github
• NVD3 Documentation
• NVD3 Examples

D3

D3.js is a JavaScript library for manipulating documents based on data, combining powerful visualization components and a data-driven approach to DOM manipulation. References:

• D3 Homepage
• D3 on Github
• D3 Documentation
• D3 Examples
  • Gallery
  • mbostocks's bl.ocks
• D3 Tutorials, some good reads:
  • Three Little Circles
  • Thinking with Joins
  • How Selections Work
  • Nested Selections
• D3 Workshop