CNS-Frontend-Visualization-Framework

WARNING: This code is no longer actively maintained. Check out ngx-dino or make-a-vis for our more current visualization framework code.

This framework contains a set of workflows, configurations, and tools to simplify web visualization creation and customization for CNS projects. This was made primarily for D3js visualizations, but can be used to create non-D3js visualizations with minimal modification. This framework is used in conjunction with the plugin repository found here.

Goal

Web visualization projects use quite a bit of similar code, and it can get pretty messy. Often these visualizations do not need to be completely rewritten for each application, but without a framework, it is easy to lock down the code for the particular application. This framework with the plugins provide generalized underlying visualizations that have methods to add layers of customization and standard methods to create.

Additionally, these visualizations need to be accessed and improved by people who may not know how to code, and quickly. The configuration objects and methods are made to extract most of the configurable options from the underlying code where they can be easily and safely modified.

We plan to grow our plugin library to cover many standard use cases that can be applied to non-standard needs. This allows us to cut down preliminary development time and spend more time customizing and improving the solution.

Technologies

Many web libraries are used to make this project function:

• AngularJS
• Twitter Bootstrap
• node.js
• jQuery
• Head.js
• D3js

Installation

• Clone this project
• You need npm, grunt, and git installed globally:
  • Git can be installed from: https://git-scm.com/download/win
  • NPM can be installed from: https://docs.npmjs.com/getting-started/installing-node
  • Grunt can be installed with NPM:

> npm install grunt

• After grunt, npm, and git have been installed and added to your system's path:
  • Open a command prompt/terminal in your project folder
  • Navigate to the /grunt directory
  • To install dependencies from the Grunt package.json file, run the following command:

> npm install --save-dev

Development

For now, this framework may be freely modified. Please fork this repository and submit a pull request with any structural changes. Also please respect the structure of this framework. Do not include data, project-specific configurations, or plugins to this repository.

TODOs

• Add test cases for contribution
• Improve Grunt build
• Solidify framework structure

License