Histogram Design VU Visualisation and Visual Data Analysis Milestone 4 Pavares “Paul” Charoenchaipiyakul Milán Kolki Lachezar Valkov Charoenchaipiyakul, Kolki, Valkov – Visualisation and Visual Data Analysis WS17 Histogram Design
Outline Project Description Persona User Tasks Prototypes Final Version Live Demo Improvements Implementation Discussion Charoenchaipiyakul, Kolki, Valkov – Visualisation and Visual Data Analysis WS17 Histogram Design
Project Description • Histogram Characteristics • Create a Visualisation Tool • Automatically configurable • Dynamically Alter Parameters Charoenchaipiyakul, Kolki, Valkov – Visualisation and Visual Data Analysis WS17 Histogram Design
Person a Name: Melanie Kastner Residence: Vienna Age: 29 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) http://www.gettyimages.at/detail/foto/businesswoman-participates-in-video-conference-lizenzfreies-bild/830862956 [Accessed: 13.12.2017] Charoenchaipiyakul, Kolki, Valkov – Visualisation and Visual Data Analysis WS17 Histogram Design
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 Charoenchaipiyakul, Kolki, Valkov – Visualisation and Visual Data Analysis WS17 Histogram Design
Lo-Fi Prototype 1/3 Charoenchaipiyakul, Kolki, Valkov – Visualisation and Visual Data Analysis WS17 Histogram Design
Lo-Fi Prototype 2/3 Charoenchaipiyakul, Kolki, Valkov – Visualisation and Visual Data Analysis WS17 Histogram Design
Lo-Fi Prototype 3/3 Charoenchaipiyakul, Kolki, Valkov – Visualisation and Visual Data Analysis WS17 Histogram Design
Hi-Fi Prototype • Motivation: Windows ClearType Tuner https://www.tenforums.com/attachments/tutorials/127346d1490910337-turn-off-cleartype-windows-10-a-clearttype-8.png Charoenchaipiyakul, Kolki, Valkov – Visualisation and Visual Data Analysis WS17 Histogram Design
Hi-Fi Prototype Charoenchaipiyakul, Kolki, Valkov – Visualisation and Visual Data Analysis WS17 Histogram Design
Histogram Type Charoenchaipiyakul, Kolki, Valkov – Visualisation and Visual Data Analysis WS17 Histogram Design
Histogram Bin Range Charoenchaipiyakul, Kolki, Valkov – Visualisation and Visual Data Analysis WS17 Histogram Design
Histogram Aspect Ratio Charoenchaipiyakul, Kolki, Valkov – Visualisation and Visual Data Analysis WS17 Histogram Design
Histogram Bar Width Charoenchaipiyakul, Kolki, Valkov – Visualisation and Visual Data Analysis WS17 Histogram Design
Control Panel Charoenchaipiyakul, Kolki, Valkov – Visualisation and Visual Data Analysis WS17 Histogram Design
Line Graph Charoenchaipiyakul, Kolki, Valkov – Visualisation and Visual Data Analysis WS17 Histogram Design
Where to go from here? Charoenchaipiyakul, Kolki, Valkov – Visualisation and Visual Data Analysis WS17 Histogram Design
Where to go from here? - Sea of histograms Charoenchaipiyakul, Kolki, Valkov – Visualisation and Visual Data Analysis WS17 Histogram Design Source: http://patricksmithphotography.com/blog/wp-content/uploads/2015/05/110129-7226-EndlessSea6.jpg
Final Version - Live Demo http://hist-design.herokuapp.com/ Skip Screenshots Charoenchaipiyakul, Kolki, Valkov – Visualisation and Visual Data Analysis WS17 Histogram Design
Final Version Charoenchaipiyakul, Kolki, Valkov – Visualisation and Visual Data Analysis WS17 Histogram Design
Final Version Charoenchaipiyakul, Kolki, Valkov – Visualisation and Visual Data Analysis WS17 Histogram Design
Final Version Charoenchaipiyakul, Kolki, Valkov – Visualisation and Visual Data Analysis WS17 Histogram Design
Final Version Charoenchaipiyakul, Kolki, Valkov – Visualisation and Visual Data Analysis WS17 Histogram Design
Final Version - Alternate Charoenchaipiyakul, Kolki, Valkov – Visualisation and Visual Data Analysis WS17 Histogram Design
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 Charoenchaipiyakul, Kolki, Valkov – Visualisation and Visual Data Analysis WS17 Histogram Design
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) Charoenchaipiyakul, Kolki, Valkov – Visualisation and Visual Data Analysis WS17 Histogram Design
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 Charoenchaipiyakul, Kolki, Valkov – Visualisation and Visual Data Analysis WS17 Histogram Design
References ● https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Histogram_of_arrivals_per_minute.svg/1200px- Histogram_of_arrivals_per_minute.svg.png ● https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Black_cherry_tree_histogram.svg/220px- Black_cherry_tree_histogram.svg.png ● https://www.mathworks.com/help/examples/matlab/win64/PlotMultipleHistogramsExample_01.png ● http://www.whatissixsigma.net/wp-content/uploads/2014/01/Histogram-Figure-2.png ● https://www.originlab.com/doc/en/UserGuide/images/Histogram_Graph/Histogram_Graph3.png Charoenchaipiyakul, Kolki, Valkov – Visualisation and Visual Data Analysis WS17 Histogram Design
Q & A Discussion Charoenchaipiyakul, Kolki, Valkov – Visualisation and Visual Data Analysis WS17 Histogram Design
Q & A Thank you for your attention! Charoenchaipiyakul, Kolki, Valkov – Visualisation and Visual Data Analysis WS17 Histogram Design
Recommend
More recommend
