QC Visualization

From B2BWiki

Jump to: navigation, search

QCvisualization schematic.jpg

Technologies used

NodeJS, ExpressJS, MongoSkin, MongoDB -- REST API
A Rest API was created so that one can get QC metrics from a http request. This server listens on port 3000 and responds to a variety of paths
  • It sends an array of available measurements when the “measurements” route is queried with a GET request
  • It sends an array of Sample identifiers when the “<measurement name>/samps” route is queried with a GET request
  • And, it sends an array of measurement objects when the “<measurement name>/bysamps” route is queried with a POST request with an array of selected samples in the body of the request.
AngularJS, NVD3, and AngularJS_NVD3_Directives -- Front End Interface
The front end was created with AngularJS. Angular is a modern JS framework for making web apps where data is shared bidirectionally in near-real-time between the view the the user is interacting with and the model/controller logic that is feeding the view. This is how all of the user selections are used to get data from the rest api. Angular also integrates well with NVD3. NVD3 is a chart library for data visualization. In this application, we are using a custom Angular directive that interfaces with NVD3. As soon as the data array comes back from the REST API, the data is loaded into the NVD3 graph and rendered for the user. NVD3 automatically creates an interactive legend for the user so that subsets of the data can be quickly selected.
Personal tools