see the attached

see the attached
HCDE 530: Information Visualization Lesson 4 & 5 Design Assignment Assignment 4.1 – Advanced Information Representation Assignment 4.2 – Information Visualization for Hierarchical Data Representation Assignment 4.3 – Information Architecture Practice Even in the single ppt slide, take consider “Information Visualization” to present your idea 1 Find either a network diagram or a hierarchy diagram and either paste it as a screenshot or as a photograph. Explain what the diagram is for and whether you think it achieves its purpose or not. Limit 1 slide 2 This is a radial visual hierarchy diagram visualizing network traffic. It uses 4 concentric rings, each one representing an attribute of the transferred packets, such as secure mail. Users interpreting a left- to-right layout may assign more importance to an item on one side due to the cultural reading direction. The rings in this example show the following information, from the innermost to the outermost ring: Source IP address Destination IP Source port number Destination port number. The share in total traffic determines the size of a single circle segment. Entries with with the same value (e.g., the same IP, or the same port number) always use the same color. Popular port numbers appear in reserved, unique colors (e.g. green is always used for port 80 – HTTP), which are not used again to display something else. Traffic over secured channels is shown in brighter colors, whereas traffic over unsecured channels appears in darker color. Circle segments are sorted on a ring, and grouped by the attributes on the inner rings. Evaluation: I think the outer rings give a sense of the more area for the same proportion of data, e.g. a third of the outer ring looks much bigger than a third of the inner ring, so this distorts the overall sense of how significant something in the outer vs inner ring is. I don’t know enough about the topic in context to know if this matters in this case but is some cases it may help emphasis a point, like compounding of downstream from an initial event, so it could be a useful technique. In this case thought I think 4 rectangles divided into color coded sections stacked on top of each other would have worked just as well. 3 Assignment 4.1 The hierarchical diagram visualizes the ancestral classifications of various amniotes. Yes, I believe the chart achieves its intended purpose of categorizing animals by common physical characteristics. The species all stem from a shared trait (amniote) and as you move from left to right, the classifications become increasingly more specific. The viewer can easily identify which groups share ancestral commonalities, based on the bracket they belong to. To improve the visualization, I might reconfigure the spacing between the species’ images for greater separation and clarity. Additionally, I would rotate the category titles so that all can be read left to right. Select one of the folders on your computer which contains at least three levels Draw a tree map representation of its contents (1 ppt slide) Now, using the same information, draw a hyperbolic browser representation. Comment on benefits it may or may not offer when seeking an item which is a leaf node. (1 ppt slide) 5 I choose the PICTURE Folder in my computer which contain more than three levels. I have folder for Local tour pictures, International tour pictures and USA tour pictures. Inside the local tour picture folder, I have lot more folders containing different city and area from my back home. In international tour folder I have different folder for different countries where I have visited in my entire life. And in USA folder I have different folder for different states and inside there I have different city folder with pictures. I found out hyperbolic browser representation is much easier while trying to seek any item which is a leaf node. Because it’s easy to follow the path where it came from. For example if I want to find my Bangkok Tour picture from my Picture folder I can easily locate it by searching it on International tour folder then Thailand tour folder. From my point of view the hyperbolic browser representation is much more easier compare to tree map when you are trying to find an item’s location. 7 Representations of my web browser bookmark folders: Treemap PROS – Easy to dissect the part-to-whole relationships between several hierarchical categories. CONS – Difficult to detect relational differences between each group. Further, the data is not aligned to a common baseline or axis. Hyperbolic Browser Representation PROS – Viewers can trace back each step of the hierarchy. Color clearly distinguishes which level an item belongs to. CONS – No clear point of focus. Difficult to assess the relationship between nested items. View Larger Images Assignment 4.3 Information Architecture Practice Select any website or app which consists of multiple pages (not too complicate one) Analyze information architecture of the site or app, and draw IA diagram including structure and labels If possible, indicate primary contents and links to other contents Discuss distinctive features, pros/cons, chance of improvement, etc. of the IA 9 Assignment 4.3: Information Architecture Practice I chose to analyze the architecture of the FordPass app on my phone and for the most part the layout is fairly simple. Once you log in to your account you are automatically taken to the Home tab and there are 4 other tabs to choose from: vehicle, map, account, and more. For the most part each tab is self contained, but the linked content is indicated by the dotted lines. I think the app does a good job of always having a way to get to roadside assistance because this is a very important feature to have right away in case you are in an accident or your car breaks down. I think the app could improve by keeping all of the links within the app. Some of the content within the tabs would take you to a Ford website and I think most of the information could be given internally. It can be frustrating to have to switch back and forth from the internet browser to the app of have to navigate back if you accidentally pressed the button. 10