Effects of Visualization and Interface Design on User Comprehensibility of Composite DataAsheem Chhetri, Apoorv Wairagade, Mahesh Gorantla, 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 604.- 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.

HTML/CSS

Java Script

Bootstrap

Technology UsedHTML/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.

AcknowledgmentsSpecial 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 NumberHere 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 DataNow we use an ftp web url available for public accessto retrieve the weather data recorded by a weather station for a particular year.Example URL: ftp://ftp.ncdc.noaa.gov/pub/data/noaa/2015/724955-93227-2015.gz

Parse the Raw Weather DataAfter 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.

GOALThe focus of this project is to develop a visual analytics tool to facilitate law enforcement agencies to evaluate performance of officers and understand officer activity patterns and performance trends. In order to show the overview and details for the 27 critical crime categories for each officer, a interactive stacked bar visualization was applied. The chart enable easier comparison between officers and crimes.

This graph uses coloured bars to show the number of crimes solved by each officer represented by each column of the stacked bar chart. Columns can be added or removed. Tooltip shows details.

IMPLEMENTATION• D3.js library is used for implementation of a web application . D3.jS is a JavaScript library

which has functions to visualize data in multiple ways like bar charts, pie charts, graphs, etc.

• Data used is a small filtered sample from the entire database. It is an array of objects with attributes such as officer ID, and number of arrests for 27 crimes.

RESULT• Multiple IDs can be selected for comparison• When select and clicked, the chosen crime block moves to the bottom for easier

comparison.• Tooltips on blocks to show the respective data• Raw table or stacked bar chart option can be selected for individual officer

Interactive Stacked Bar Visualization for Officer Performance Data

This graph open when clicked on a particular ID in the multiple chart. Each column represents a certain crime.

FUTURE GOALS• Include transitions to go from back and forth from Multiple to individual• Integrate this in the main website

1.1k

1.0k

0.9k

0.8k

0.7k

0.6k

0.5k

0.4k

0.3k

0.2k

0.1k

600

500

400

300

200

100

0

0.0

1.2k

600

400

200