25:["$","title",null,{"children":"Assignment 6 | Emil Huseynov | Observable"}] 4b:T994,// chart1 { const priced = games.filter(d => d.price_band != null); const pool = priced.filter(d => genre1 === "All genres" || d.genres.split(",").includes(genre1)); // Keep the same price list for every genre: prices used by at least 20 games overall const overall = d3.rollup(priced, v => v.length, d => d.price); const shown = [null, ...[...overall].filter(([p, n]) => p != null && n >= 20).map(([p]) => p).sort((a, b) => a - b)]; const rows = shown.map(p => { const n = pool.filter(d => d.price === p).length; return {label: fmtPrice(p), n, share: n / pool.length}; }); const hidden = pool.filter(d => !shown.includes(d.price)).length; const under10 = pool.filter(d => d.price != null && d.price < 10).length / pool.filter(d => d.price != null).length; // The three most common prices get the only dark colour; everything else is grey context const top3 = d3.sort(rows, d => -d.n).slice(0, 3).map(d => d.label); const isTop = d => top3.includes(d.label); const name = l => l === "Free" ? "free-to-play" : l; display(Plot.plot({ title: `${d3.format(".0%")(under10)} of paid games cost under $10, and ${name(top3[0])}, ${name(top3[1])} and ${name(top3[2])} lead`, subtitle: `Number of Steam games at each list price (US dollars)${genre1 === "All genres" ? "" : `, ${genre1} only`}. Dark bars = the three most common prices. ${pool.length.toLocaleString()} games`, caption: `Prices used by at least 20 games, cheapest at the top; ${hidden} games at rarer prices are not shown. "Free" = free-to-play games with no list price. Hover a bar for its share.`, width, height: 440, marginLeft: 56, marginRight: 90, style: {fontSize: "12px"}, x: {axis: null}, y: {domain: rows.map(d => d.label), label: null, tickSize: 0}, marks: [ Plot.barX(rows, {y: "label", x: "n", fill: d => isTop(d) ? "#3a3a3a" : "#c9c9c9", channels: {Price: "label", Games: "n", "Share of games": d => d3.format(".1%")(d.share)}, tip: {format: {x: false, y: false, fill: false}}}), // Values written on the bars replace the x-axis Plot.text(rows.filter(d => !isTop(d)), {y: "label", x: "n", text: d => d.n.toLocaleString(), textAnchor: "start", dx: 4, fill: "#555"}), Plot.text(rows.filter(isTop), {y: "label", x: "n", text: d => `${d.n.toLocaleString()} (${d3.format(".0%")(d.share)})`, textAnchor: "start", dx: 4, fontWeight: "bold"}), Plot.ruleX([0]) ] })); }4c:T7ff,// chart2 { const data = rated.filter(d => includeFree || d.price_band !== "Free to play"); const order = bandOrder.filter(b => includeFree || b !== "Free to play"); const overall = d3.median(data, d => d.user_score); const stats = order.map(band => { const v = data.filter(d => d.price_band === band).map(d => d.user_score); return {band, n: v.length, q1: d3.quantile(v, 0.25), med: d3.median(v), q3: d3.quantile(v, 0.75)}; }); const nOf = new Map(stats.map(d => [d.band, d.n])); display(Plot.plot({ title: "Pricier games score higher on average, but the price groups overlap a lot", subtitle: "Steam user score (0–100) by price group. Box = middle half of games, thick line = median, dots = unusually low scores", caption: `Dashed line = median of all ${data.length.toLocaleString()} games shown. Hover a row for its quartiles.`, width, height: 340, marginTop: 28, marginLeft: 130, marginRight: 80, marginBottom: 44, style: {fontSize: "12px"}, x: {domain: [0, 100], grid: true, label: "Steam user score →", labelOffset: 38}, y: {domain: order, label: null, tickFormat: b => `${b} (n=${nOf.get(b).toLocaleString()})`}, color: {domain: bandOrder, range: bandColors}, marks: [ Plot.boxX(data, {x: "user_score", y: "price_band", fill: "price_band", stroke: "#2b2b2b", r: 1.3}), // Redraw the median in white on the two dark boxes so it stays visible Plot.tickX(stats.filter(d => d.band === "$10–19.99" || d.band === "$20+"), {x: "med", y: "band", stroke: "white", strokeWidth: 3}), Plot.ruleX([overall], {stroke: "#555", strokeDasharray: "4,3"}), Plot.text([`All games: ${overall}`], {x: overall, frameAnchor: "top", dy: -14, fill: "#444"}), Plot.text(stats, {x: 100, y: "band", text: d => `median ${d.med}`, textAnchor: "start", dx: 8, fontWeight: "bold"}), Plot.tip(stats, Plot.pointerY({x: "med", y: "band", title: d => `${d.band}\n${d.n.toLocaleString()} games\nMedian score: ${d.med}\nMiddle half: ${d.q1}–${d.q3}`})) ] })); }4d:Tbc0,// chart3 { const rows = rated.flatMap(d => d.genres.split(",").filter(g => mainGenres.includes(g)) .map(genre => ({genre, band: d.price_band, score: d.user_score}))); const cells = d3.rollups(rows, v => ({n: v.length, med: Math.round(d3.median(v, d => d.score))}), d => d.genre, d => d.band) .flatMap(([genre, bands]) => bands.map(([band, s]) => ({genre, band, ...s}))); const shown = cells.filter(d => d.n >= c3.minGames); const small = cells.filter(d => d.n < c3.minGames); const overall = d3.median(rated, d => d.user_score); // Price lift = $20+ median minus under-$1 median, for genres where both cells have enough games const cell = (g, b) => shown.find(d => d.genre === g && d.band === b); const lift = g => cell(g, "Under $1") && cell(g, "$20+") ? cell(g, "$20+").med - cell(g, "Under $1").med : null; const pairs = mainGenres.filter(g => lift(g) != null); const exceptions = pairs.filter(g => lift(g) <= 0); // Genres are reorderable (Bertin): sort by price lift so the pattern and the exception line up const order = c3.sortBy === "Price lift" ? d3.sort(mainGenres, g => -(lift(g) ?? -999)) : mainGenres; display(Plot.plot({ title: `In ${pairs.length - exceptions.length} of ${pairs.length} genres, $20+ games score higher than under-$1 games`, subtitle: `Median Steam user score for each genre and price group. Green = above the all-games median (${overall}), pink = below.${exceptions.length ? ` Outlined: the exception (${exceptions.join(", ")}).` : ""}`, caption: `Rows sorted by ${c3.sortBy === "Price lift" ? "price lift ($20+ median minus under-$1 median); genres without both cells go last" : "number of games"}. A game can have several genres, so it can count in more than one row. Grey cells have fewer than ${c3.minGames} games and are hidden as too noisy.`, width, height: 400, marginLeft: 150, padding: 0.04, style: {fontSize: "12px"}, x: {domain: bandOrder, axis: "top", label: null}, y: {domain: order, label: null}, color: {type: "diverging", scheme: "PiYG", pivot: overall, domain: [overall - 20, overall + 20], clamp: true, legend: true, label: "Median Steam user score"}, marks: [ Plot.cell(small, {x: "band", y: "genre", fill: "#ececec"}), Plot.text(small, {x: "band", y: "genre", text: d => `n=${d.n}`, fill: "#6b6b6b", fontSize: 10}), Plot.cell(shown, {x: "band", y: "genre", fill: "med", channels: {Genre: "genre", "Price group": "band", "Median score": "med", Games: "n"}, tip: {format: {x: false, y: false, fill: false}}}), Plot.text(shown, {x: "band", y: "genre", text: "med", fontWeight: "bold", fill: d => Math.abs(d.med - overall) >= 12 ? "white" : "black"}), // Outline (not recolour) the cells that break the pattern Plot.cell(shown.filter(d => exceptions.includes(d.genre) && (d.band === "Under $1" || d.band === "$20+")), {x: "band", y: "genre", fill: "none", stroke: "#1b1e23", strokeWidth: 2.5, inset: 1.5}) ] })); }4e:T99d,// chart4 { const f = stat4 === "Median" ? d3.median : d3.mean; const both = rated.filter(d => d.critic_score != null); const rows = bandOrder.map(band => { const all = rated.filter(d => d.price_band === band); const v = both.filter(d => d.price_band === band); return {band, n: v.length, share: v.length / all.length, players: v.length ? Math.round(f(v, d => d.user_score)) : null, critics: v.length ? Math.round(f(v, d => d.critic_score)) : null}; }); const long = rows.filter(d => d.n).flatMap(d => [ {band: d.band, who: "Steam players", score: d.players, n: d.n}, {band: d.band, who: "Metacritic critics", score: d.critics, n: d.n}]); display(Plot.plot({ title: "Among games critics reviewed, price barely moves either score", subtitle: `${stat4} score for the ${both.length} games that have both a Steam user score and a Metacritic critic score`, caption: "Right-hand labels: share of each price group that critics reviewed. Critics skipped every game under $1, so the cheap games pulling the Steam average down in charts 2–3 are missing here.", width, height: 290, marginLeft: 100, marginRight: 170, style: {fontSize: "12px"}, x: {domain: [55, 95], grid: true, label: "Score (0–100) →"}, y: {domain: bandOrder, label: null}, color: {domain: ["Steam players", "Metacritic critics"], range: ["#e8710a", "#3d3d3d"]}, marks: [ Plot.ruleY(rows.filter(d => d.n), {y: "band", x1: "critics", x2: "players", stroke: "#cfcfcf", strokeWidth: 4}), Plot.dot(long, {x: "score", y: "band", fill: "who", r: 6, channels: {Who: "who", Score: "score", Games: "n"}, tip: {format: {x: false, y: true, fill: false}}}), Plot.text(long, {x: "score", y: "band", text: "score", dy: -12, fontSize: 10}), // Label the two dots once, in the row with the widest gap, instead of using a legend Plot.text(long.filter(d => d.band === "$1–4.99"), {x: "score", y: "band", fill: "who", fontWeight: "bold", text: "who", textAnchor: "end", dx: -12, filter: d => d.who === "Metacritic critics"}), Plot.text(long.filter(d => d.band === "$1–4.99"), {x: "score", y: "band", fill: "who", fontWeight: "bold", text: "who", textAnchor: "start", dx: 12, filter: d => d.who === "Steam players"}), Plot.text(rows, {x: 95, y: "band", textAnchor: "start", dx: 10, text: d => `${d3.format(".0%")(d.share)} reviewed (${d.n} games)`}) ] })); }4f:Td35,// chart5 { const paid = rated.filter(d => d.price != null && d.price <= 80 && (genre5 === "All genres" || d.genres.split(",").includes(genre5))); const bar = d3.median(rated.filter(d => d.price >= 20), d => d.user_score); // typical $20+ game, all genres const cheap = paid.filter(d => d.price < 5); const winners = cheap.filter(d => d.user_score >= bar); // Spread games at the same price slightly sideways (fixed per game, so the picture never changes) const jx = d => d.price * Math.exp((((d.ID * 9301 + 49297) % 233280) / 233280 - 0.5) * 0.14); const q = find5.trim().toLowerCase(); const hits = q.length >= 2 ? paid.filter(d => String(d.name).toLowerCase().includes(q)).slice(0, 8) : []; display(Plot.plot({ title: `But price is no guarantee: ${winners.length.toLocaleString()} of ${cheap.length.toLocaleString()} games under $5 score as well as a typical $20+ game`, subtitle: `Each dot is one paid game${genre5 === "All genres" ? "" : ` (${genre5})`}. Gold dots in the shaded area = under $5 and at or above the $20+ median`, caption: "Price axis is logarithmic. Games at the same price are spread slightly sideways so they don't hide each other. Hover a dot for the game's name.", width, height: 420, style: {fontSize: "12px"}, x: {type: "log", domain: [0.42, 85], axis: null}, marginBottom: 40, marginRight: 16, y: {domain: [0, 100], grid: true, label: "↑ Steam user score"}, marks: [ Plot.gridX([0.5, 1, 2, 5, 10, 20, 40, 80]), // Hand-made price axis (Plot's log axis drops some labels) Plot.text([0.5, 1, 2, 5, 10, 20, 40, 80], {x: d => d, frameAnchor: "bottom", dy: 16, text: d => `$${d}`}), Plot.text(["List price (USD, log scale) →"], {frameAnchor: "bottom-right", dy: 34}), // Box edge at 5.4 so the jittered $4.99 column sits fully inside it Plot.rect([0], {x1: 0.42, x2: 5.4, y1: bar, y2: 100, fill: "#fff1c9", fillOpacity: 0.8}), // Grey for context; gold only for the cheap games that reach the bar (same hue family as the shaded box) Plot.dot(paid, {x: jx, y: "user_score", r: 2.2, fill: d => d.price < 5 && d.user_score >= bar ? "#b7791f" : "#98a2ad", fillOpacity: hits.length ? 0.15 : 0.7, channels: {Game: "name", Price: d => fmtPrice(d.price), Score: "user_score"}, tip: {format: {x: false, y: false, fill: false}}}), Plot.ruleY([bar], {stroke: "#222", strokeDasharray: "5,4"}), Plot.text([`Median $20+ game: ${bar}`], {x: 85, y: bar, textAnchor: "end", dy: -7, fontWeight: "bold", fill: "#1b1e23", stroke: "white", strokeWidth: 4, paintOrder: "stroke"}), Plot.text([`${winners.length.toLocaleString()} games under $5 here`], {x: 0.45, y: 97, textAnchor: "start", fontWeight: "bold", fill: "#1b1e23", stroke: "white", strokeWidth: 4, paintOrder: "stroke"}), Plot.dot(hits, {x: jx, y: "user_score", r: 6, stroke: "#c0392b", strokeWidth: 2.5}), Plot.text(hits.filter(d => d.price <= 10), {x: jx, y: "user_score", text: "name", dy: -12, textAnchor: "start", fill: "#c0392b", fontWeight: "bold", stroke: "white", strokeWidth: 4, paintOrder: "stroke"}), Plot.text(hits.filter(d => d.price > 10), {x: jx, y: "user_score", text: "name", dy: -12, textAnchor: "end", fill: "#c0392b", fontWeight: "bold", stroke: "white", strokeWidth: 4, paintOrder: "stroke"}) ] })); }50:[{"id":"294710e13989b2c50f46e70f8817297ae942f8bbb302b25b09f832b1485046545817c43fd9fdc642c8c6d2faaa2b605b51e585845442f69bff65013d830c17a0","href":"https://static.observableusercontent.com/files/294710e13989b2c50f46e70f8817297ae942f8bbb302b25b09f832b1485046545817c43fd9fdc642c8c6d2faaa2b605b51e585845442f69bff65013d830c17a0","name":"steam_prepped.csv","type":"text/csv","lastModified":1794518156591,"size":433452}] 47:{"id":"c826f9663b2b6db0","slug":"assignment-6","title":"Assignment 6","thumbnail":"57f0b6788997557022bd443aef2b8dafbf2fede61a81472f221845217a2dcb65","access_level":"public","create_time":"$D2026-11-12T21:15:26.029Z","update_time":"$D2026-11-12T21:58:20.345Z","view_time":null,"first_public_time":"$D2026-11-12T21:52:13.409Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"9c9d062424960510","login":"emil-huseynov","name":"Emil Huseynov","avatar_url":"https://avatars-next.observableusercontent.com/db0499c3050ca20fa8334aba351e396b9221de5c5f14c90d55c9e14670869830","tier":"free_2026","bio":"","followed_by_you":false,"follows_you":false},"version":58,"publish_version":58,"role":null,"authored":false,"authors":[{"type":"individual","id":"a2521b1b9379e774","login":"emil-huseynov","name":"Emil Huseynov","avatar_url":"https://avatars-next.observableusercontent.com/db0499c3050ca20fa8334aba351e396b9221de5c5f14c90d55c9e14670869830","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"9c9d062424960510","login":"emil-huseynov","name":"Emil Huseynov","avatar_url":"https://avatars-next.observableusercontent.com/db0499c3050ca20fa8334aba351e396b9221de5c5f14c90d55c9e14670869830","tier":"free_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Assignment 6","cells":[{"id":1,"value":"# Assignment 6","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"const games = FileAttachment(\"steam_prepped.csv\").csv({typed: true});","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"// Price groups, cheapest to most expensive\nconst bandOrder = [\"Free to play\", \"Under $1\", \"$1–4.99\", \"$5–9.99\", \"$10–19.99\", \"$20+\"];\n\n// One colour meaning across charts 1, 2 and 5: darker blue = higher price, grey = free to play\nconst bandColors = [\"#a8a8a8\", \"#c3dbf0\", \"#8bbbe0\", \"#4a90c8\", \"#1f5f9e\", \"#0b2f5e\"];\n\nconst bandOf = p => p == null ? \"Free to play\" : p < 1 ? \"Under $1\" : p < 5 ? \"$1–4.99\" : p < 10 ? \"$5–9.99\" : p < 20 ? \"$10–19.99\" : \"$20+\";\n\n// The ten biggest genres (Early Access, Violent, Gore etc. are labels rather than genres, so they are left out)\nconst mainGenres = [\"Indie\", \"Action\", \"Casual\", \"Adventure\", \"Simulation\", \"Strategy\", \"RPG\", \"Sports\", \"Racing\", \"Massively Multiplayer\"];\n\nconst fmtPrice = p => p == null ? \"Free\" : \"$\" + p.toFixed(2);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"// Games that have a Steam user score and a known price group\nconst rated = games.filter(d => d.user_score != null && d.price_band != null);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"const genre1 = view(Inputs.select([\"All genres\", ...mainGenres], {label: \"Genre\", value: \"All genres\"}));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$4b","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"const includeFree = view(Inputs.toggle({label: \"Free-to-play\", value: true}));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$4c","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"const c3 = view(Inputs.form({\n minGames: Inputs.range([5, 50], {step: 5, value: 15, label: \"Min. games/cell\"}),\n sortBy: Inputs.radio([\"Price lift\", \"Number of games\"], {label: \"Sort genres by\", value: \"Price lift\"})\n}));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$4d","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"const stat4 = view(Inputs.radio([\"Median\", \"Mean\"], {label: \"Summary\", value: \"Median\"}));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$4e","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"const genre5 = view(Inputs.select([\"All genres\", ...mainGenres], {label: \"Genre\", value: \"All genres\"}));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"const find5 = view(Inputs.text({label: \"Find a game\", placeholder: \"Type part of a name\"}));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$4f","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W50","stdlib":"2"}} 24:null