30:T47e,VegaLite({ data: {values: playData}, vconcat: [ // This is the first graph, which uses brush selection and filters itself based on click selection colors { mark: "point", width: 700, height: 400, selection: { brush: { type: "interval", } }, encoding: { x: {field: "Rating", type: "quantitative"}, y: {field: "Price", type: "quantitative"}, color: {condition: {selection: "click", field: "Genres", type: "nominal"}, value: "lightgrey"}, tooltip: [ {field: "App", type: "nominal"} ] } }, // This is the second graph, which allows for click selection of a genre and transforms itself based on brush selection { mark: "bar", width: 700, height: 300, transform: [{filter: {selection: "brush"}}], selection: {click: {encodings: ["color"], type: "multi"}}, encoding: { x: {title: "Number of Games", aggregate: "count", type: "quantitative"}, y: {title: "Genre", field: "Genres", type: "nominal"}, color: {condition: {selection: "click", field: "Genres", type: "nominal"}, value: "lightgrey"} } } ] })31:[] 2e:{"title":"Mobile Games Data Visualization","cells":[{"id":0,"value":"md`# Mobile Games Data Visualization`","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"md` Ishpreet Sekhon and Brandyn Chew`","pinned":false,"hidden":false,"mode":"ojs"},{"id":284,"value":"md` Individual Reports:\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"md` This project has three visualizations that support analysis of an android app store games data set`","pinned":false,"hidden":false,"mode":"ojs"},{"id":297,"value":"md`

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"md`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"md`## 1. Data Setup`","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"md` This code grabs dataset from github gist hosted link and converts it into a dataframe object for vegalite access`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"VegaLite = require('@observablehq/vega-lite')","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"df = dfjs.DataFrame.fromCSV('https://gist.githubusercontent.com/issekhon/1a2a9c77efaf1e8b59ca5f5232fb37ba/raw/546d3ff7ef0d33340c8c80aa2064f7d7260bd26e/googleplaystore.csv')","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"df2 = dfjs.DataFrame.fromCSV('https://gist.githubusercontent.com/issekhon/3c9ae1cd17267e32f52805956820c0de/raw/fdfc8efa4530b50af02f35c4fddc96ca60d26380/AppleStore2.csv')","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"playData = df.toCollection()","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"playData2 = df2.toCollection()","pinned":false,"hidden":false,"mode":"ojs"},{"id":228,"value":"md`## 2. Demo`","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"md` ### Google Play Store Game Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":224,"value":"VegaLite(\n {\n data: {values: playData},\n hconcat: [{\n selection: {brush: {type: \"interval\"}},\n mark: { type: \"point\"},\n encoding: {\n x: { field: \"Genres\", type: \"nominal\"},\n y: {field: \"Installs\", type: \"quantitative\"},\n tooltip: [\n {field: \"App\", type: \"nominal\"}\n ]\n },\n width: 500,\n height: 300\n }, {\n transform: [\n {filter: {selection: \"brush\"}}\n ],\n mark: {type: \"point\"},\n encoding: {\n x: { field: \"Price\", type: \"quantitative\"},\n y: {field: \"Rating\", type: \"quantitative\", scale: {domain: [0, 5]}},\n tooltip: [\n {field: \"App\", type: \"nominal\"}\n ]\n },\n width: 300,\n height: 300\n }]\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"md`### Understanding Market Saturation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"md`### Apple iOS Store & Google Play Store - Game User Rating & Price`","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"VegaLite(\n {\n hconcat: [{\n data: {values: playData2},\n mark: { type: \"point\"},\n encoding: {\n x: {field: \"price\", type: \"quantitative\"},\n y: {field: \"user_rating\", type: \"quantitative\"},\n tooltip: [\n {field: \"track_name\", type: \"nominal\"},\n {field: \"price\", type: \"quantitative\"},\n {field: \"user_rating\", type: \"quantitative\"}\n ]\n },\n width: 400,\n height: 400\n }, {\n data: {values: playData},\n mark: { type: \"point\"},\n encoding: {\n x: { field: \"Price\", type: \"quantitative\", scale: {domain: [0, 30]}},\n y: {field: \"Rating\", type: \"quantitative\"},\n tooltip: [\n {field: \"App\", type: \"nominal\"},\n {field: \"Price\", type: \"quantitative\"},\n {field: \"Rating\", type: \"quantitative\"}\n ]\n },\n width: 400,\n height: 400\n }]\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"md`## 3. Vis 1 Report - Google Play Store Game Data Visualization`","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"md`### Overview`","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"md` This visualization mainly focuses on exploring some of the core dimensions of the Google Play Store data set. It takes a look at the genre of game, number of installs, user rating and price, which are all important factors to take into account when developing mobile games. The visualization compares the genre of game to number of installs, and this data can then be related to the corresponding user rating and price.\n\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"md` The main audience for this visualization is primarily game developers, specifically those making mobile games. The visualization allows mobile game developers to examine some of the key aspects that come into play when creating a mobile game. Mobile game developers can view the genre of game, number of installs, user rating and price, to see if any of these dimensions have any direct correlations to one another.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"md` Some examples of the research questions that this visualization will address are as listed below:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"md`\n

What are the most popular genres of mobile game?
Is the popularity of a genre affected by its ratings?
Do the more popular genres receive higher ratings than other genres?
How much does the price of a game affect the number of installs it receives?

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"md`### Data Set`","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"md` The data set being used for this visualization is the Google Play Store data set. The specific dimensions that are being examined with this visualization are the genre of game, number of installs, user rating and price. The number of installs, user rating and price are all quantitative data, while the genre of game is nominal data.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"md`### User Manual`","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"md` This visualization contains user interaction in the form of details on demand and filtering. The user is able to hover their cursor over the data to obtain the name of the game in a tooltip. The user may also filter the data based on their brush selection to see how the genre and number of installs of a specific game relate to its user rating and price.\n\n

A screenshot of the filtering interaction within the visualization.

\n\n

A screenshot of the details on demand interaction within the visualization.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"md`### Design Choices`","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"md` For the design of the visualization, the type of graphs used are scatter plot graphs so that the different dimensions can be easily compared and any trends can be easily spotted. The scale of the user rating values are set to always be displayed within the range of zero to five so that the user can easily determine what its rating is out of five. The size of the graphs are enlarged so that the data can be viewed more clearly and it is easier to differentiate the different data points. The user interaction of filtering the data helps to isolate specific sections of the data so that the relationship between the data in the different graphs is easier to identify. The tooltips showing the name of the game for a certain section of data is useful if there is data that stands out from the rest, or if further analysis needs to be done.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"md`### Analytical Questions Supported`","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"md` The visualization is designed to assist in answering the analytical questions, where the appropriate dimensions are included so that the questions may be answered. The user can explore the genre of game, number of installs, user rating and price to determine how the different dimensions compare to one another, as well as if they have any direct impact on each other.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"md`### Unimplemented Design`","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"md` For the most part, the design of this visualization turned out how we intended it to be. In the original design however, we did also want to have another view for the Apple iOS Store data, showing the same data dimensions, displayed in the same way as the Google Play Store data. The best data set we could find for the Apple iOS Store did not have all the same dimensions as the Google Play Store data set that we wanted to explore, so we settled for simply visualizing the Google Play Store data.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"md`## 4. Vis 2 Report - Understanding Market Saturation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"md`### Overview`","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"md` This visualization consists of two linked graphs. The first is a point graph showing User Ratings of the game as they relate to Price. The second graph is a bar graph that shows the highlighted section from the first graph's genre and number of games breakdown. Selecting a bar from the second graph also isolates that genre in the first graph.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"md`

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"md` The audience for this visualization is game developers. As a developer they would need to decide what game they want to make. This graph aids them in making that decision as it can highlight underserved or croweded genres, as well as expectations of players in terms of rating as an indicator of game quality`","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"md` Questions this visualization hopes to address:\n

What genre would my game have the best chance in?
Are there underserved genres that our game could leverage?

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"md`### Data Set`","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"md` The visualization uses an android app store dataset. Dimensions used for the visualization are Rating, Price and Genres. Rating and Price is quantitative data, with Rating ranging from 0.0 - 5.0 and Price ranging from free to the most expensive game. Genre data is qualitative.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"md` These dimensions were chosen as they relate to the existing market. Ratings show what games players are generally happy with, Price separates those games based on free-to-play and paid games, and Genre determines the type of game that the rating-price relationship applies to.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"md`### User Manual`","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"md` To use the interactive visualization, start with the top graph. Brushing the mouse over points on the top graph filters the data being shown on the bottom graph. Hovering over a point on the top graph shows what game the dot represents.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"md`

Screenshot of brush filtered visualization

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"md` Selecting a genre bar on the bottom graph will also filter that genre in the top graph.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"md`

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"md`### Design Choices`","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"md` The first graph uses a point system to show the full spectrum of games on the graph as individual entities. This allows for individual inspection, to see which games are at the extremeties of the graph or in general. For the developer, this means they can see all the games at once as a representation of the market. The second graph is a bar graph to show quantity comparison. Seeing one bar that is much larger than another is immediately meaningful to the developer as it indicates saturation.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"md` The graphs are encoded to use Rating and Price as quantitative fields, and Genre as a nominal field. Genre is reinforced by color so that the developer can filter and make the connection between the two graphs. Count is used to show the number of games in the genre as an indication of saturation. However, number of games in a genre alone may not indicate saturation (they may all be bad and not have any players) so it is compared to the top graph's user rating to get a more complete picture.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"md` Filtering in the top graph allows for selection of games within a particular range of rating and price. If the developer is only interested in free-to-play games within a certain rating range, then they can select that. The connection to the bottom graph allows the developer to see the detailed saturation of a particular range of games. Click filtering from the bottom graph supports inquery into where a particular genre's games lie on the user rating / price spectrum.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"md`### Analytical Questions Supported`","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"md` Comparing user rating, price and genre makeup in this way allows developers to ask the question \"what is the current makeup of the market, and where are there openings for our game?\". Perhaps there are few entries in a particular genre that is highly rated, indicating an underserved market. If there are a lot of Action games with high user ratings, then that may indicate saturation of that genre. These questions help developers design their game to fit a niche.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"md`### Unimplemented Design`","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"md` Due to the dataset having a large volume of games with identical price and rating (likely due to the app store only showing ratings to one decimal place, and there being a lot of free games) the top graph becomes difficult to parse within the 4.4-4.8 rating and $0 range. We wanted to prioritize data that was filtered by the bottom graph on top so that colored entries would still be visible over the other entires at the same point, but could not find any documentation from vegalite that would support that.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"md`## 5. Vis 3 Report - Apple iOS Store & Google Play Store - Game User Rating & Price Visualization`","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"md`### Overview`","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"md` This visualization mainly focuses on exploring specific dimensions of the Apple iOS Store data set and Google Play Store data set to compare the dimensions on different platforms. It takes a look at the user rating and price of games on both the Apple iOS Store and Google Play Store, which are important aspects to consider when developing mobile games. The visualization compares the user rating to price for each platform, and any similarities or trends between the two platforms can be identified.\n\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"md` The main audience for this visualization is primarily game developers, specifically those making mobile games. The visualization allows mobile game developers to examine some of the key aspects that come into play when creating a mobile game. Mobile game developers can view the user rating and price of games on the Apple iOS Store and Google Play Store to see if there are any correlations between the different platforms.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"md` Some examples of the research questions that this visualization will address are as listed below:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"md`\n

Does the price of a mobile game affect its rating?
Do more expensive games receive similar ratings to the less expensive ones?
Do more expensive games in the Apple iOS Store receive similar ratings to that of more expensive games in the Google Play Store?

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"md`### Data Set`","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"md` The data sets being used for this visualization are the Apple iOS Store data set and the Google Play Store data set. The specific dimensions that are being examined with this visualization are the user rating and price. The user rating and price are both quantitative data.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"md`### User Manual`","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"md` This visualization contains user interaction in the form of details on demand. The user is able to hover their cursor over the data to obtain the name of the game, as well as the exact price and user rating of the game in a tooltip.\n\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"md`### Design Choices`","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"md` For the design of the visualization, the type of graphs used are scatter plot graphs so that the different dimensions can be easily compared and any trends can be easily spotted. The scale of the price values for the Google Play Store data range from zero to thirty so that it matches the scale of the Apple iOS Store price data. The size of the graphs are enlarged so that the data can be viewed more clearly and it is easier to differentiate the different data points. The user interaction of tooltips showing the name, price and user rating of the game for a certain section of data is useful if there is data that stands out from the rest, or if the user wants the exact value of the price or user rating.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"md`### Analytical Questions Supported`","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"md` The visualization is designed to assist in answering the analytical questions, where the appropriate dimensions are included so that the questions may be answered. The user can explore the user rating and price to determine how the different dimensions compare to one another, as well as if there are any correlations between the Apple iOS Store and Google Play Store.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"md`### Unimplemented Design`","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"md` For the design of this visualization, we originally wanted to include a number of different dimensions, such as the genre of game for the Apple iOS Store data or other dimensions that aren't explored in our other visualizations. However, the data set that we had for the Apple iOS Store didn't have all the dimensions that we wanted, so we ended up comparing just the user rating and price. If we did have the data for some of the other dimensions, the visualization would have most likely been similar to our first visualization.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"md`## 6. Feasibility Pilot`","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"md` Based on an initial test with two people, we found some areas where the design could be improved. In general, there was difficulty with the price field. Because the vast majority of games are in the free range, there ends up being dozens of entries overlapping each other whenever price is used as a field. A suggestion was to include some sort of visualization that only looks at free games or only looks at paid games.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"md`## 7. Libraries Used`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"dfjs = require('https://bundle.run/dataframe-js@1.3.2')","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"md`Dataset Source: https://www.kaggle.com/lava18/google-play-store-apps#googleplaystore.csv`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"md`iOS Dataset Source: https://www.kaggle.com/ramamet4/app-store-apple-data-set-10k-apps/version/2`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}

Table of Contents: