Histogram Design. VU Visualisation and Visual Data Analysis Milestone 4 Pavares Paul Charoenchaipiyakul Milán Kolki Lachezar Valkov

Size: px

Start display at page:

Download "Histogram Design. VU Visualisation and Visual Data Analysis Milestone 4 Pavares Paul Charoenchaipiyakul Milán Kolki Lachezar Valkov"

Samson Hensley
5 years ago
Views:

1 VU Visualisation and Visual Data Analysis Milestone 4 Pavares Paul Charoenchaipiyakul Milán Kolki Lachezar Valkov

2 Outline Project Description Persona User Tasks Prototypes Final Version Live Demo Improvements Implementation Discussion

3 Project Description Histogram Characteristics Create a Visualisation Tool Automatically configurable Dynamically Alter Parameters

4 Person a Name: Melanie Kastner Age: 29 Residence: Vienna Profession: Journalist Motto: If all is under control, you're not going fast enough. Experiences: Lives with her fiancé / Is rather overloaded with tasks at work / Has little to no free time left to spare / Work is her highest priority / Desires to accomplish work goals faster, in order to be able to better manage the time spent with family Scenario: Uses the Histogram Exploration Tool to gain deeper insight into collected data, be able to process it with greater efficiency and ultimately finish her articles faster. Goal: Find the most impactful histogram representation to use in an article about youth smoking Image Source: Steve Debenport (gettyimages) [Accessed: ]

5 User Task Goal: Find the most impactful histogram representation to use in an article about youth smoking 1. Upload a dataset about the age of smokers 2. She intends to use the Bar Graph representation, so she ticks that checkbox 3. Since precision is of importance, she reduces the Bin Range to 1 item per bin 4. She adjusts the Aspect Ratio - compromise between the news site format and the data 5. To highlight the differences more easily, she opts for the largest bar width possible 6. She evaluates the resulting Histogram, more adjustments can be made if necessary

6 Lo-Fi Prototype 1/3

7 Lo-Fi Prototype 2/3

8 Lo-Fi Prototype 3/3

Hi-Fi Prototype Motivation: Windows ClearType Tuner https://www.tenforums.

9 Hi-Fi Prototype Motivation: Windows ClearType Tuner

10 Hi-Fi Prototype

11 Histogram Type

12 Histogram Bin Range

13 Histogram Aspect Ratio

14 Histogram Bar Width

15 Control Panel

16 Line Graph

17 Where to go from here?

18 Where to go from here? - Sea of histograms Source:

19 Final Version - Live Demo Skip Screenshots

20 Final Version

21 Final Version

22 Final Version

23 Final Version

24 Final Version - Alternate

25 Implementation Language: Node.js with EMCA Script 2015 (ES6) Main Development Tools: d3, d3-node, Express, jquery, csv-parse, handlebars, formidable HTML Framework: Bootstrap v4

26 Implementation - Server Side Routing Path handling using Express GET and POST handling for data upload and parameter sending Static SVG Rendering Using d3-node Similar to d3.js, but without DOM manipulation Normally faster than the client-side d3.js (due to pre-calculation)

27 Implementation - Client Side (Custom Mode) Dynamic Rendering Using client-side d3.js Enable dynamic change from HTML form without GET/POST On the fly rendering Webpage-JavaScript Linking Link SVG rendering to DOM change e.g. value of the bin width slide Cooperate with the dynamic rendering

28 References Histogram_of_arrivals_per_minute.svg.png Black_cherry_tree_histogram.svg.png

29 Q & A Discussion

30 Q & A Thank you for your attention!

A Simple Course Management Website

A Simple Course Management Website A Senior Project Presented to The Faculty of the Computer Engineering Department California Polytechnic State University, San Luis Obispo In Partial Fulfillment Of the