MetricsVis: Interactive Visual System of Customized Metrics on Evaluating Multi-Attribute Dataset Nikhil Ghanta, Jieqiong Zhao, Calvin Yau, Hanye Xu, Brian Olsen, Dr. David Ebert MetricsVis: Interactive Visual System of Customized Metrics on Evaluating Multi-Attribute Dataset Nikhil Ghanta, Jieqiong Zhao, Calvin Yau, Hanye Xu, Brian Olsen, Dr. David Ebert Goal To provide user with an ability to access Vineyard data with an ease in accessibility of the webpage that responds to their devices. Bootstrap : Famous Twitter framework widely used to design “responsive” web contents. Responsiveness: Proper scaling of a webpage, when a change in screen size is found without any loss of web content. It breaks a webpage in columns up to a max of 12 grids. Provides many inbuilt classes to generate responsive design. Design “Responsive” mobile first style login page, that responds to various screen sizes (portrait/landscape) mode. - We can notice the change in page content as the screen size goes down from 892 x 858 to 422 x Thus in similar fashion, Bootstrap along with JavaScript and CSS helps to scale down a content to various screen sizes while maintaining the design integrity. Technology Used HTML/CSS: It is used to design the basic structure of a webpage “static” content. Static content: Refers to a webpage that do not respond to change of screen size. Issues: Improper display on content. User loss of interest to browse certain websites. JavaScript : Web language that controls the behavior of web pages via DOM model. DOM stands for “Document Object Model”. Usage: We can add scripts to a webpage designed to perform specific task, eg: Obtain screen size automatically, and use it to scale an image on the page. Future Goal: Design “Responsive” landing page with data access to users through visual models, obtained remotely from source. Motivating factor for the project was to design a login page, that follows mobile first responsiveness pattern. This means a webpage, that is capable of aligning itself from “small screen” to “large screen” according to changes in screen sizes, as the size gets detected by a script running in the background. To develop the Weather Data Scraper we have used C# because the whole ‘VinSense’ software is being developed in C#. Implementation of web and networking tools in C# was easier due to readily available compact libraries. Acknowledgments Special thanks to the VACCINE Lab at Purdue, especially to Dr. David Ebert for his insightful guidance throughout the project and our Graduate mentors Brian Olsen and Hanye Xu for their technical help. Goal To design a Web Bot that will scrape the weather data from NOAA Weather website from available ftp public web url. Weather Data Retrieval Area of Interest Here we lookup the which weather station will be used to retrieve weather data Find WBAN & USAF Number Here we find the corresponding WBAN and USAF number that is assigned to a specific weather station by NOAA(National Oceanic and Atmospheric Administration). Retrieve the Weather Data Now we use an ftp web url available for public access to retrieve the weather data recorded by a weather station for a particular year. Example URL: ftp://ftp.ncdc.noaa.gov/pub/data/noaa/2015/ gz Parse the Raw Weather Data After retrieving the weather data, we will parse the raw weather data based on the format specified on NOAA website into.csv file Implementation NOAA Weather Data Scraper Future Work This data scraper is still in its initial stage. It can further improved/modified to scrape weather data from other web APIs such as AccuWeather, weather.com or even screen scrape from other weather websites. Motivation We have designed this weather data scraper to automate the scraping of weather data to perform historical data analysis for a specific region e.g. NAPA Valley, CA. GOAL The focus of this project was to provide a scientific visual analysis of various crime data for each officer for a certain time period in form of charts. This will be used by Police officers to evaluate their arrest numbers. The chart has functions which enable easier comparison between officers and crime, and individual charts. IMPLEMENTATION D3JS library is used for implantation of data visualization. D3JS is a JavaScript library which has functions to visualize data in different ways like bar charts, pie charts, graphs, etc. Data used is a small filtered sample from the entire database. It is a table of rows with the different cases an officer has dealt with, and the columns are the two officers selected to be compared. Since this is a comparison bar chart it would essentially be comparing the kind of cases each officer is dealing with. RESULT Any two officers can be selected for comparison There is a drop down menu/text box to enter the officer ID’s we want to compare. The data filtered will change depending on the officer ID’s selected. Interactive Bar Graph Visualization for Officer Performance Data The Bar chart above shows the comparison between each officer. The blue bar represents one officer and orange bar represents the other officer being compared with. Each column represents a certain crime and the bars give us the officers performance. FUTURE GOALS Include sorting transitions to view the best performances of both the officers Integrate this in the main website USE OF PREVIOUS KNOWLEDGE AND SKILLS The requirements for working on this project are ample knowledge in the topics of JavaScript, HTML, CSS and a comfortable grip over the use of d3 libraries. To meet these requirements there were two projects –calculator and line graph with variable data samples.