EnviroCar Visual Analytics

Introduction

The enviroCar project allows users to collect and share their driving statistics via an OBD sensor coupled with an Android app. The app collects car data and pushes the data to a server with a stateless REST API that exposes this data. The website of the enviroCar project, which is currently built in PHP, makes use of this API endpoint to provide a dashboard experience to a user for vehicular track analysis. The project’s objective is to rebuild the website as a SPA (Single Page Application) with the AngularJS framework that could also serve as the starting point for the next generation website.

Repository: https://github.com/enviroCar/enviroCar-website-ng

Blog Posts:

Introductory Blog Post: http://blog.52north.org/2016/05/23/envirocar-visual-analytics-overview/

Weekly Reports

Report Week 1

Objectives:

• Deciding the overall workflow logic and sections of different pages that a user can navigate to.

• Building the individual components of Landing Page.

  1. Detailed Timeline of Last 5 tracks.

  2. Total Number of tracks

  3. User vs Public Statistics.

  4. Efficiency zones(Grading).

• Single Track analysis

  1. Using NVD3.js for time series charts of different phenomenon.

Problems Faced:

• OcLazyLoad module loads javascript files asynchronously, so for now there are a few cases where d3.js does not load before nvd3.js and gives errors as nvd3 depends on d3. This has to be fixed using the serie option of ocLazyLoad.

• There seems to be an issue with a few versions of Firefox where the graphs are slower compared to in chrome.

Going ahead:

• Once the envirocar API is capable of returning other extra data about the user, those parameters will be included in the landing page.

• A scientifically sound grading system is to be built for the efficiency zones grading system.

• Including Leaflet JS in the single track analysis.

Report Week 2

Objectives:

• Migrating from the implemented Bootstrap based dashboard to Angular Material Based to have a consistent interface across all platforms(The android app).

• Implemented varying track coloring scheme for different phenomenon and their respective ranges.

• Include Overall Track Summary of Track.

• Implement Pagination based approach of Tracks list of a User.

Problems Faced:

• The current pagination implementation has a fraction of a second where data from both the previous page view and the one requested for appear together.

• The “panel-widget” is currently forcing me to call the controller for each of the components in a page(for tracks page it is 4 times). The controller should be called only once and the directive is not rendering the UI elements if the controller is defined in the ui.router.

Report Week 3

Objectives:

• To depreciate pagination-utils that was being used in favor of a custom implementation for pagination

• To allow the single track analysis page to handle users who are not logged in(but want to view other’s tracks)

• Cleaning existing artifacts and exploring other ways to make the load experience smoother for a user.

• Including My Activity and Friend Activity in the dashboard.

Problems Faced:

• Profile pictures are not loading properly due to a CORS error that is arising from gravatar on a redirect.

Going ahead:

• Fixing Minor issues and concerns in the current pages.

• Fixing the multiple loads of the controller.

• Exploring further possible analytics that can be performed.

Going Ahead:

• Additions to leaflet track like legend, scale.

• Checking for phenomenons before trying to access their values and units to avoid exceptions.(Error handling)

• To add a search option in the Tracks page for searching tracks.

Report Week 4

Objectives:

• To improve the User Interface of the dashboard page - top header, tabbed approach to keep content clean.

• Improve rendering of leaflet map to avoid initial global map appearance momentarily.

• List of friend’s in dashboard.

• Exploring profile of friend’s in a consistent manner(Similar to viewing one’s own profile).

• Track preview options in all tracks page list

Problems Faced:

• UI issues faced in mobile devices.

Going Ahead:

• Search option for friends.

• Similar inclusion of groups section along with friends.

• To modify UI to handle cases with empty or reduced data more elegantly.

• Prevent user from viewing profile of a person not in the friend list(rather than giving empty sections/card contents).

• Segment track analysis Exploration.

Report Week 5

Objectives

• To complete the integration of calendar with corresponding tracks as an alternative to the tracks page listing all tracks.
• Move the multiple phenomenon selection tool in the graph to the toolbar as a checkbox menu item.
• Replace the existing phenomenon selection method in leaflet and the pie chart with a material menu item with buttons.
• To modify existing features to incorporate new additions to the tracks list API.
• To add loaders at required places.
• Separate the public vs user’s phenomenon into separate graphs of their own to prevent any assumptions of correlation between the phenomenon.

Problems

