Histogram Design VU Visualisation and Visual Data Analysis - - PowerPoint PPT Presentation

▶
histogram design
SMART_READER_LITE
LIVE PREVIEW

Histogram Design VU Visualisation and Visual Data Analysis - - PowerPoint PPT Presentation

Feb 03, 2023 436 likes •751 views

Histogram Design VU Visualisation and Visual Data Analysis Milestone 4 Pavares Paul Charoenchaipiyakul Miln Kolki Lachezar Valkov Charoenchaipiyakul, Kolki, Valkov Visualisation and Visual Data Analysis WS17 Histogram Design

slide-1
SLIDE 1

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

slide-2
SLIDE 2

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

slide-3
SLIDE 3

Charoenchaipiyakul, Kolki, Valkov – Visualisation and Visual Data Analysis WS17 Histogram Design

Project Description

  • Histogram Characteristics
  • Create a Visualisation Tool
  • Automatically configurable
  • Dynamically Alter Parameters
slide-4
SLIDE 4

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.

Image Source: Steve Debenport (gettyimages) http://www.gettyimages.at/detail/foto/businesswoman-participates-in-video-conference-lizenzfreies-bild/830862956 [Accessed: 13.12.2017]

  • Goal: Find the most impactful histogram representation to use in an article about youth smoking
slide-5
SLIDE 5

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

slide-6
SLIDE 6

Charoenchaipiyakul, Kolki, Valkov – Visualisation and Visual Data Analysis WS17 Histogram Design

Lo-Fi Prototype 1/3

slide-7
SLIDE 7

Charoenchaipiyakul, Kolki, Valkov – Visualisation and Visual Data Analysis WS17 Histogram Design

Lo-Fi Prototype 2/3

slide-8
SLIDE 8

Charoenchaipiyakul, Kolki, Valkov – Visualisation and Visual Data Analysis WS17 Histogram Design

Lo-Fi Prototype 3/3

slide-9
SLIDE 9

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

slide-10
SLIDE 10

Charoenchaipiyakul, Kolki, Valkov – Visualisation and Visual Data Analysis WS17 Histogram Design

Hi-Fi Prototype

slide-11
SLIDE 11

Charoenchaipiyakul, Kolki, Valkov – Visualisation and Visual Data Analysis WS17 Histogram Design

Histogram Type

slide-12
SLIDE 12

Charoenchaipiyakul, Kolki, Valkov – Visualisation and Visual Data Analysis WS17 Histogram Design

Histogram Bin Range

slide-13
SLIDE 13

Charoenchaipiyakul, Kolki, Valkov – Visualisation and Visual Data Analysis WS17 Histogram Design

Histogram Aspect Ratio

slide-14
SLIDE 14

Charoenchaipiyakul, Kolki, Valkov – Visualisation and Visual Data Analysis WS17 Histogram Design

Histogram Bar Width

slide-15
SLIDE 15

Charoenchaipiyakul, Kolki, Valkov – Visualisation and Visual Data Analysis WS17 Histogram Design

Control Panel

slide-16
SLIDE 16

Charoenchaipiyakul, Kolki, Valkov – Visualisation and Visual Data Analysis WS17 Histogram Design

Line Graph

slide-17
SLIDE 17

Charoenchaipiyakul, Kolki, Valkov – Visualisation and Visual Data Analysis WS17 Histogram Design

Where to go from here?

slide-18
SLIDE 18

Charoenchaipiyakul, Kolki, Valkov – Visualisation and Visual Data Analysis WS17 Histogram Design

Where to go from here? - Sea of histograms

Source: http://patricksmithphotography.com/blog/wp-content/uploads/2015/05/110129-7226-EndlessSea6.jpg

slide-19
SLIDE 19

Charoenchaipiyakul, Kolki, Valkov – Visualisation and Visual Data Analysis WS17 Histogram Design

Final Version - Live Demo

http://hist-design.herokuapp.com/ Skip Screenshots

slide-20
SLIDE 20

Charoenchaipiyakul, Kolki, Valkov – Visualisation and Visual Data Analysis WS17 Histogram Design

Final Version

slide-21
SLIDE 21

Charoenchaipiyakul, Kolki, Valkov – Visualisation and Visual Data Analysis WS17 Histogram Design

Final Version

slide-22
SLIDE 22

Charoenchaipiyakul, Kolki, Valkov – Visualisation and Visual Data Analysis WS17 Histogram Design

Final Version

slide-23
SLIDE 23

Charoenchaipiyakul, Kolki, Valkov – Visualisation and Visual Data Analysis WS17 Histogram Design

Final Version

slide-24
SLIDE 24

Charoenchaipiyakul, Kolki, Valkov – Visualisation and Visual Data Analysis WS17 Histogram Design

Final Version - Alternate

slide-25
SLIDE 25

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
slide-26
SLIDE 26

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)
slide-27
SLIDE 27

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
slide-28
SLIDE 28

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
slide-29
SLIDE 29

Charoenchaipiyakul, Kolki, Valkov – Visualisation and Visual Data Analysis WS17 Histogram Design

Q & A

Discussion

slide-30
SLIDE 30

Charoenchaipiyakul, Kolki, Valkov – Visualisation and Visual Data Analysis WS17 Histogram Design

Q & A

Thank you for your attention!