2b:null 2c:["$","title",null,{"children":"Only two companies make most of the great games | Fengrui Gan (Simon) | Observable"}] 31:T787,chart1 = { const root = tree(treeData); let x0 = Infinity; let x1 = -x0; root.each((d) => { if (d.x > x1) x1 = d.x; if (d.x < x0) x0 = d.x; }); console.log("this", this); const svg = this ? d3.select(this) : d3.create("svg"); svg.attr("viewBox", [0, 0, width, x1 - x0 + root.dx * 2]); const g = svg .selectAll("g") .data([0]) .join("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("transform", `translate(${root.dy / 3},${root.dx - x0})`); const link = g .selectAll("#gLinks") .data([0]) .join("g") .attr("id", "gLinks") .attr("fill", "none") .attr("stroke", "#555") .attr("stroke-opacity", 0.4) .attr("stroke-width", 1.5) .selectAll("path") .data(root.links()) .join("path") .attr( "d", d3 .linkHorizontal() .x((d) => d.y) .y((d) => d.x) ); const node = g .selectAll("#gNode") .data([0]) .join("g") .attr("id", "gNode") .attr("stroke-linejoin", "round") .attr("stroke-width", 3); node .selectAll("g") .data(root.descendants()) .join( (enter) => { const g = enter.append("g"); g.append("circle"); g.append("text"); return g; }, (update) => { update .select("circle") .select("circle") .attr("fill", (d) => (d.children ? "#555" : "#999")) .attr("r", 2.5); update .select("text") .attr("dy", "0.31em") .attr("x", (d) => (d.children ? -6 : 6)) .attr("text-anchor", (d) => (d.children ? "end" : "start")) .text((d) => d.data.name) .clone(true) .lower() .attr("stroke", "white"); return update; } ) .transition() .duration(1000) .attr("transform", (d) => `translate(${d.y},${d.x})`); return svg.node(); }32:T54c,chart2 = { const root = tree(gameToCompany); let x0 = Infinity; let x1 = -x0; root.each(d => { if (d.x > x1) x1 = d.x; if (d.x < x0) x0 = d.x; }); const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, x1 - x0 + root.dx * 2]); const g = svg .append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("transform", `translate(${root.dy / 3},${root.dx - x0})`); const link = g .append("g") .attr("fill", "none") .attr("stroke", "#555") .attr("stroke-opacity", 0.4) .attr("stroke-width", 1.5) .selectAll("path") .data(root.links()) .join("path") .attr( "d", d3 .linkHorizontal() .x(d => d.y) .y(d => d.x) ); const node = g .append("g") .attr("stroke-linejoin", "round") .attr("stroke-width", 3) .selectAll("g") .data(root.descendants()) .join("g") .attr("transform", d => `translate(${d.y},${d.x})`); node .append("circle") .attr("fill", d => (d.children ? "#555" : "#999")) .attr("r", 2.5); node .append("text") .attr("dy", "0.31em") .attr("x", d => (d.children ? -6 : 6)) .attr("text-anchor", d => (d.children ? "end" : "start")) .text(d => d.data.name) .clone(true) .lower() .attr("stroke", "white"); return svg.node(); }33:T58a,## Made up insights(Hypothesis)

The majority of popular games with a score of 3.5 or higher are developed by at least two companies, while the majority of popular games with a score of 3.5 or lower are developed by a single company.
The vast majority of games with a score of 3.5 or higher are developed by two or more companies. Among all game companies, Nintendo has developed the most popular games.

I choose the second insight for this homework.
**What it takes to test insights（Consideration）** - Insight 1 Consideration: For me to test this insights, I will need to build a tree with two branches. In one branch, all the games have rating higher than 3.5. In the other branch, all the games have rating lower than 3.5. Each game with have branches pointing to the companies that developed it. By comparing the number of company branches of game with different ratings, we can see if this insight is true. - Insight 2 Consideration: For me to test this insight, I will need to build two trees. One tree is the same as the tree for Insight 1. In this tree, we can see if those popular games are developed by more than 2 companies. For the other tree, we will use branch to represent different companies and their games will be the subbranches. By comparing the number of subbranches, we can see which company developed the most of popular games.34:[{"id":"b4177c92f8e03ef9de5622d56dd5fd4918ecdaf87b7bc6174f98717f882625786bba6e1c33fab4fe6fe72d5ff27f24c8e1de79f4bd7f37e4133df469b1eaa1ce","href":"https://static.observableusercontent.com/files/b4177c92f8e03ef9de5622d56dd5fd4918ecdaf87b7bc6174f98717f882625786bba6e1c33fab4fe6fe72d5ff27f24c8e1de79f4bd7f37e4133df469b1eaa1ce","name":"games.csv","type":"text/csv","lastModified":1680123098950.23,"size":2873121}] 2f:{"id":"8281bd54040c204e","slug":null,"title":"Only two companies make most of the great games","thumbnail":"9e66f3d75a34d27eaf5e44961c12522250ef5dc217def6aa1e591102fa654896","access_level":"public","create_time":"$D2023-03-29T20:51:38.950Z","update_time":"$D2023-03-29T20:52:03.624Z","view_time":null,"first_public_time":"$D2023-03-29T20:51:38.950Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"a48bdab08888437c","login":"fengruigan","name":"Fengrui Gan (Simon)","avatar_url":"https://avatars-next.observableusercontent.com/73027a1b3f09dc8313d125b3d1f54464475e75f162e6d1db0259249352073c1d","tier":"starter_2024"},"version":523,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6d58559bc5b22c08","login":"fengruigan","name":"Fengrui Gan (Simon)","avatar_url":"https://avatars-next.observableusercontent.com/73027a1b3f09dc8313d125b3d1f54464475e75f162e6d1db0259249352073c1d","tier":null}],"members":[{"type":"individual","id":"6d58559bc5b22c08","login":"fengruigan","name":"Fengrui Gan (Simon)","avatar_url":"https://avatars-next.observableusercontent.com/73027a1b3f09dc8313d125b3d1f54464475e75f162e6d1db0259249352073c1d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Only two companies make most of the great games","cells":[{"id":0,"value":"# Only two companies make most of the great games\n## Nintendo has been the king of the most popular game hill since 2020\n\nassignment 7: The vast majority of games with a rating of 3.5 or higher are developed by at least two companies. Among all game companies, Nintendo has developed the most popular games since 2020.\n\nCreated by [Jiangyan Li](https://observablehq.com/@lilyneu?tab=profile)
\nClass: [Data Visualization / Information Visualization](https://johnguerra.co/classes/data_visualization_spring_2023/)
\nTweet: [Link](https://twitter.com/neu7295/status/1639882033077055490)
\nYoutube: [Link](https://www.youtube.com/watch?v=ZzBE_AcnGvQ)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":456,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":477,"value":"## Games with 3.5 or more rating, and developers with more than 5 games","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":480,"value":"viewof minRating = Inputs.range([0, 5], {value: 3.5, label: \"Min Rating\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"viewof minNumGamesByDev = Inputs.range([0, 20], {value: 5,step: 1, label: \"Min. Number of Games by Developer\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"For Anshul to grade:
\n[Insight](https://observablehq.com/d/9f34b6e0d07c0589#cell-0),
\n[Work Description](https://observablehq.com/d/9f34b6e0d07c0589#cell-13),
\n[Data Abstraction](https://observablehq.com/d/9f34b6e0d07c0589#cell-390),
\n[Data Processing](https://observablehq.com/d/9f34b6e0d07c0589#cell-26),
\n[Made-up insights (Hypothesis)](https://observablehq.com/d/9f34b6e0d07c0589#cell-392),
\n[Audience & Task abstraction (why)](https://observablehq.com/d/9f34b6e0d07c0589#cell-431),
\n[How abstraction](https://observablehq.com/d/9f34b6e0d07c0589#cell-438), ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":235,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"## Introduction\n\nGame companies are responsible for creating and publishing video games. They range from small independent studios to large multinational corporations. Some of the most well-known game companies include Nintendo, Sony, Microsoft, Electronic Arts, and Activision Blizzard. These companies employ developers, designers, artists, and other professionals to create games for a variety of platforms, including consoles, computers, and mobile devices. The gaming industry has experienced tremendous growth in recent years, with revenues exceeding those of the film and music industries combined.\n\nIn this assignment, I got dataset csv file from [Kaggle Website](https://www.kaggle.com/datasets/arnabchaki/popular-video-games-1980-2023). From the tree chart, I can see that **The vast majority of games with a rating of 3.5 or higher are developed by at least two companies. Among all game companies, Nintendo has developed the most popular games since 2020.**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":394,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":392,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"## Data Processing","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":82,"value":"- Original raw dataset","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":78,"value":"games","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"- In original dataset, the games companies and the release data are are strings. In formatted_data, I transformed the game companies to an array of the company names and changed release date to integer as they should be.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":89,"value":"formatted_data = {\n const res = []\n games.forEach(game => {\n const team = game.Team.slice(1, game.Team.length-1)\n const array = team.split(', ')\n for (let c of array){\n while (c[0]==\"'\"){\n c = c.slice(1, c.length)\n }\n while(c[c.length-1] == \"'\"){\n c = c.slice(0, c.length-1)\n }\n if (game['Release Date'].split(', ')[1] !== undefined){\n res.push({...game, 'Release Date': game['Release Date'].split(', ')[1], Team: c})\n }\n }\n })\n return res\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"- In this assignment, I want to analysis the game that came out after 2020. So I filtered out the games came before 2020 and the game with invalid release date.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":205,"value":"filtered_formatted_data = formatted_data.filter(game => parseInt(game['Release Date']) >= 2020 && !isNaN(game.Rating))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":"- Delete those attributes that we won't use for this assignment","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":418,"value":"clean_data = filtered_formatted_data.map(d => {\n delete d['Times Listed']\n delete d['Number of Reviews']\n delete d['Genres']\n delete d['Summary']\n delete d['Reviews']\n delete d['Plays']\n delete d['Backlogs']\n delete d['Wishlist']\n delete d['Playing']\n return d\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"- Transform the data to a Tree data structure. Since I am trying to find the company which developed the most popular games, I also only include the game companies which developed more than 5 popular games. treeData is the dataset that will build a tree based on game companies.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":128,"value":"treeData = {\n const treeData2 = table2Tree(clean_data, [\"Team\", \"Title\"], v => d3.mean(v, d => d.lat))\n return {\n name: \"Game Companies\",\n children: treeData2.children.filter(item => item.children.length >= minNumGamesByDev)\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"- gameToCompany is the dataset that will build a tree based on the ratings","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":226,"value":"gameToCompany = {\n \n const unsorted = table2Tree2(clean_data, ['Rating', \"Title\", 'Team'], v => d3.mean(v, d => d.lat))\n unsorted.children = unsorted.children.filter(item => item.name >= 4)\n unsorted.children = unsorted.children.sort(function(a, b) {\n var keyA = a.name,\n keyB = b.name;\n // Compare the 2 dates\n if (keyA < keyB) return 1;\n if (keyA > keyB) return -1;\n return 0;\n})\n return unsorted\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"viewof selected = navio(clean_data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":390,"value":"## Data Abstraction (What)\n- **Dataset Type**: Table, Temporal(Release Date is temporal), Tree;\n- **Attributes**:\n - Release Date: Ordinal, Sequential (temporal)\n - Title: Categorical\n - Team: Categorical\n - Rating: Quantitative, Sequential\n- **Derived Attributes**:\n I use those attributes in d3.tree.\n - Name: Categorical\n - Children: Array of names which are categorical\n- **Data Availability**: Static\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":76,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":431,"value":"## Task Abstraction (Why)\n- **Audience**: Game lovers who want to learn more about game companies.\n- **Tasks**\n - T1: **Summarize** the number of game companies that worked together on each popular game **(Summarize, Features)**
\n - T2: **Identify** the company that has the most branches of developed games **(Identify, Features)**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":438,"value":"## How abstraction\n[Chart1 Link](https://observablehq.com/d/9f34b6e0d07c0589#chart1); [Chart2 Link](https://observablehq.com/d/9f34b6e0d07c0589#chart2)\n- **Mark**: Point, Line\n- **Channel**:\n - Title, Team, Release Date: Spatial Region (for categorical attributes)\n - Rating: vertical position (Express)\n- **Expressivity**: By using a Tree chart, we can see the number of companies that developed a game and also all the games developed by a company. Therefore, the chart shows all the information in the dataset. So it is expressive.\n- **Effectiveness**: It is easy to compare the number of companies or games by looking at the tree chart. So it is effective.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":436,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":388,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":74,"value":"games = await FileAttachment(\"games.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"games","database":"$undefined"},{"id":152,"value":"tree = data => {\n const root = d3.hierarchy(data);\n root.dx = 10;\n root.dy = width / (root.height + 1);\n return d3.tree().nodeSize([root.dx, root.dy])(root);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"color = d3.scaleOrdinal(d3.schemeCategory10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"table2Tree = function(data, attribs, value = undefined) {\n const valueFn = v =>\n value === undefined\n ? v.length // Default value count nodes\n : value instanceof Function // If value is a function just pass it\n ? value(v)\n : d3.sum(v, d => +d[value]); // If value is not a function assume it is an attribute and sum it\n\n return rollupsToTree(\n d3.rollups(...[data, valueFn].concat(...attribs.map(a => d => d[a])))\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"table2Tree2 = function(data, attribs, value = undefined) {\n const valueFn = v =>\n value === undefined\n ? v.length // Default value count nodes\n : value instanceof Function // If value is a function just pass it\n ? value(v)\n : d3.sum(v, d => +d[value]); // If value is not a function assume it is an attribute and sum it\n\n return rollupsToTree2(\n d3.rollups(...[data, valueFn].concat(...attribs.map(a => d => d[a])))\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"format = d3.format(\",d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"drag = simulation => {\n function dragstarted(event, d) {\n if (!event.active) simulation.alphaTarget(0.3).restart();\n d.fx = d.x;\n d.fy = d.y;\n }\n\n function dragged(event, d) {\n d.fx = event.x;\n d.fy = event.y;\n }\n\n function dragended(event, d) {\n if (!event.active) simulation.alphaTarget(0);\n d.fx = null;\n d.fy = null;\n }\n\n return d3\n .drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"rollupsToTree = function(rollupsData) {\n const makeTreeNode = d => {\n let res = {\n name: d[0]\n };\n\n if (Array.isArray(d[1])) res.children = rollupsToTree(d[1]);\n else res.value = d[1];\n return res;\n };\n\n function rollupsToTree(groupedData) {\n if (!groupedData) return;\n\n return groupedData.map(makeTreeNode);\n }\n\n return {\n name: \"Game Companies\",\n children: Array.isArray(rollupsData)\n ? rollupsToTree(rollupsData)\n : [{ name: \"Game Companies\", value: rollupsData }]\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"d33 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"rollupsToTree2 = function(rollupsData) {\n const makeTreeNode = d => {\n let res = {\n name: d[0]\n };\n\n if (Array.isArray(d[1])) res.children = rollupsToTree(d[1]);\n else res.value = d[1];\n return res;\n };\n\n function rollupsToTree(groupedData) {\n if (!groupedData) return;\n\n return groupedData.map(makeTreeNode);\n }\n\n return {\n name: \"Popular Games\",\n children: Array.isArray(rollupsData)\n ? rollupsToTree(rollupsData)\n : [{ name: \"Popular Games\", value: rollupsData }]\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"import {navio} from \"@john-guerra/navio\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"