2b:null 2c:["$","title",null,{"children":"30 minute intervals | duhfatbiscuit | Observable"}] 31:Tb18,graphChart = { const user_input = { "category": null } const svg = d3.select(DOM.svg(graphWidth, graphWidth+50)); const category = svg.selectAll("g") .data(game_categories) .enter() .append("g") const category_dots = category.append("circle") .merge(category) .attr("r", 2.5) .attr("cx", function(d) { return d.x }) .attr("cy", function(d) { return d.y ; }) .attr("r", 3) .attr("id", d => d.name.replace(/['"&]+/g, '').split(" ").join("_").split("/").join("_") + "_dot") .attr("class", "dot") function draw_connectors(current, category_name){ category.append("path") .merge(category) .datum([ {x: game_categories[order_of_categories_array.indexOf(category_name)]['x'], y: game_categories[order_of_categories_array.indexOf(category_name)]['y']}, {x: game_categories[order_of_categories_array.indexOf(current)]['x'], y: game_categories[order_of_categories_array.indexOf(current)]['y']} ]) .attr("class", "line") .style("stroke", d3.interpolateGreens(0.5)) .attr("d", d3.line() .curve(d3.curveLinear) .x(function(d) { return d.x; }) .y(function(d) { return d.y; }) ) .attr("stroke-width", 2) d3.selectAll(`#${category_name.replace(/['"&]+/g, '').split(" ").join("_").split("/").join("_")}_dot`).attr("fill", "green"); d3.selectAll(`#${category_name.replace(/['"&]+/g, '').split(" ").join("_").split("/").join("_")}`).attr("fill", "green").attr("font-weight", "bold"); } const category_label = category.append("text") .attr("y", d => d.y) .attr("x", d=> d.x) .attr('text-anchor', d=> d.textanchor) .attr("class", "myLabel") .attr("transform", d=> d.rot) .text(d => d['name']) .style("cursor", "pointer") .attr("id", d => d.name.replace(/['"&]+/g, '').split(" ").join("_").split("/").join("_")) .on("mousedown", function (d) { d3.selectAll(".dot").attr("fill", "black"); d3.selectAll(".line").remove(); d3.selectAll("text") .attr("font-weight", "normal"); if (d3.select(this).attr("fill") == "blue"){ d3.selectAll("text") .attr("fill", "black"); user_input.category = null; } else { d3.selectAll("text").attr("fill", "#ababab"); d3.select(this) .attr("fill", "blue") .attr("font-weight", "bold"); user_input.category = d3.select(this).text(); console.log(categories_circle.get(user_input.category)); categories_circle.get(user_input.category).forEach((value, key, map) =>{ if (value > 100){ draw_connectors(user_input.category, key); } }) } }) return svg.node(); }32:T50d,order_of_categories_array = ["Economic", "Negotiation", "Political","Dice", "Puzzle", "Deduction", "Action / Dexterity", "Abstract Strategy", "Memory", "Number", "Math", "Card Game", "Educational", "Children's Game", "Racing", "Trivia", "Movies / TV / Radio theme", "Novel-based", "Book", "Video Game Theme", "Word Game", "Collectible Components", "Print & Play", "Electronic", "Animals","Humor", "Science Fiction", "Party Game", "Environmental", "Sports", "Murder/Mystery", "Mafia", "Fantasy", "Trains", "Transportation", "Travel", "Adventure", "Religious", "Bluffing", "Miniatures", "Ancient", "Civilization", "Industry / Manufacturing", "Exploration", "Mature / Adult", "Zombies", "Pirates", "Space Exploration", "Horror", "Real-time", "City Building", "Maze", "Medical", "Game System", "Arabian", "Prehistoric", "Comic Book / Strip", "Music", "Farming", "Fan Expansion", "Medieval", "Nautical", "Mythology", "Renaissance", "Fighting", "Territory Building", "American West", "Pike and Shot", "Spies/Secret Agents", "Aviation / Flight", "Wargame", "American Revolutionary War", "Civil War", "Age of Reason", "American Civil War", "American Indian Wars", "Napoleonic", "Post-Napoleonic", "World War I", "World War II", "Vietnam War", "Korean War", "Modern Warfare", "Expansion for Base-game"]33:T598,game_categories = { const c = [] const total_count = order_of_categories.length; const angle = Math.PI * 2/ total_count; const angle_degrees = 360/total_count; const center_x = 500; const center_y = 500; const r = 290; order_of_categories.forEach(function (value, i) { c.push(value) c[i]['x'] = center_x +(r*Math.cos(i *angle)); c[i]['y'] = center_y - (r*Math.sin(i *angle)); if (Math.cos(i*angle) < 0){ if (Math.sin(i*angle) > 0.55){ c[i]['rot'] = `translate (-5, -5) rotate(${180- (i*angle_degrees)} ${c[i]['x']} ${c[i]['y']})`; } else if (Math.sin(i*angle) < -0.55) { c[i]['rot'] = `translate (0, 10) rotate(${180- (i*angle_degrees)} ${c[i]['x']} ${c[i]['y']})`; } else { c[i]['rot'] = `translate (-10, 5) rotate(${180- (i*angle_degrees)} ${c[i]['x']} ${c[i]['y']})`; } c[i]['textanchor'] = "end"; } else { if (Math.sin(i*angle) > 0.55){ c[i]['rot'] = `translate (5, -5) rotate(${360- (i*angle_degrees)} ${c[i]['x']} ${c[i]['y']})`; } else if (Math.sin(i*angle) < -0.55) { c[i]['rot'] = `translate (-5, 10) rotate(${360- (i*angle_degrees)} ${c[i]['x']} ${c[i]['y']})`; } else { c[i]['rot'] = `translate (10, 5) rotate(${360- (i*angle_degrees)} ${c[i]['x']} ${c[i]['y']})`; } c[i]['textanchor'] = "start"; } }); return c; }34:T698,function insertDataSubmaps15(i, input, map, amountOfPlayers){ if(input[i].minplaytime == 0 || input[i].minplaytime == null){ } else if(input[i].minplaytime >= 1 && input[i].minplaytime <= 29 ){ map.get(amountOfPlayers).set("0-30", map.get(amountOfPlayers).get("0-30") + 1); } else if(input[i].minplaytime >= 30 && input[i].minplaytime <= 59){ map.get(amountOfPlayers).set("30-60", map.get(amountOfPlayers).get("30-60") + 1); } else if(input[i].minplaytime >= 60 && input[i].minplaytime <= 89){ map.get(amountOfPlayers).set("60-90", map.get(amountOfPlayers).get("60-90") + 1); }else if(input[i].minplaytime >= 90 && input[i].minplaytime <= 119){ map.get(amountOfPlayers).set("90-120", map.get(amountOfPlayers).get("90-120") + 1); } else if(input[i].minplaytime >= 120 && input[i].minplaytime <= 149){ map.get(amountOfPlayers).set("120-150", map.get(amountOfPlayers).get("120-150") + 1); } else if(input[i].minplaytime >= 150 && input[i].minplaytime <= 179){ map.get(amountOfPlayers).set("150-180", map.get(amountOfPlayers).get("150-180") + 1); } else if(input[i].minplaytime >= 180 && input[i].minplaytime <= 209){ map.get(amountOfPlayers).set("180-210", map.get(amountOfPlayers).get("180-210") + 1); } else if(input[i].minplaytime >= 210 && input[i].minplaytime <= 239){ map.get(amountOfPlayers).set("210-240", map.get(amountOfPlayers).get("210-240") + 1); } else{ map.get(amountOfPlayers).set("240+", map.get(amountOfPlayers).get("240+") + 1); } }35:[] 2f:{"id":"2330090a1f34266d","slug":"30-minute-intervals","title":"30 minute intervals","thumbnail":"883de5e2df0836b2b9a4fe4daf0158f84c2d09ef8bceaa3594b2bcd3e8e51377","access_level":"public","create_time":"$D2019-04-28T04:51:06.014Z","update_time":"$D2019-04-28T05:41:06.731Z","view_time":null,"first_public_time":"$D2019-04-28T05:23:22.291Z","fork":{"id":"4f6cbb8aba031e32","slug":"15-minute-intervals","title":"15 minute intervals","owner":{"id":"2f2e001a32e7feb8","login":"duhfatbiscuit","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"2f2e001a32e7feb8","login":"duhfatbiscuit","name":"","avatar_url":"https://avatars-next.observableusercontent.com/6efbe44cd708660e92347c0c21cf44ef5a24854894d36d41ad29543f4c95e28c","tier":"starter_2024"},"version":1946,"publish_version":1946,"role":null,"authored":false,"authors":[{"type":"individual","id":"bec1adae79aca656","login":"duhfatbiscuit","name":"","avatar_url":"https://avatars-next.observableusercontent.com/6efbe44cd708660e92347c0c21cf44ef5a24854894d36d41ad29543f4c95e28c","tier":null}],"members":[{"type":"individual","id":"bec1adae79aca656","login":"duhfatbiscuit","name":"","avatar_url":"https://avatars-next.observableusercontent.com/6efbe44cd708660e92347c0c21cf44ef5a24854894d36d41ad29543f4c95e28c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"30 minute intervals","cells":[{"id":1877,"value":"md`# 30 minute intervals`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"md`# A5: Designing the Perfect Board Game`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"md `## Chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1186,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"graphWidth = 1200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"radius = width / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"line = d3.radialLine()\n .curve(d3.curveBundle.beta(0.85))\n .radius(d => d.y)\n .angle(d => d.x)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":838,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"md `## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"dataOfficial = d3.csv(\"https://raw.githubusercontent.com/dvatvani/dvatvani.github.io/master/static/BGG-analysis/scraper_and_data/games_Jan2018.csv\", d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"\nfunction createStructure(input){\n var graphMap = new Map();\n let i = 0;\n for(i = 0; i < input.length; i++){\n \n if(input[i].categories == null){\n continue; \n }\n var categoryArr = input[i].categories.split(\",\");\n var arrLength = categoryArr.length;\n let j = 0;\n for(j = 0; j < arrLength; j++){\n let k = 0;\n var subMap = new Map();\n if(!graphMap.has(categoryArr[j])){\n graphMap.set(categoryArr[j], subMap);\n \n }\n for(k = 0; k < arrLength; k++){\n if(j == k){\n continue;\n }\n \n if(!graphMap.get(categoryArr[j]).has(categoryArr[k])){\n graphMap.get(categoryArr[j]).set(categoryArr[k], 1);\n }else{\n graphMap.get(categoryArr[j]).set(categoryArr[k], graphMap.get(categoryArr[j]).get(categoryArr[k]) + 1);\n }\n }\n \n }\n \n }\n return graphMap;\n\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":" categories_circle = createStructure(data);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":950,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":965,"value":"order_of_categories = order_of_categories_array.map(x => { return {\"name\": x}})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":972,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1228,"value":"md `## Amount of Players`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1264,"value":"function initializeHashmap(input){\n var players = new Map();\n var firstSubmap = new Map();\n var secondSubmap = new Map();\n var thirdSubmap = new Map();\n var fourthSubmap = new Map();\n var fifthSubmap = new Map();\n var otherSubmap = new Map();\n players.set(\"1\", firstSubmap);\n players.set(\"2\", secondSubmap);\n players.set(\"3\", thirdSubmap);\n players.set(\"4\", fourthSubmap);\n players.set(\"5\", fifthSubmap);\n players.set(\"5+\", otherSubmap);\n\n for (var [key, value] of players) {\n value.set(\"0-30\", 0);\n\n value.set(\"30-60\", 0);\n\n value.set(\"60-90\", 0);\n\n value.set(\"90-120\", 0);\n\n value.set(\"120-150\", 0);\n\n value.set(\"150-180\", 0);\n\n value.set(\"180-210\", 0);\n\n value.set(\"210-240\", 0);\n value.set(\"240+\", 0);\n\n }\n return players;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1278,"value":"initializeHashmap(data);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1230,"value":"function test(input){\n var players = initializeHashmap(input);\n var mySet = new Set();\n let i = 0;\n let count = 0;\n for(i = 0; i < input.length; i++){\n \n if(input[i].minplayers == 0 || input[i].minplayers == null){\n continue;\n } else if(input[i].minplayers == 1){\n insertDataSubmaps15(i, input, players, \"1\");\n \n \n }else if(input[i].minplayers == 2){\n insertDataSubmaps15(i, input, players, \"2\");\n \n }else if(input[i].minplayers == 3){\n insertDataSubmaps15(i, input, players, \"3\");\n }else if(input[i].minplayers == 4){\n insertDataSubmaps15(i, input, players, \"4\");\n }else if(input[i].minplayers == 5){\n insertDataSubmaps15(i, input, players, \"5\");\n }else{\n insertDataSubmaps15(i, input, players, \"5+\");\n }\n \n }\n return players;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1281,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1235,"value":"mapdata = test(dataOfficial);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1320,"value":"md `## Bar Charts`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1387,"value":"function createBarGraph(data, map, index){\n let container = []\n let i = 0 ;\n for (var [key, value] of map.get(index)) {\n let subcontainer = {};\n \n subcontainer[\"letter\"] = key;\n \n subcontainer[\"frequency\"]= value;\n i++;\n \n container.push(subcontainer);\n }\n return container;\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1351,"value":"$$ = require(\"jquery\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1571,"value":"md `### Barchart for FivePlus Players`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1622,"value":"md`# Stacked Normalized Horizontal Bar Chart`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1861,"value":"function createArr(map){\n let container = [];\n let columnDivision = [\"-10-0\", \"0-30\",\"30-60\" , \"60-90\",\"90-120\", \"120-150\", \"150-180\", \"180-210\", \"210-240\", \"240+\"];\n\n for (var [key, value] of map) {\n let obj = {};\n let count = 0;\n obj[\"name\"] = key;\n for (var [subKey, subValue] of value) {\n count += subValue;\n obj[subKey] = subValue;\n }\n obj[\"total\"] = count;\n container.push(obj);\n }\n\n container[\"columns\"]= columnDivision;\n \n return container;\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1863,"value":"createArr(mapdata);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1625,"value":"legend = {\n const svg = d3.select(DOM.svg(series.length * 70, 40))\n .style(\"font\", \"10px sans-serif\")\n .style(\"margin-left\", `250px`)\n .style(\"display\", \"block\")\n .attr(\"text-anchor\", \"middle\")\n\n const g = svg.append(\"g\")\n .selectAll(\"g\")\n .data(series)\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(${i * 55},0)`);\n\n g.append(\"rect\")\n .attr(\"width\", 36)\n .attr(\"height\", 25)\n .attr(\"fill\", d => color(d.key));\n\n g.append(\"text\")\n .attr(\"x\", 18)\n .attr(\"y\", 32)\n .attr(\"dy\", \"0.35em\")\n .text(d => d.key);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1701,"value":"chart = {\n const svg = d3.select(DOM.svg(width, height))\n .style(\"overflow\", \"visible\");\n\n svg.append(\"g\")\n .selectAll(\"g\")\n .data(series)\n .enter().append(\"g\")\n .attr(\"fill\", d => color(d.key))\n .selectAll(\"rect\")\n .data(d => d)\n .join(\"rect\")\n .attr(\"x\", d => x(d[0]))\n .attr(\"y\", (d, i) => y(d.data.name))\n .attr(\"width\", d => x(d[1]) - x(d[0]))\n .attr(\"height\", y.bandwidth());\n\n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1679,"value":"function createStacked(){\n let container = []\n let i = 0 ;\n let temp = \"UT\";\n for(i = 0; i< 10; i++){\n let subcontainer = {};\n \n subcontainer[\"name\"] = temp;\n temp += \"a\";\n \n subcontainer[\"<10\"]= 10;\n subcontainer[\"10-19\"]= 20;\n subcontainer[\"20-29\"]= 30;\n subcontainer[\"30-39\"]= 40;\n subcontainer[\"40-49\"]= 50;\n subcontainer[\"50-59\"]= 60;\n subcontainer[\"60-69\"]= 70;\n subcontainer[\"70-79\"]= 10;\n subcontainer[\"80-89\"]= 10;\n subcontainer[\"90-99\"]= 10;\n subcontainer[\"100-109\"]= 50;\n subcontainer[\"total\"]= 370;\n \n\n \n container.push(subcontainer);\n }\n\ncontainer[\"columns\"] = [\"name\", \"<10\", \"10-19\", \"20-29\", \"30-39\", \"40-49\", \"50-59\", \"60-69\", \"70-79\", \"80-89\", \"90-99\", \"100-109\"];\n\n return container;\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1848,"value":"data = createArr(mapdata);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1721,"value":"x = d3.scaleLinear()\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1723,"value":"y = d3.scaleBand()\n .domain(data.map(d => d.name))\n .range([margin.top, height - margin.bottom])\n .padding(0.1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1826,"value":"margin = ({top: 30, right: 10, bottom: 0, left: 30})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1828,"value":"height = data.length * 25 + margin.top + margin.bottom;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1830,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).tickSizeOuter(0))\n .call(g => g.selectAll(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1855,"value":"series = d3.stack()\n .keys(data.columns.slice(1))\n .offset(d3.stackOffsetExpand)\n (data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1857,"value":"color = d3.scaleOrdinal()\n .domain(series.map(d => d.key))\n .range(d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), series.length).reverse())\n .unknown(\"#ccc\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1832,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${margin.top})`)\n .call(d3.axisTop(x).ticks(width / 100, \"%\"))\n .call(g => g.selectAll(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"