• The nvd3 graphs do not work properly if used with ng-hide (they work with ng-if).
• The height of the nvd3 graph has to be set explicitly.

Upcoming

• Layout changes to the main dashboard page.
• Heatmap for starting and ending points of a user.
• Pie charts for speed ranges.

Report Week 6

Objectives:

• Mapping between Leaflet of Map and NVD3 to pin point corresponding location on map for the value of phenomenon selected on the time series chart.

• UI element ratios have been made consistent to work across all screens and to avoid disproportionate empty spaces.

• HeatMap included for all starting and ending points of the user - To determine the geographical region that the user is most associated with.

• Track Summary built on same lines as android app for consistency across stack.

Problems Faced:

• The corresponding location on the leaflet for a selected graph point is only updated when some event is triggered on the map.

Going Ahead:

• Standardizing Consumption and CO2 Calculation.

• Monthly Statistics in Calendar tracks list.

• Profile form for editing user information.

Report Week 7

Objectives:

• Consumption and CO2 calculation using MAF/Calculated MAF values has been deprecated in favor of Calculation only if the phenomenon is available.

• User Details/Profile form for editing user information.

• Monthly Statistics Summary in the calendar view of the tracks.

• Preview track image in latest tracks of dashboard.

• Checks in place to avoid errors on missing phenomenon

Going Ahead:

• Search option for friends.

• Similar inclusion of groups section along with friends.

• To modify UI to handle cases with empty or reduced data more elegantly.

• Prevent user from viewing profile of a person not in the friend list(rather than giving empty sections/card contents).

• Segment track analysis Exploration.

Report Week 8

Objectives:

• Segment Track analysis approach added to allow a user to explore a reduced subset of their track in the single track page. Statistics of the reduced track are done on the fly.

• Speed zones have been added in the dashboard(Placeholders are in place currently).

• Updating profile is working with proper validations in place.

• All activity schema is now included, this would fix errors in browser’s for a few type of events.

• Pie Charts have been tweaked a little on the UI front.

• Friend’s profile view is now added to the dashboard.

Going ahead:

• Rework the UI of the latest Tracks list.

• Segment Track analysis approach as a standalone page.

• Navigation bar to be redesigned.

Report Week 9

Objectives:

• UI of the latest tracks approach has been bettered.

• Fixed non rendering of preview of track in the dashboard.

• The paginated approach of the “All tracks” section has been replaced with a filter based approach that allows to efficiently search through and also order tracks.

• Sidebar has been redesigned.

• Segment analysis page has been added with functionality for adding markers and also creating paths on the fly has been done. The interactions with the map are very flexible from a user’s point of view.

Problems Faced:

• Implementing a array based implementation for markers in leaflet is allowed, but implementing a dynamic set of markers can cause unexpected behaviour with an array of markers. Recommend to only use the object based approach.

Going ahead:

• Rework the UI of the latest Tracks list.

• Segment Track analysis approach as a standalone page.

• Navigation bar to be redesigned.

Report Week 10

Objectives:

• To add a chip based approach to the filters for better extensibility in the future on addition of multiple filters.

• To implement the functionality of the Segment analysis page. To include the ArCGiS layer includes information of all tracks crossing a particular region.

• To modify the working of the side navigation bar for different device sizes.

• To combine the activity and friend’s page along with the group page.

Problems Faced:

• The current Leaflet directive that is being used does not have support for Leaflet draw edit options, Considering a different approach

Report Week 11

Objectives:

• Modify the button based method of adding chips to a one with dropdown based approach

• Add functionality for reverse ordering in tracks filter.

• Complete functionality of current segment page by adding graph to visualize data returned by server.

• Explore UI-leaflet instead of the leaflet-directive being used at present to work with leaflet draw.

Problems Faced:

• Heatmap does not work with the UI-leaflet implementation.

• Bower install for ui-leaflet-draw does not work as expected. Manually include files.

Report Week 12

Objectives:

• UI-Leaflet has good support for leaflet-draw and heatmap worked after a clean install of all packages.Migrating completely to UI-leaflet.

• Rewriting the segment analysis page with leaflet-draw.

• Code documentation in form of explanatory comments across all files

• General code cleanup

• Attempting to deploy application to heroku.

Problems Faced:

• CSSO had to be removed from build.js as it was unable to parse working/correct CSS code.

• Gulp build runs successfully but the very same modules that work fine with gulp serve throw errors.

<!--

-->