From 2b6ca84d72240ca20b30b37a424b08efa7aea78c Mon Sep 17 00:00:00 2001 From: adityanz Date: Tue, 12 May 2020 16:18:28 -0700 Subject: [PATCH] added some interactivity. --- final.html | 135 ++++++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 107 insertions(+), 28 deletions(-) diff --git a/final.html b/final.html index abac035..57a5eb2 100644 --- a/final.html +++ b/final.html @@ -61,25 +61,34 @@
+

Hover and interact with the visualization to see relations and patterns

Encoding

- In order to do my data encoding, I ended up + Firstly, I ended up having a top level filter, that allows the data to be grouped based on the health risk category and any changes to the drop down, will make all the visualizations update their data. + The main visualization is the map, that represents all the data of the health and yelp scores of all the different restaurants in San Francisco. The data is broken down based on the location of the coordinate and is placed on the map accordingly. Each dot resprents each of the indivudial restaurants that exist in San Francisco. + The data that is included in the map tooltip shows the name, yelp rating, health score, risk category and violation. + + For the second visualization, the circle packing graph, this represents a hierarchal data layout with three levels, starting with the parent node as the city, followed by the zip code and finally the category type of resturant, which includes cuisines but also type of business. The tooltip of the circle packing represents the number of restaurants in that specific area, and then in that specific type for that area. It also highlights the same nodes that it can find in other areas of the city, based on the cuisine and the amount. + + Finally, for the stacked bar graph, this represents the price category of the resturant followed by the average health score for that price. I wanted to not only look at the scores with the yelp reviews, but also look at the price and how costly that place is to eat out, based on the zip codes.

Interactivity

- For the interactivity, I ended up placing a tooltip with the brushing on the node link, where it only showcases the point with the same type of cuisine based on the area. I also ended up doing a tooltip with the highlight on the map that gives the details about every single restaurant. For the stacked bar, I ended up showing the health score based on that zipcode with that specific cost, looking at the area and also how expensive that meal was. + For the interactivity, I ended up firstly making all the visualizations have a interative tooltip with a mouse over and a mouse out, that highlights the specifc node or point in question and provides the information relevant to each visualization. I also ended up providing zoom functionality for the map, since there are a lot of data points, and simillary for the circle packing as well. I also create a grey hover over the bar graph that focuses on the specific bar locally. + In the map, the areas of the city highlight based on neighborhood as well with a border, diving the different parts of the city, so that your resturant is easier to find. + I also implemented cross interactivity in which the circle packing diagram, can highlight at the same time and so you can see the resturants based on zip code in the highlight, and also, based on the type/cuisine . Note that the cuisine will highlight the ones outside of your zip code as well.

Findings

- There is a lot of findings that can be looked at here based on the data and there are a lot of trends. + There is a lot of findings that can be looked at here based on the data and there are a lot of trends due to the size of the data. We can start off with overall trends from the map, in which the average rating of the resturants decreases as the risk category increases, which was certain to be seen. We can also see that a lot of the food trucks tend to have more higher risk and health violations, especially in 53 resturants in 94107. @@ -92,8 +101,8 @@

Findings