Design Workflow

Project in different classes

Design Workflow¶

Learning: The target problem that I come up with is how do people check the weather these days. With the development of science and technology, we have various ways to check on the weather, such as websites, apps. However, people in my grandparents' age, for example, might still keep the habit of watching the weather forecast in the newspaper or on TV. If we can figure out how do people check on the weather, we can redesign the interface for the majority group of people. For example, if elderly people check on weather through TV a lot, we might avoid the fancy interaction or increase the visibility of the words. If young people check on weather through app, we might add social aspect, and increase the interactions.
Winnowing: I took the data from 538. I like this dataset because it contains detailed features about people, so I can group them easily. It fits with my target problem, since I want to figure out what group people check weather in specific way more. Also, it is records of survey, which can improve the reliability of the source. However, it might have bias because it is not the latest version, the last update is in 2014, which might have difference because the world is changing.
Discover:
1. Task1: Available to check the detail information in each datapoint.
  1. Why: it will allow users to observe the data with more related information, either the data of participants or their answers, which will increase the reliability of the visualization and easier for users to see the detailed result for each participant.
  2. How: By using Altair tooltip, add more aspects to it. When users move their cursor, they can locate each participant and see a detailed record from the data.
  3. What: Data can learn from one attribute, count the number and represent the data, from filtering the data.
  4. Where: it will operate relatively, by the other points defined. The X and Y are different category, with color and size representing different legend and amount.
  5. When: The task will perform when users hover their cursor to the point, it will show the record details.
  6. Who: The designers in each different platform can see what users or potential users will use their platform, so they can adjust the current design to fit more users. The normal audience can see the gap between different groups of people in technology usage.
2. Task2: Clear see the differences or the relations, filtering on their purpose.
  1. Why: It will allow the audience to explore their own result, observe the different results by filtering different categories so that users can understand and gather the various result from the charts, rather than the descriptions.
  2. How: By using Altair interact selection method, I will create interactive graphs, which are connected, filtering by clicking and colors.
  3. What: Data will learn from multiple attributes, both show the number of records and the relations in different categories.
  4. Where: It will operate relatively, the range will from 0 to the maximum value. Because of the interaction, the users can see the graph changes based on filtering different data.
  5. When: When users click on a specific row or point, the interaction will present on the other chart. They can observe both numbers and relations at the same time.
  6. Who: The audience can explore their own result from the data that they filtered by themselves. The designer of the app, they have a more clear mind about what certain group of people might use their platform.
Design: In this prototype, the user can filter the data by selecting a different category at the bottom of the chart. It will allow them to explore the data in various options. Also, by adding the tooltip, the user can easily access each record detail when they choose each data point. To clearly see the differences purpose, I used a different colors to represent the categories, and I believe the audience will see the relations in colors and columns height. However, after some iterations, I realized that only using a bar chart might not be able to represent as much information as I want. Therefore, I choose to use a bubble chart, since it can show the amount, relations by color and size. Also, I add the filtering column at the bottom of the chart, so that the audiences are able to see the differences clearly.

Implement

In [ ]:

import pandas as pd
data = pd.read_csv('weather-check.csv')

In [46]:

import altair as alt
Region = data['US Region'].unique()

dropdown = alt.binding_select(options=Region, name="Select a Region")

selection = alt.selection(type="single", fields=['US Region'], bind=dropdown)

alt.Chart(data).mark_point().encode(x='Age',
                                   y='How do you typically check the weather?',
                                    size = alt.Size('count()'),
                                 tooltip=['Age','US Region','What is your gender?','count()'],
                                 color = 'Do you typically check a daily weather report?',
                                 opacity=alt.condition(selection, alt.value(1), alt.value(0))).add_selection(selection).properties(width=500, height=500)

Out[46]:

For the implementation, I used Altair to visualize the data. I chose 2 columns as x and y-axis, different colors to represent whether they check daily weather, size as the amount of record. Also at the bottom, the audience can filter the region by themselves, and have access to each point detail in the chart, which means they can figure out the result without a large description.

Deploy: For task 1, I use the tooltip to show each record age, region, gender, and amount, which allows people to check the data detail without reading a huge description. For task 2, I use the different colors, sizes, filtering to show the difference or relations in the bubble chart in their own interest.
Iterate: For the bubble chart, I realize that it might not easy to read when people peek at the chart, especially since the circle border is too thin to observe. Therefore, I might use the combination of charts, add an interaction for users to play and observe easily.

Redesign:

Design: In the iterate prototype, I was thinking about how to present the relations and information more but easy to access. Firstly, I thought about using 2 charts to influence each other, so I chose the bubble chart and bar chart, which represent relations and quantities. However, I realized that the visualization has the same problem, which hard to observe, especially for the circles. Therefore, in my final interaction, I add a color scheme only in the bar chart and using the size feature only in the bubble chart. Without any redundant features, I believe the new visualization can be accessed easier than before.
Implement: I used Altair to visualize the data. I created the selection based on different ages and can show the update relation on the right. Because I have used too many categories, I did't use the tooltip this time to make sure the audience can easily understand this visualization, especially when it has a click feature already.
Deploy: For task 1, I use a different color, size, chart style to represent the data as clear as possible. For task 2, I use 2 charts combine to show the relations, so that people can observe the relations easily when they click on the bar chart. The audience can filter data by clicking on the bar chart.

In [64]:

selection = alt.selection(type="multi", fields=['How do you typically check the weather?'])

base = alt.Chart(data).properties(width=250, height=250)

hist = base.mark_bar().encode(
    x=alt.X('Age'),
    y='count()',
    color=alt.condition(selection, 'How do you typically check the weather?', alt.value('lightgray'))
).add_selection(selection)
scat = base.mark_circle(color="darkgray").encode(
    x=alt.X("How much total combined money did all members of your HOUSEHOLD earn last year?:O", 
            sort=["-", 'Prefer not to answer', '$0 to $9,999','$10,000 to $24,999','$25,000 to $49,999','$50,000 to $74,999',
                  '$75,000 to $99,999','$100,000 to $124,999','$125,000 to $149,999','$150,000 to $174,999','$175,000 to $199,999',
                  '$200,000 and up']),
    y='US Region',
    size='count()',
).transform_filter(selection)

hist | scat

Out[64]:

Reflect, Pt 1: In the visualization, we can observe that people who getting older have more possibility to check on the weather. Young people often check on the weather at their default weather app. Elderly people more check on the weather through local TV news or newspaper, but many of them are using weather app, internet search as well, which means the weather information TV news could more focus on the elderly, website or app can push the old age model of their existing app for absorbing more uses. For the region, people who live in East north-central, pacific, South Atlantic, the middle class are the basic user group based on the data. So the weather app or website have ability to push ads for the corresponding market and group without obtaining a user ID or other authentication, based on the result of this data. Also, since only a few young people check the weather on newspaper and radio, those platforms can change their goals to serve more elderly people, by adding font size, slowing down the voice for example.
Reflect, Pt 2: From the visualization, I used Altair to represent the data, connected the bar chart, and bubble chart with the filter. On the bar chart, the audience can check the amount of record in different age and source, the relations will be represented directly on the bubble chart. The audience can easily access the amount of record from the bar height, color size, and bubble size, access the relations based on bubbles location, filter data by clicking on the color. Then, the filtered data will be shown on the bubble chart, with relations, amount of record infos.