JavaScript代写:INFT 3970 Unforgettable

Introduction

D3.js这个JavaScript的库,做一个备忘录的应用。这个Project只用负责D3部分,安卓部分不用做。

Project Background

Unforgettable is an Android application for users to constantly and automatically record the events of their life, and upload relevant data to a search engine that allows them to retrieve these data whenever they need to. The search engine can be accessed at Unforgetable.me.
Using the application, users have the option to record the following data using their smartphone: Location (GPS), Audio Recording, Image, Accelerometer. The phone’s Accelerometer is collected all the time while the GPS, Image and Audio are collected periodically. Users can change the application’s settings to control triggers that determines when these data are collected. For instance, trigger can be a time interval or the movement of the phone based on its accelerometer values. These data are grouped into individual segment every hour and stored on the phone. Users have the option to review and delete each segment if needed. These segments are then deleted from the phone and automatically uploaded to the search engine on Unforgetable.me. Based on the time in which each segment was initiated, the website is able to obtain further data such as temperature, weather conditions and moon age for that segment. Currently, the following variables of each segment are accessible by users: Time, Location, Location Count, Accelerometer Count, Moon Age, Weather Conditions, Temperature and a list of Keywords (tags) summarizing the data of this segment. After retrieving these segments using the search engine, users have the option to display them in either simple listing or through visualizations such as charts and maps. This project will be focusing on the development of these visualizations.

Business Needs and Issues

Needs

  • Professional designer is needed to improve the design of the website.
  • Permissions settings for the application needs changes to work in smartphone devices using Android 6 and above.
  • More features need to be added to the current visualizations, and new visualization styles need to be developed to enhance users experience.
  • Current visualizations need development to be correctly displayed and easily readable for users on both desktop and smartphone devices.
  • The Keyword Correlation Display can be summarized into simple points format instead of complex charts to be easily readable on smartphone devices.
  • Visualizations need changes to display only valuable variables, those that the users are most interested in.
  • Currently numeric and non-numeric variables are combined into a single visualization: Keyword Correlation Display. A new Numeric Value Correlation Display needs development to display only numeric variables.

Issues

  • The design of the website is still new and simple, thus needs improvement to make it look more visually attractive to users.
  • Currently, for smartphone devices using Android 6 and above, users have to manually set the application’s permissions settings for it to work properly without crashing.
  • The application is only available on Android devices. Other smartphone operating systems such as the iOS and Windows Phone do not support the application.
  • Currently the visualizations are limited to only three styles: line chart, calendar and matrix correlation display with limited features.
  • Several visualizations such as the Keyword Correlation Display and Location Count Calendar are incorrectly displayed on smartphone devices due to their small screen size.
  • The visualizations are currently displaying all variables and not all of them are necessarily interesting to users.

Project Objective

To improve and develop the visualizations of user data on Unforgettable.me using JavaScript library D3.js. The project is to be completed in 11 weeks by a team of four members. There will be no cost for this project as all resources are available online and given by our client.

Deliverables

The following deliverables of our project will be composed of individual HTML files containing D3.js codes designed for each visualization that are required by our client. As a result, we are able to complete each deliverable and deliver it to our client separately, gradually over the course of our project. The technology platforms for developing these deliverables will be discussed in section 5. Technical requirements.

  1. Line Chart Displays for desktop and smartphone: Display numeric variables.
  2. Histogram Chart Display for desktop and smartphone: Display numeric variables.
  3. Keyword Correlation Display for desktop: Display all correlations between keywords (tags).
  4. Keyword Correlation Display for smartphone: Display only the most important correlations between keywords (tags).
  5. Numeric Value Correlation Display for desktop: Added to Keyword Correlation Display, for displaying correlation between each pair of different numeric variables.
  6. New Location Count Calendar for desktop: With added labels, minimum and maximum values of time length, for displaying the number of locations visited by the user over a time period.
  7. New Event Count Calendar for desktop: With added labels, minimum and maximum values of time length, for displaying the number of event (segment) recorded over a time period.
  8. New Bar Chart Displays: Accumulate all numeric variables to show trend among each of day of the 7-day week.
  9. Google Maps that displays all locations returned by a query.
  10. Chord Display for keyword correlations
  11. Force Directed Graph to display all keywords relationships.

Technical Requirements

A sample set of user data will be given by our client in JavaScript format. The visualizations will be built to display these data using JavaScript library D3.js. For each visualization, the D3.js codes and the data set will be combined into a single HTML file as a final product.

  • Line Chart Display (1), Histogram Chart Display (2) should be able to correctly display all numeric variables on both desktop and smartphone devices.
  • Histogram Chart Display (2) should calculate and return the mean and median of each numeric variable.
  • The Keyword Correlation Display (3) for desktop should have color coded clusters added to display different sorts of information individually by using different color.
  • The Keyword Correlation Display for both desktop and smartphone (3,4) should clearly visualize different levels of correlation between each pair of keywords.
  • The Keyword Correlation Display (4) for smartphone must display the Top 5 and Bottom 5 keywords relationships with the highest, lowest correlation coefficients respectively.
  • The Numeric Value Correlation Display for desktop (5) should clearly visualize different levels of correlation between each pair of numeric variables.
  • The Location Count Calendar and Event Count Calendar (6,7) should only visualize the location count and event count respectively over a period of time set by the users.
  • For each numeric variable, The Bar Chart Display (8) accumulates all values on each day of the 7-day week (Mondays to Sundays), calculates and returns the mean of the variable on each day to show the trend of the variable over other days.
  • The Google Maps Display (9) should demonstrate all locations visited by the user. It must be able to show which location(s) that the user visits most frequently by pointing the locations with circles varying in size to reflect the number of visits.
  • The Chord Display (10) shows keywords correlation in a circle. Each keyword is given a curve of that circle whose length is equal to its frequency. When the user clicks on a keyword (curve), the curve length of other keywords changes to reflect the correlation between the chosen keyword and the others.
  • A Force Directed Graph (11) should demonstrate which relationship(s) each keyword has with others by connecting them with extendable lines. Each keyword is represented by a dot and its value is shown above the dot.

Limits and Exclusions

Limits

  • The visualizations are to be designed based on a specific set of user data provided by our client. As a result, the visualizations design will be limited to the format of this data set.
  • Testing of the visualizations on smartphone will be carried out using a Google Nexus 5 and a Sony Xperia Z5 with Android version 6.0.1. Therefore, the display of these visualizations might be different if tested on smartphone with older Android versions.
  • Due to time constraints, we are not to carry out testing of the visualizations on the website. Our project focuses solely on designing the visualizations using D3.js.

Exclusions

  • The client will be responsible for the implementation of the newly developed visualizations (HTML files containing D3.js codes) into the website.
  • The client will be responsible for the maintenance of these files and their future development.
  • The D3.js codes are written to design visualizations for a specific set of user data given by the client, thus these codes might need modifications by the client should the data format is changed in future development of the application.