2b:null 2c:["$","title",null,{"children":"30 minute interval | duhfatbiscuit | Observable"}] 31:Tb13,chart = { 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:Tc02,function insertDataSubmaps(i, input, map, amountOfPlayers){ if(input[i].minplaytime == 0 || input[i].minplaytime == null){ } else if(input[i].minplaytime >= 1 && input[i].minplaytime <= 14 ){ map.get(amountOfPlayers).set("0-15", map.get(amountOfPlayers).get("0-15") + 1); } else if(input[i].minplaytime >= 15 && input[i].minplaytime <= 29 ){ map.get(amountOfPlayers).set("15-30", map.get(amountOfPlayers).get("15-30") + 1); } else if(input[i].minplaytime >= 30 && input[i].minplaytime <= 44){ map.get(amountOfPlayers).set("30-45", map.get(amountOfPlayers).get("30-45") + 1); }else if(input[i].minplaytime >= 45 && input[i].minplaytime <= 59 ){ map.get(amountOfPlayers).set("45-60", map.get(amountOfPlayers).get("45-60") + 1); } else if(input[i].minplaytime >= 60 && input[i].minplaytime <= 74){ map.get(amountOfPlayers).set("60-75", map.get(amountOfPlayers).get("60-75") + 1); } else if(input[i].minplaytime >= 75 && input[i].minplaytime <= 89){ map.get(amountOfPlayers).set("75-90", map.get(amountOfPlayers).get("75-90") + 1); }else if(input[i].minplaytime >= 90 && input[i].minplaytime <= 104){ map.get(amountOfPlayers).set("90-105", map.get(amountOfPlayers).get("90-105") + 1); }else if(input[i].minplaytime >= 105 && input[i].minplaytime <= 119){ map.get(amountOfPlayers).set("105-120", map.get(amountOfPlayers).get("105-120") + 1); } else if(input[i].minplaytime >= 120 && input[i].minplaytime <= 134){ map.get(amountOfPlayers).set("120-135", map.get(amountOfPlayers).get("120-135") + 1); } else if(input[i].minplaytime >= 135 && input[i].minplaytime <= 149){ map.get(amountOfPlayers).set("135-150", map.get(amountOfPlayers).get("135-150") + 1); } else if(input[i].minplaytime >= 150 && input[i].minplaytime <= 164){ map.get(amountOfPlayers).set("150-165", map.get(amountOfPlayers).get("150-165") + 1); } else if(input[i].minplaytime >= 165 && input[i].minplaytime <= 179){ map.get(amountOfPlayers).set("165-180", map.get(amountOfPlayers).get("165-180") + 1); } else if(input[i].minplaytime >= 180 && input[i].minplaytime <= 194){ map.get(amountOfPlayers).set("180-195", map.get(amountOfPlayers).get("180-195") + 1); }else if(input[i].minplaytime >= 195 && input[i].minplaytime <= 209){ map.get(amountOfPlayers).set("195-210", map.get(amountOfPlayers).get("195-210") + 1); } else if(input[i].minplaytime >= 210 && input[i].minplaytime <= 224){ map.get(amountOfPlayers).set("210-225", map.get(amountOfPlayers).get("210-225") + 1); } else if(input[i].minplaytime >= 225 && input[i].minplaytime <= 239){ map.get(amountOfPlayers).set("225-240", map.get(amountOfPlayers).get("225-240") + 1); } else{ map.get(amountOfPlayers).set("240+", map.get(amountOfPlayers).get("240+") + 1); } }35:[] 2f:{"id":"c7be89de9cdd2671","slug":"a5-designing-the-perfect-board-game","title":"30 minute interval","thumbnail":"883de5e2df0836b2b9a4fe4daf0158f84c2d09ef8bceaa3594b2bcd3e8e51377","access_level":"public","create_time":"$D2019-04-21T08:12:00.748Z","update_time":"$D2019-04-28T04:50:55.421Z","view_time":null,"first_public_time":"$D2019-04-21T09:32:23.985Z","fork":{"id":"7aeac74520f760ef","slug":"a5-designing-the-perfect-board-game/2","title":"A5: Designing the Perfect Board Game","owner":{"id":"cd94045f8c13702c","login":"tigerlily-he","name":"Lily He"}},"stars":0,"starred":false,"owner":{"type":"team","id":"2f2e001a32e7feb8","login":"duhfatbiscuit","name":"","avatar_url":"https://avatars-next.observableusercontent.com/6efbe44cd708660e92347c0c21cf44ef5a24854894d36d41ad29543f4c95e28c","tier":"starter_2024"},"version":1736,"publish_version":1736,"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 interval","cells":[{"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":"data = 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":1281,"value":"$34","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 insertDataSubmaps(i, input, players, \"1\");\n \n \n }else if(input[i].minplayers == 2){\n insertDataSubmaps(i, input, players, \"2\");\n \n }else if(input[i].minplayers == 3){\n insertDataSubmaps(i, input, players, \"3\");\n }else if(input[i].minplayers == 4){\n insertDataSubmaps(i, input, players, \"4\");\n }else if(input[i].minplayers == 5){\n insertDataSubmaps(i, input, players, \"5\");\n }else{\n insertDataSubmaps(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":1235,"value":"mapdata = test(data);","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":1391,"value":"barchartOne = createBarGraph(data, mapdata, \"1\");","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":1331,"value":"barHeight = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1333,"value":"barWidth = 950","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1337,"value":"margin = ({top: 20, right: 200, bottom: 70, left: 20})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1339,"value":"barchartOneX = d3.scaleBand()\n .domain(barchartOne.map(d => d.letter))\n .range([margin.left, width - margin.right])\n .padding(0.1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1341,"value":"barchartOneY = d3.scaleLinear()\n .domain([0, 13058]).nice()\n .range([barHeight - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1344,"value":"barchartOneXaxis = g => g\n .attr(\"transform\", `rotate(45)`)\n .attr(\"transform\", `translate(0,${barHeight - margin.bottom})`)\n .call(d3.axisBottom(barchartOneX)\n .tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1347,"value":"barchartOneYaxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(barchartOneY))\n ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1349,"value":"function displayBarChartOne(input) {\n if(input == true){\n const svg = d3.select(DOM.svg(width, barHeight));\n \n svg.append(\"g\")\n .attr(\"fill\", \"steelblue\")\n .selectAll(\"rect\").data(barchartOne ).enter().append(\"rect\")\n .attr(\"x\", d => barchartOneX(d.letter))\n .attr(\"y\", d => barchartOneY(d.frequency))\n .attr(\"height\", d => barchartOneY(0) - barchartOneY(d.frequency))\n .attr(\"width\", barchartOneX.bandwidth())\n .on(\"mouseover\", function(d,i){\n $(this).attr(\"fill\", \"red\");\n })\n .on(\"mouseout\", function(d,i){\n $(this).attr(\"fill\", \"steelblue\");\n $(\"#tooltip\").css(\"opacity\", 0);\n }); \n \n svg.append(\"g\")\n .call(barchartOneXaxis )\t\t\t\n \n svg.append(\"g\")\n .call(barchartOneYaxis )\n \n return svg.node();\n }\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1561,"value":"md `### Barchart for One Player`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1355,"value":"displayBarChartOne(true);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1450,"value":"barchartTwo = createBarGraph(data, mapdata, \"2\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1474,"value":"barchartTwoX = d3.scaleBand()\n .domain(barchartTwo.map(d => d.letter))\n .range([margin.left, width - margin.right])\n .padding(0.1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1476,"value":"barchartTwoY = d3.scaleLinear()\n .domain([0, 13058]).nice()\n .range([barHeight - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1478,"value":"barchartTwoXaxis = g => g\n .attr(\"transform\", `rotate(45)`)\n .attr(\"transform\", `translate(0,${barHeight - margin.bottom})`)\n .call(d3.axisBottom(barchartTwoX)\n .tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1480,"value":"barchartTwoYaxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(barchartTwoY))\n .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1486,"value":"function displayBarChartTwo(input) {\n if(input == true){\n const svg = d3.select(DOM.svg(width, barHeight));\n \n svg.append(\"g\")\n .attr(\"fill\", \"steelblue\")\n .selectAll(\"rect\").data(barchartTwo ).enter().append(\"rect\")\n .attr(\"x\", d => barchartTwoX(d.letter))\n .attr(\"y\", d => barchartTwoY(d.frequency))\n .attr(\"height\", d => barchartTwoY(0) - barchartTwoY(d.frequency))\n .attr(\"width\", barchartTwoX.bandwidth())\n .on(\"mouseover\", function(d,i){\n $(this).attr(\"fill\", \"red\");\n })\n .on(\"mouseout\", function(d,i){\n $(this).attr(\"fill\", \"steelblue\");\n $(\"#tooltip\").css(\"opacity\", 0);\n }); \n \n svg.append(\"g\")\n .call(barchartTwoXaxis )\t\t\t\n \n svg.append(\"g\")\n .call(barchartTwoYaxis )\n \n return svg.node();\n }\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1563,"value":"md `### Barchart for Two Players`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1491,"value":"displayBarChartTwo(true);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1494,"value":"barchartThree = createBarGraph(data, mapdata, \"3\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1495,"value":"barchartThreeX = d3.scaleBand()\n .domain(barchartThree.map(d => d.letter))\n .range([margin.left, width - margin.right])\n .padding(0.1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1498,"value":"barchartThreeY = d3.scaleLinear()\n .domain([0, 13058]).nice()\n .range([barHeight - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1500,"value":"barchartThreeXaxis = g => g\n .attr(\"transform\", `rotate(45)`)\n .attr(\"transform\", `translate(0,${barHeight - margin.bottom})`)\n .call(d3.axisBottom(barchartThreeX)\n .tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1502,"value":"barchartThreeYaxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(barchartThreeY))\n .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1504,"value":"function displayBarChartThree(input) {\n if(input == true){\n const svg = d3.select(DOM.svg(width, barHeight));\n \n svg.append(\"g\")\n .attr(\"fill\", \"steelblue\")\n .selectAll(\"rect\").data(barchartThree ).enter().append(\"rect\")\n .attr(\"x\", d => barchartThreeX(d.letter))\n .attr(\"y\", d => barchartThreeY(d.frequency))\n .attr(\"height\", d => barchartOneY(0) - barchartThreeY(d.frequency))\n .attr(\"width\", barchartThreeX.bandwidth())\n .on(\"mouseover\", function(d,i){\n $(this).attr(\"fill\", \"yellow\");\n })\n .on(\"mouseout\", function(d,i){\n $(this).attr(\"fill\", \"steelblue\");\n $(\"#tooltip\").css(\"opacity\", 0);\n }); \n \n svg.append(\"g\")\n .call(barchartThreeXaxis )\t\t\t\n \n svg.append(\"g\")\n .call(barchartThreeYaxis )\n \n return svg.node();\n }\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1565,"value":"md `### Barchart for Three Players`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1506,"value":"displayBarChartThree(true);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1508,"value":"barchartFour = createBarGraph(data, mapdata, \"4\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1510,"value":"barchartFourX = d3.scaleBand()\n .domain(barchartFour.map(d => d.letter))\n .range([margin.left, width - margin.right])\n .padding(0.1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1513,"value":"barchartFourY = d3.scaleLinear()\n .domain([0, 13058]).nice()\n .range([barHeight - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1515,"value":"barchartFourXaxis = g => g\n .attr(\"transform\", `rotate(45)`)\n .attr(\"transform\", `translate(0,${barHeight - margin.bottom})`)\n .call(d3.axisBottom(barchartFourX)\n .tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1517,"value":"barchartFourYaxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(barchartFourY))\n .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1519,"value":"function displayBarChartFour(input) {\n if(input == true){\n const svg = d3.select(DOM.svg(width, barHeight));\n \n svg.append(\"g\")\n .attr(\"fill\", \"steelblue\")\n .selectAll(\"rect\").data(barchartFour ).enter().append(\"rect\")\n .attr(\"x\", d => barchartFourX(d.letter))\n .attr(\"y\", d => barchartFourY(d.frequency))\n .attr(\"height\", d => barchartFourY(0) - barchartFourY(d.frequency))\n .attr(\"width\", barchartFourX.bandwidth())\n .on(\"mouseover\", function(d,i){\n $(this).attr(\"fill\", \"red\");\n })\n .on(\"mouseout\", function(d,i){\n $(this).attr(\"fill\", \"steelblue\");\n $(\"#tooltip\").css(\"opacity\", 0);\n }); \n \n svg.append(\"g\")\n .call(barchartFourXaxis )\t\t\t\n \n svg.append(\"g\")\n .call(barchartFourYaxis )\n \n return svg.node();\n }\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1567,"value":"md `### Barchart for Four Players`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1521,"value":"displayBarChartFour(true);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1524,"value":"barchartFive = createBarGraph(data, mapdata, \"5\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1528,"value":"barchartFiveX = d3.scaleBand()\n .domain(barchartFive.map(d => d.letter))\n .range([margin.left, width - margin.right])\n .padding(0.1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1530,"value":"barchartFiveY = d3.scaleLinear()\n .domain([0, 13058]).nice()\n .range([barHeight - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1532,"value":"barchartFiveXaxis = g => g\n .attr(\"transform\", `rotate(45)`)\n .attr(\"transform\", `translate(0,${barHeight - margin.bottom})`)\n .call(d3.axisBottom(barchartFiveX)\n .tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1535,"value":"barchartFiveYaxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(barchartFiveY))\n .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1537,"value":"function displayBarChartFive(input) {\n if(input == true){\n const svg = d3.select(DOM.svg(width, barHeight));\n \n svg.append(\"g\")\n .attr(\"fill\", \"steelblue\")\n .selectAll(\"rect\").data(barchartFive).enter().append(\"rect\")\n .attr(\"x\", d => barchartFiveX(d.letter))\n .attr(\"y\", d => barchartFiveY(d.frequency))\n .attr(\"height\", d => barchartFiveY(0) - barchartFiveY(d.frequency))\n .attr(\"width\", barchartFiveX.bandwidth())\n .on(\"mouseover\", function(d,i){\n $(this).attr(\"fill\", \"red\");\n })\n .on(\"mouseout\", function(d,i){\n $(this).attr(\"fill\", \"steelblue\");\n $(\"#tooltip\").css(\"opacity\", 0);\n }); \n \n svg.append(\"g\")\n .call(barchartFiveXaxis )\t\t\t\n \n svg.append(\"g\")\n .call(barchartFiveYaxis )\n \n return svg.node();\n }\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1569,"value":"md `### Barchart for Five Players`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1540,"value":"displayBarChartFive(true);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1543,"value":"barchartFivePlus = createBarGraph(data, mapdata, \"5+\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1545,"value":"barchartFivePlusX = d3.scaleBand()\n .domain(barchartFivePlus.map(d => d.letter))\n .range([margin.left, width - margin.right])\n .padding(0.1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1547,"value":"barchartFivePlusY = d3.scaleLinear()\n .domain([0, 13058]).nice()\n .range([barHeight - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1549,"value":"barchartFivePlusXaxis = g => g\n .attr(\"transform\", `rotate(45)`)\n .attr(\"transform\", `translate(0,${barHeight - margin.bottom})`)\n .call(d3.axisBottom(barchartFivePlusX)\n .tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1552,"value":"barchartFivePlusYaxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(barchartFivePlusY))\n .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1556,"value":"function displayBarChartFivePlus(input) {\n if(input == true){\n const svg = d3.select(DOM.svg(width, barHeight));\n \n svg.append(\"g\")\n .attr(\"fill\", \"steelblue\")\n .selectAll(\"rect\").data(barchartFivePlus ).enter().append(\"rect\")\n .attr(\"x\", d => barchartFivePlusX(d.letter))\n .attr(\"y\", d => barchartFivePlusY(d.frequency))\n .attr(\"height\", d => barchartFivePlusY(0) - barchartFivePlusY(d.frequency))\n .attr(\"width\", barchartFivePlusX.bandwidth())\n .on(\"mouseover\", function(d,i){\n $(this).attr(\"fill\", \"red\");\n })\n .on(\"mouseout\", function(d,i){\n $(this).attr(\"fill\", \"steelblue\");\n $(\"#tooltip\").css(\"opacity\", 0);\n }); \n \n svg.append(\"g\")\n .call(barchartFivePlusXaxis )\t\t\t\n \n svg.append(\"g\")\n .call(barchartFivePlusYaxis )\n \n return svg.node();\n }\n \n}","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":1558,"value":"displayBarChartFivePlus(true);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1576,"value":"viewof num_players = slider({\n min: 1, \n max: 5, \n step: 1, \n value: 2, \n title: \"Number of Players\", \n description: \"Participants in the board game\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1582,"value":"players_graph = {\n \n switch(num_players){\n case 1:\n return displayBarChartOne(true);\n break;\n case 2:\n return displayBarChartTwo(true);\n break;\n case 3:\n return displayBarChartThree(true);\n break;\n case 4:\n return displayBarChartFour(true);\n break\n case 5:\n return displayBarChartFivePlus(true);\n break;\n default:\n }\n}","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":1625,"value":"legend = {\n const svg = d3.select(DOM.svg(series.length * 36, 40))\n .style(\"font\", \"10px sans-serif\")\n .style(\"margin-left\", `${margin.left}px`)\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 * 36},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":"stackedChart = {\n const svg = d3.select(DOM.svg(width, stackedHeight))\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(stackedXaxis);\n\n svg.append(\"g\")\n .call(stackedYaxis);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1679,"value":"stackedData = (await d3.csv(\"https://gist.githubusercontent.com/mbostock/5429c74d6aba68c52c7b39642c98deed/raw/50a5157a1d920191b0a7f636796ee721047cbb92/us-population-state-age.csv\", (d, i, columns) => (d3.autoType(d), d.total = d3.sum(columns, c => d[c]), d))).sort((a, b) => b[\"<10\"] / b.total - a[\"<10\"] / a.total)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1682,"value":"series = d3.stack()\n .keys(stackedData.columns.slice(1))\n .offset(d3.stackOffsetExpand)\n (stackedData)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1719,"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":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"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"