---

Table of Contents

• What is it
• Main Features
• How to run
• Project Structure
• Where to Run PerfFlow.js
• How to Run PerfFlow.js
• Discussion and Development
• Contribution

PerfFlow.js: a powerful javascript performance analysis module

What is it?

PerfFlow.js is a javascript package that allows flexible, and expressive runtime speculation designed to make your data query-heavy applications more interactive! It has been developed targeting the SUSTAIN groups Aperture Project.

Main Features

• PerfFlow.js is built on Tensorflow.js, with D3.js and Leaflet.js among other packages.
• It provides neat-looking correlograms to compare the correlation of the features that it captures.
• It provides functions to train Linear and Non-Linear Regression neural nets to determine the optimum load a device can and should be able to handle.
• It is built for Leaflet.js and Uses Leaflet EasyButton to allow you to create your own custom buttons to extend functionality.

Project Structure

index.html    # main page of the client
app.js        # where the core logic of the applications lies, from map initalization to custom button creation.
data.js       # several useful functions for ajax requests to get GeoJSON data from external sources to add to our map.
ml-utils.js   # where all the Tensorflow.js code iskept, from Creation, training and testing of Neural Network Models. We've also written a K-fold cross validation function and a control run() function to piece them all together.
normalization.js # helper functions sourced from tf-examples repo for Normalization of Tensor data.
utils.js      # Where the correlation and correlogram functions reside, along with misc helper functions for GeoJSON generation.
webpack.config.js # title explains it all
styles.css    # made to make the sample app look acceptable.
/backups      # literal backups of app.js kept around just-in-case. May need to clean up later.
/images       # where images for the client are stored
/src          # where javascript modules are places(older ones that are not directly referenced in the current project)

Where to use it

This project, or parts of it can be helpful samples for you if you are looking to do any the following:

1. Working on Leaflet.js as a pure js application, vanilla or with extensions, like Leaflet Draw, Leaflet Easy button, Leaflet Fullscreen or Leaflet Minimap.
   • We build a conventional mapping application making AJ AX data requests from a novel US Census Tract GeoJSON dataset generated by mehrotrasan16.
   • This app is provided as a sample and as a working-sample in an experiment for a Master's Thesis/Project to draw parallels to real mapping applications.
2. Working on Client-side Performance Monitoring and real-time user monitoring(RUM).
   • We use several official W3C Standardized and experimental APIs to try to capture data and understand the user's Application, System Device and Network parameters/limitations.
   • Developers interesting in using the Navigation Timing API, Resource Timing API, User Timing API, Device Memory API, Performance.Memory API and Paint Timing API using High Resolution timestamps may find samples in the backups and history of this application.
   • We also tried working with the Performance Observer/Performance Timeline API and Indexed Databases APIs.
   • This is a fun experiment(pretty hardcore for first-timers) of how much awesome data can be captures and interactivity can be programmed into front-end analytics.
3. Working on Statistical analysis.
   • We use basic statistic methods to take these captured features and make sure that they are "good" to be used together.
   • Correlation of features can be easily done using the correlation module, but visualizing it is key to understanding what featues have what effect on each other.
   • We use the output from the javascript node-correlation package, to draw a Correlogram(correlation matrix diagram) using D3.
4. Working on Machine Learning in the client-side of a browser
   • We use the awesome power and data structures offered by Tensorflow.js and the great examples provided in the tfjs-examples repository to build two types of suitable models for regression modelling of our captured features.
   • We model simple one feature linear/non-linear regression
   • We also build a multi-variate non-linear regression model which performs better.
   • Our models use the ADAM optimizer with a learning rate of 0.001
   • We vary the size of the model and the number of layers, not exceeding 3-4 layers to keep the load of training a model in check. ML in the browser does train, but is slower and may not be optimized yet.(Smaller models do better on the CPU but are run on the integrated GPU card via WebGL anyway.)

How to run

1. Clone the repository
2. Navigate to the perfflow-js directory
3. Run npm install
4. Perform any clean-up or audit operations requested by NPM (not necessary, but good practice)
5. The sample webserver can now be started with the npm run serve command

Discussion and Development

All development and discussion was done with Dr's Sangmi and Shrideep Pallickara. This Project was developed as an proposed upgrade addon to the Sustain's Aperture Tool found under the Services -> Visual Analytics heading on urban-sustain.org

Contributing to PerfFlow

All contributions, bug reports, bug fixes, documentation improvements, enhancements, and ideas are welcome.

Licence: MIT

Created by Sanket Mehrotra