{"id":12086,"date":"2018-12-14T23:19:04","date_gmt":"2018-12-15T04:19:04","guid":{"rendered":"http:\/\/studentwork.prattsi.org\/infovis\/?p=12086"},"modified":"2019-01-10T21:29:51","modified_gmt":"2019-01-11T02:29:51","slug":"fast-food-vs-vegetarian-vegan-food-options-in-the-us","status":"publish","type":"post","link":"https:\/\/studentwork.prattsi.org\/infovis\/projects\/fast-food-vs-vegetarian-vegan-food-options-in-the-us\/","title":{"rendered":"Fast-Food vs. Vegetarian + Vegan Food Options In the US"},"content":{"rendered":"

by JiSun Hong & Christine (Ye Eun) Sun<\/p>\n

\"\"<\/p>\n

Introduction<\/b><\/h2>\n

Our objective was to show the number and location of fast food restaurants in contrast to fully vegan or vegetarian restaurants in hopes to learn about the relationship between the regions that have more vegan or vegetarian restaurants available. We wanted to visualize it to see if there are any sort of obvious patterns or trends we can see and hopefully in the future advise users of what regions are more vegan or vegetarian friendly. We want this exercise to one day become research to support and advise cities to be more vegetarian and vegan friendly. Ultimately we want this map to be a useful tool, like a vegetarian and vegan rating and food database, for people that want to dine at fully vegetarian or vegan food places and provide information for vegans and vegetarians of informations that exceed in depth of information provided in all-food applications like Yelp. By focusing on just the vegan and vegetarian food availabilities gives our tool the advantage to be more specific in catering to the needs of the niche users of vegan and vegetarians. <\/span><\/p>\n

With our map, we conducted user tests to observe how users interacted with our data visualization and observed what conclusions were drawn from the number of locations of fast food joints vs. all-vegetarian or vegan restaurant in the United States. Our purpose was to see how users feel and think about the type and amount of information provided and visualised and learn how users interacted with the visualization. With the feedback, our goal was to iterate and create a map that is useful and user-friendly.<\/span><\/p>\n

Materials<\/b><\/h2>\n
    \n
  1. \u00a0\u00a0\u00a0\u00a0Carto Software \u2013 A platform to build location and map based visualizations<\/span><\/li>\n
  2. \u00a0\u00a0\u00a0\u00a0Kaggle \u2013 Google owned database with datasets<\/span><\/li>\n
  3. \u00a0\u00a0\u00a0\u00a0Excel Spreadsheet \u2013 A spreadsheet that helps look and clean datasets<\/span><\/li>\n
  4. \u00a0\u00a0\u00a0\u00a0Voice Recorder \u2013 A tool to record the surrounding sound<\/span><\/li>\n
  5. \u00a0\u00a0\u00a0\u00a0Word Document \u2013 A tool to take notes and write<\/span><\/li>\n
  6. \u00a0\u00a0\u00a0\u00a0Adobe Photoshop \u2013 An Adobe software for image editing<\/span><\/li>\n
  7. \u00a0\u00a0\u00a0\u00a0Adobe Illustrator \u2013 An Adobe software for editing vector graphics<\/span><\/li>\n<\/ol>\n

    Process<\/b><\/h2>\n

    1. Searching for dataset
    \n<\/b>For our final project, we wanted to research data related to restaurants. We found interest in what information is accessible by users today and wanted to explore what else we can provide to better experiences for users. We started by searching for food related datasets. It ranged from health inspections, food choices, yelp ratings and many more. With so many different options, we found a dataset that had a list of fast-food restaurants from all over the United States. In contrast to the fast-food dataset, we wanted to compare it with vegetarian and vegan restaurants from all over United States. We wanted to map the two sets of data to see what we can learn from the number of restaurants, locations, and anything else that we might not be aware of.<\/span><\/h3>\n

    2. Cleaning up the dataset
    \n<\/strong>The fast-food dataset was very organized and ready to use. But vegetarian and vegan restaurants dataset had columns with unrelated information or empty fields. We opened the data in Microsoft Excel to delete information that was not relevant to our use.<\/span><\/p>\n

    3. Visualizing the map
    \n<\/b>We used Carto to visualize our data. We started by adding fast-food restaurants dataset to Carto. A lot of dots appeared on the map. We explored different style for the dots to figure out what design would allow for a quick understanding of information. Once the initial design was set, we added another layer of vegetarian and vegan restaurant dataset. There were no issues in the process of inputting the dataset. We included click and hover pop-up options to show additional information on each dot. The pop-up was added for the user to be able to see information about each restaurant they decide to explore. Our challenge was in deciding what information is most important and relevant to show for the map to be a useful tool. Once we agreed what information to display, our map was complete for user testing.<\/span><\/p>\n

    4. Conducting user research
    \n<\/b>We conducted user testings with methods of observation, think-alouds, and interviews. Through them, we wanted to learn <\/span>how users interacted with our data visualization and observe what conclusions could be drawn from the number of locations of fast food joints vs. all-vegetarian or vegan restaurant. Our purpose was to see how users feel and think about the type and amount of information provided and visualized. We<\/span> came up with an outline with intended users, methods, objectives, tasks, and questions that went along with the tasks. We conducted user tests with 6 participants.<\/span><\/p>\n

    Intended Audience
    \n<\/strong>People who are vegetarian or vegan or people that know or has any form of connection with vegetarians or vegans.<\/span><\/p>\n

    Methods<\/strong>
    \n<\/span>– observation
    \n<\/span>– think-aloud
    \n<\/span>– interviews<\/span><\/p>\n

    Objective
    \n<\/strong>We are conducting user tests to observe how users interact with our data visualization map and observe what conclusions are drawn from the number of locations of fast food joints vs. all-vegetarian or vegan restaurant in the US. Our purpose is to see how users feel and think about how the information is visualized and to learn what conclusions they draw from our data.<\/span><\/p>\n

    Task 1: Take a look at the US map.
    \n<\/strong>1. Can you describe what you are looking at?
    \n<\/span>2. What do you think the colors of the points indicate?
    \n<\/span>3. Hover on a dot and speak out loud what you see or what you expect to see.
    \n<\/span>4. Click on the dot and speak out loud what you see or what you expect to see.
    \n<\/span>5. Upon hovering and clicking on the dots, did they function as you expected? If not, what did you expect that did not happen?
    \n<\/span>6. What are some things you learned from the map?
    \n<\/span>7. What other additional information would you like to see or know?<\/span><\/p>\n

    Task 2: Zoom into NYC.
    \n<\/strong>1. What can you learn from this section of the map (in comparison to the view of the whole map)?
    \n<\/span>2. What are some things you learned from this section of the map?<\/span><\/p>\n

    5. Synthesizing and Iterating with User Feedback
    \n<\/b>We combined all our observations and responses to synthesize our findings. We received a lot of meaningful insights from user testing. By synthesizing our findings, we were able to come up with recommendations for our visualization. We took a screenshot of our Carto map and created our visualization using Adobe Photoshop and Adobe Illustrator to incorporate the recommendations.<\/span><\/p>\n

    User research notes can be found here<\/a>.<\/p>\n

    Design Rationale<\/b><\/h2>\n

    Tool choice:
    \n<\/b>Tools we used to create the visualization were Kaggle and Carto. Kaggle was an easy to search platform of database. The quality of data that was available seemed to be better than many other resources. There was a sense of trust with Kaggle because it is owned by Google.
    \n<\/span>We used Carto to map out data and see it as a whole in the United States but also be able to zoom into regions to get a more detailed view of regions.<\/span><\/p>\n

    Design choice:
    \n<\/b>Red was chosen to indicate fast-food chains because it is commonly used for fast food chains. Green was a good representation for the vegetables. Dots were used in the map because we felt that it was the best indicator to show location clearly on the map even where there was a lot in a region. Initially we made the green dots bigger than the red to let the green show through in the densely populated red areas. We picked the style that was less distracting but still clearly shows it is a map of the United States. <\/span>
    \n<\/span><\/p>\n

    Function choice:
    \n<\/b>Functions we incorporated on the map were hover and click pop-up. We felt that hover was a function to be used for quick glance, quick look, summary for users to see and make the decision to look deeper into the restaurant. Click function was intended for the user to get a thorough amount of information for the user to make a decision if they wanted to visit the restaurant. For a user to commit to going would mean a user would be committing time, money, and stomach so it needed to have helpful amount of information for the user to to know what options are available, how much they would be spending, etc.<\/span><\/p>\n

    User Research method choice:
    \n<\/b>Research Types that were used were observations, think-alouds, and interview. Observation method was used to be able to view how user interacts with the map without much direction, to capture actions that are not mentioned by the user. We wanted the experience to be as pure as possible and capture their own experience to mimic any user that maybe interacting with the visualization on their own.
    \n<\/span>
    \nThink-alouds were conducted to be able to hear the users\u2019 raw thoughts as they experienced and interacted with the map.
    \n<\/span>
    \nLastly, interviews were done to be able to ask specific questions that may not have been covered by the user in interacting with the map, to get critical thoughts from users, to hear more in depth observations, and thoughts of the user. Questions were asked in the interviews to least impact users\u2019 natural interaction and observation. We didn\u2019t want the questions to give away any information in order to learn if the map alone gave enough information. We asked \u201cwhy\u2019s\u201d to limit any assumptions by us but also to get their full thoughts.<\/span><\/p>\n

    Results<\/b><\/h2>\n

    When we created the map, our initial thought was that there were a lot of red dots overpowering the green dots. We could clearly tell that the East Coast had a strong relationship with fast-food joints compared to the middle and West Coast. It was also interesting to see the comparison between the amount of fast-food restaurants and vegetarian and vegan restaurants across the US.\u00a0 The Carto map visualization can be accessed here<\/a>.<\/span><\/p>\n

    \"\"<\/a>

    Figure 1: Map of US with fast-food joints in red, vegetarian and vegan restaurants in green<\/p><\/div>\n

    \"\"<\/a>

    Figure 2: Details on hover<\/p><\/div>\n

    \"\"<\/a>

    Figure 3: Details on click<\/p><\/div>\n

    Findings<\/b><\/h2>\n

    Observations on the map
    \n<\/b>From our user testing, many users were surprised that there weren\u2019t a lot of vegetarian or vegan restaurants around the US when looking at the map as a whole. One user stated, <\/span>\u201cI can see that the east half of the country has significantly higher density veggie restaurants and distribution is homogeneous whereas on the Westside I would say higher density along the coast as opposed to the Midwest.\u201d<\/span><\/i> When we asked our users to zoom into NYC, many thought there would be many more fast-food joints in NYC. Many were also surprised that there were many vegetarian or vegan options in NYC. One user said, <\/span>\u201cThe ratio of green vs red is definitely is much higher in NYC comparing to the rest of the country.\u201d<\/span><\/i> Another user stated, <\/span>\u201cDefinitely higher proportion of the green dots in the city, main in midtown, Lower East Side, East Village, Downtown and some Upper East Side, Upper West Side. Largely absent in Harlem and Bronx.\u201d<\/span><\/i><\/p>\n

    User Research on Visualization
    \n<\/b>Upon user research, we received helpful feedback on our visualization. The following are feedbacks captured from the user testing:<\/span><\/p>\n

      \n
    • Having no visible title, all users were unsure about what the map represented<\/span><\/li>\n
    • Users had trouble figuring out what the colors and dots indicated on the map<\/span><\/li>\n
    • The difference in the dot sizes caused confusion and users thought there were reasons why the dot sizes were different<\/span><\/li>\n
    • Some users did not realize he\/she can click on the dot as well as hovering<\/span><\/li>\n
    • Users felt that hover should provide less info compared to clicking. Hover should have name, cuisine, and location (city), rating<\/span> of vegetarian or vegan option quality<\/span><\/li>\n
    • Users felt that click should have information about cuisine<\/span>, price range <\/span>($, $$, $$$\u2026)<\/span>, what vegetarian or vegan options they had, rating of vegetarian or vegan option quality, website, and pictures of food.<\/span><\/li>\n
    • Users felt that name and type of cuisine was the most important information<\/span><\/li>\n
    • One user said, <\/span>\u201c<\/span><\/i>I don\u2019t know if it\u2019s a fair comparison between fast-food restaurants and traditional dine in veggie restaurants. But I\u2019d love to see comparison of regular dine ins restaurants vs veggie dine in restaurants.\u201d<\/span><\/i><\/li>\n<\/ul>\n

      Recommendations<\/b><\/h2>\n

      Here is the list of changes of recommendations we gathered from user feedbacks to incorporate in map to make it a more powerful tool and visual. We made some changes on Carto and some on Adobe Photoshop and Adobe Illustrator because of the limitations of Cart:<\/span><\/p>\n

        \n
      • Add a title to the map to clear confusion about what the map represented.<\/span><\/li>\n
      • Add a legend to indicate what the colors red and green mean so that the users did not have to guess what the colors and dots indicated on the map.<\/span><\/li>\n
      • Provide consistent dot size if there are no distinction or meaning behind different sizes.<\/span><\/li>\n
      • Provide direction of what the user can do on the map to clarify function of the map.<\/span><\/li>\n
      • Hover to show name, location, type of cuisine, rating of vegetarian or vegan option quality (rating) to reflect users\u2019 feedback in what they thought were necessary information to get a high level understanding about the restaurant.<\/span><\/li>\n
      • Click to show name, location, type of cuisine, price range ($, $$, $$$…), rating of vegetarian or vegan option quality (rating), website, and pictures of food to reflect what the majority of the users felt they would want to see in order to help them make decisions on where to eat or visit.<\/span><\/li>\n<\/ul>\n
        \"\"

        Figure 4: Updated map of reflecting recommendations gathered from user feedback (on hover)<\/p><\/div>\n

        \"\"

        Figure 5: Updated map of reflecting recommendations gathered from user feedback (on click)<\/p><\/div>\n

        Reflection<\/b><\/h2>\n

        We created our \u201cblue sky\u201d visualizations using Adobe Photoshop and Adobe Illustrator because there were some function limitations on Carto. To our understanding, we were not able to add features like carrot-shaped rating systems, images, and link out to other website on Carto. Upon class and Professor Sula\u2019s feedback, we learned that it is possible to add these functions by hard coding in the information.
        \n<\/span>
        \nOur future iteration and next steps would be to input <\/span>all<\/span> restaurants and food places (not just fast-food or vegan or vegetarian) and provide rating of vegetarian or vegan option quality ratings along with hard coding the following on Carto:<\/span><\/p>\n

          \n
        • Add carrot-shaped rating system via CSS on carto<\/span><\/li>\n
        • Add Legend possible by combining the excel data sheets<\/span><\/li>\n
        • Input <\/span>all<\/span> restaurants and food places (not just fast-food or vegan or vegetarian) and provide ratings of vegetarian or vegan food option qualities (rating) along with the following:<\/span>\n
            \n
          • Hover:<\/b> restaurant name, cuisine, and location (city), rating<\/span> of vegetarian or vegan option quality<\/span><\/li>\n
          • Click:<\/b> restaurant name, cuisine<\/span>, price range <\/span>($, $$, $$$\u2026)<\/span>, what vegetarian or vegan options they had, rating of vegetarian or vegan option quality, website, and pictures of food.<\/span><\/li>\n<\/ul>\n<\/li>\n
          • Add images via HTML on Carto<\/span><\/li>\n
          • Add hyperlinks on the website section of the pop-up<\/span><\/li>\n<\/ul>\n

            One challenge we are faced with is finding complete datasets of all the restaurants in the United States. We might have to approach this challenge by making this tool an open-source database where users start to populate the data as they visit locations and rate how the quality is of the vegan and vegetarian food options at that restaurant. Another approach would be to partner with tools like Yelp and pull the basic data to populate our tool. With that, we would incorporate user collected data for each food places they visit. <\/span><\/p>\n

            Ultimately, we want this map to be a useful tool for people that want to eat vegetarian or vegan food options and provide information for vegans and vegetarians that exceed the depth of information provided in all-food applications like Yelp (such as ratings of vegetarian or vegan option quality). By focusing on just the vegan and vegetarian food availabilities, it gives our tool the advantage to be more specific in catering to the needs of the niche users of vegan and vegetarians.<\/span><\/p>\n

             <\/p>\n","protected":false},"excerpt":{"rendered":"

            by JiSun Hong & Christine (Ye Eun) Sun Introduction Our objective was to show the number and location of fast food restaurants in contrast to fully vegan or vegetarian restaurants in hopes to learn about the relationship between the regions that have more vegan or vegetarian restaurants available. We wanted to visualize it to see…<\/p>\n","protected":false},"author":546,"featured_media":12143,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[150],"tags":[111,38,35,115,133,316,313,97,5,162,154,43,71,31,122,28,19,196,315,314,94],"coauthors":[345],"class_list":["post-12086","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-projects","tag-carto","tag-cartodb","tag-cartography","tag-data-visualization","tag-data-viz","tag-fast-food","tag-food","tag-info-viz","tag-information-visualization","tag-interactive-map","tag-lab-report","tag-map","tag-mapping","tag-maps","tag-new-york","tag-new-york-city","tag-nyc","tag-restaurants","tag-vegan","tag-vegetarian","tag-visualization"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2018\/12\/Untitled-4-01.jpg?fit=363%2C200&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/paBdcV-38W","_links":{"self":[{"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts\/12086","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/users\/546"}],"replies":[{"embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/comments?post=12086"}],"version-history":[{"count":11,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts\/12086\/revisions"}],"predecessor-version":[{"id":12138,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts\/12086\/revisions\/12138"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/media\/12143"}],"wp:attachment":[{"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/media?parent=12086"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/categories?post=12086"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/tags?post=12086"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/coauthors?post=12086"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}