Analytics web application using D3JS and Bootstrap

A Small web application that visualizes the network data using only limited technologies like D3JS, JQuery, Lodash and Bootstrap frameworks from a REST Api built on Jquery Mock.

Browsers support Matrix

Firefox	Chrome	Safari
last 2 versions	last 2 versions	last 2 versions

Requirements for Challenge:

1. Design and implement a chart/graph that visualize the response of the above APIs.
2. Show your working charts/graphs in one page with the best look and feel that you can come up with.
3. Create a simple instruction on how to run your work.

Feature Utilization Matrix

D3JS Features	JQuery Features	Loadash Features	Bootstrap features
D3 - Force graph	$.Ajax	Array Manipulation	Responsive Layout
D3 - easing Effects	Jquery Selectors	Unique elements	fluid wrapper
D3 - Bar Graph	Jquery Loops and DOM Manipulation	Sorting complex objects	Loaded custom fonts - Roboto
D3 - Path graph	Jquery Basic functions and Effects	Header, footer and Element placement on the viewport

Pre-Requisites for Running the Application:

1. Make sure you have NodeJS (v4.x.x and above) installed globally on your machine. Find the detailed installation instruction from https://nodejs.org/en/
2. Modern Browsers - (Refer to Browser Matrix)

Installation:

install Node.js

1.If you're using OS X or Windows, the best way to install Node.js is to use one of the installers from the Node.js download page. 2.If you're using Linux, you can use the installer, or you can check NodeSource's binary distributions to see whether or not there's a more recent version that works with your system.

To test Run below Command - version should be > v6.9.4

$ node -v

Updating npm

Node comes with npm installed so you should have a version of npm. However, npm gets updated more frequently than Node does, so you'll want to make sure it's the latest version.

$ npm install npm@latest -g

To test Run below Command - version should be > 3.10.10

$ node -v

Clone the repository :

$ git clone https://github.com/Raulkg/BootstrapD3-Analytics.git
$ cd BootstrapD3-Analytics
$ npm install

Start server:

npm run start

Now, you can confirm the visualization result of the HTTP request/response exchanged via the specified RESTful API by accessing the following URL with browser.

http://127.0.0.1:8000/

Refer Screenshot for features:
1. Force graph with hover and text path features
2. Bar graph paginated with sorting feature
3. Realtime path graph generated by using variable data from REST API call
4. Statistics dispaly
5. Beautified with Bootstrap

#ScreenShots:

When you first load the page it should look like below Page#1

When you Scroll down it should look like below Page#2

When you hover over the node the display will show a D3 Force Graph with outward and Inward connections with arrows

When you hover over the node with the checkbox provided checked will display packet information

A list of Statistics of current REST API Call

A pagination Enabled Bar Graph without sorting

A pagination Enable Bar Graph Sorted for curent view when check box checked

A Realtime Graph with Streaming Path being printed . I am aware of using sockets or Streaming API but wanted to showcase my skills for displaying realtime Graph. This particular graph is limited to only one Object due to limited time .

Thank you and Suggestions are welcome

🎉🎉🎉 Thank you github for the Platform