2d:null 2e:["$","title",null,{"children":"Mobile Games Data Visualization | issekhon | Observable"}] 33: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"} } } ] })34:[] 31:{"id":"c94c80ba6304ca8c","slug":"final-project","title":"Mobile Games Data Visualization","thumbnail":"83192e2f00d54761c3647496d6fe22841c2ec63e13ab720b7c7c991b699c1adb","access_level":"public","create_time":"$D2019-04-16T04:00:26.864Z","update_time":"$D2019-04-17T04:15:50.888Z","view_time":null,"first_public_time":"$D2019-04-16T04:18:05.848Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"3aa835d06bf24c63","login":"issekhon","name":"","avatar_url":"https://avatars-next.observableusercontent.com/d9feab114de0cff86c655e9594ab8f13e61c9bb0d7d94ec630bcc60c647df349","tier":"starter_2024","bio":""},"version":316,"publish_version":316,"role":null,"authored":false,"authors":[{"type":"individual","id":"14b434c9b3df7954","login":"issekhon","name":"","avatar_url":"https://avatars-next.observableusercontent.com/d9feab114de0cff86c655e9594ab8f13e61c9bb0d7d94ec630bcc60c647df349","tier":null,"bio":""}],"members":[{"type":"individual","id":"14b434c9b3df7954","login":"issekhon","name":"","avatar_url":"https://avatars-next.observableusercontent.com/d9feab114de0cff86c655e9594ab8f13e61c9bb0d7d94ec630bcc60c647df349","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"914e2880013747e9","slug":"data-visualization-for-developers","title":"Observable for Developers","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"titling":"auto","title":"Mobile Games Data Visualization","cells":[{"id":0,"value":"md`# Mobile Games Data Visualization`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"md` Ishpreet Sekhon and Brandyn Chew`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"md` Individual Reports:\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"md`## 1. Data Setup`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"VegaLite = require('@observablehq/vega-lite')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"df = dfjs.DataFrame.fromCSV('https://gist.githubusercontent.com/issekhon/1a2a9c77efaf1e8b59ca5f5232fb37ba/raw/546d3ff7ef0d33340c8c80aa2064f7d7260bd26e/googleplaystore.csv')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"df2 = dfjs.DataFrame.fromCSV('https://gist.githubusercontent.com/issekhon/3c9ae1cd17267e32f52805956820c0de/raw/fdfc8efa4530b50af02f35c4fddc96ca60d26380/AppleStore2.csv')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"playData = df.toCollection()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"playData2 = df2.toCollection()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"md`## 2. Demo`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"md` ### Google Play Store Game Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"md`### Understanding Market Saturation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"md`### Apple iOS Store & Google Play Store - Game User Rating & Price`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"md`## 3. Vis 1 Report - Google Play Store Game Data Visualization`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"md`### Overview`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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

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?

A screenshot of the filtering interaction within the visualization.

\n\n

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

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

Screenshot of brush filtered visualization

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"md`### Design Choices`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"md`### Analytical Questions Supported`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"md`### Unimplemented Design`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"md`### Overview`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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

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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"md`### Design Choices`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"md`### Analytical Questions Supported`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"md`### Unimplemented Design`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"md`## 6. Feasibility Pilot`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"md`## 7. Libraries Used`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"dfjs = require('https://bundle.run/dataframe-js@1.3.2')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"md`Dataset Source: https://www.kaggle.com/lava18/google-play-store-apps#googleplaystore.csv`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 32:"$31:body"

Table of Contents: