25:null 26:["$","title",null,{"children":"30 minute intervals | duhfatbiscuit | Observable"}] 2b: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(); }2c: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"]2d: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; }2e:T418,function initializeHashmap(input){ var players = new Map(); var firstSubmap = new Map(); var secondSubmap = new Map(); var thirdSubmap = new Map(); var fourthSubmap = new Map(); var fifthSubmap = new Map(); var sixthSubmap = new Map(); var seventhSubmap = new Map(); var eighthSubmap = new Map(); var ninthSubmap = new Map(); var otherSubmap = new Map(); players.set("1", firstSubmap); players.set("2", secondSubmap); players.set("3", thirdSubmap); players.set("4", fourthSubmap); players.set("5", fifthSubmap); players.set("6", sixthSubmap); players.set("7", seventhSubmap); players.set("8", eighthSubmap); players.set("9", ninthSubmap); players.set("10+", otherSubmap); for (var [key, value] of players) { value.set("0-30", 0); value.set("30-60", 0); value.set("60-90", 0); value.set("90-120", 0); value.set("120-150", 0); value.set("150-180", 0); value.set("180-210", 0); value.set("210-240", 0); value.set("240+", 0); } return players; }2f:T49f,function test(input){ var players = initializeHashmap(input); var mySet = new Set(); let i = 0; let count = 0; for(i = 0; i < input.length; i++){ if(input[i].minplayers == 0 || input[i].minplayers == null){ continue; } else if(input[i].minplayers == 1){ insertDataSubmaps15(i, input, players, "1"); }else if(input[i].minplayers == 2){ insertDataSubmaps15(i, input, players, "2"); }else if(input[i].minplayers == 3){ insertDataSubmaps15(i, input, players, "3"); }else if(input[i].minplayers == 4){ insertDataSubmaps15(i, input, players, "4"); }else if(input[i].minplayers == 5){ insertDataSubmaps15(i, input, players, "5"); }else if(input[i].minplayers == 6){ insertDataSubmaps15(i, input, players, "6"); }else if(input[i].minplayers == 7){ insertDataSubmaps15(i, input, players, "7"); }else if(input[i].minplayers == 8){ insertDataSubmaps15(i, input, players, "8"); }else if(input[i].minplayers == 9){ insertDataSubmaps15(i, input, players, "9"); }else{ insertDataSubmaps15(i, input, players, "10+"); } } return players; }30: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); } }31:T1d58,chart3 = { const svg = d3.select(DOM.svg(width, height)) .style("overflow", "visible"); var t = d3.transition() .duration(750) .ease(d3.easeLinear); const user_input_player = { "clicked": false, "num_players": null, "percent": null } const stackedbar = svg.append("g") .selectAll("g") .data(series) .enter().append("g") .attr("fill", d => color(d.key)) .classed("stacked_bar", true) .attr("class", d=> "b" + d.key.split("+").join("") + " stacked_bar") .attr("data-key", d=> d.key) .selectAll("rect") .data(d => d) .join("rect") .attr("x", d => x(d[0])) .attr("y", (d, i) => y(d.data.name)) .attr("width", d => x(d[1]) - x(d[0])) .attr("height", y.bandwidth()) .attr("data-person", (d, i) => i) .attr("data-percent", d => ((d[1] - d[0])*100).toFixed(2)+"%") .classed("stacked-rect", true) .style("cursor", "pointer") function mouseOutEvent() { if (!user_input_player['clicked']){ d3.selectAll(".percentage-line").remove(); d3.select(this).attr("stroke", "none"); d3.select("#tooltip").remove(); data.columns.slice(1).forEach(k => { d3.selectAll(`.b${k.split("+").join("")}`).attr("fill", color(k)).transition(t) }) d3.selectAll(".stacked-rect").attr("fill", null).transition(t) d3.selectAll(".stacked-rect").attr("fill-opacity", null).transition(t) d3.selectAll(".stacked_bar").attr("fill-opacity", null) } } stackedbar .on("mouseover", function (){ if (!user_input_player['clicked']){ // Get this bar's x/y values, then augment for the tooltip var xpos = parseFloat(d3.select(this).attr("x")); var ypos = parseFloat(d3.select(this).attr("y")); // Create the tooltip label as an SVG group with a text and a rect inside var tgrp = svg.append("g") .attr("id", "tooltip") // .attr("transform", (d, i) => `translate(${xpos},${ypos})`); tgrp.append("rect") .attr("width", "70px") .attr("height", "40px") .attr("fill", "#f2eff2") .attr("x", xpos + (parseInt(d3.select(this).attr("width"))/2) - 5) .attr("y", ypos-50) tgrp.append("text") .attr("x", xpos + (parseInt(d3.select(this).attr("width"))/2)) .attr("y", ypos-40) .attr("text-anchor", "left") .attr("font-family", "sans-serif") .attr("font-size", "13px") .attr("font-weight", "bold") .attr("fill", "black") .text(d3.select(this).attr("data-percent")); tgrp.append("text") .attr("x", xpos + (parseInt(d3.select(this).attr("width"))/2)) .attr("y", ypos-25) .attr("text-anchor", "left") .attr("font-family", "sans-serif") .attr("font-size", "13px") .attr("font-weight", "bold") .attr("fill", "black") .text(convertPlayerNum(d3.select(this).attr("data-person"))); svg.append('line') .attr("x1", parseFloat(d3.select(this).attr("x"))+ (parseInt(d3.select(this).attr("width"))/3)) .attr("y1", parseFloat(d3.select(this).attr("y"))) .attr("x2", xpos + (parseInt(d3.select(this).attr("width"))/2) - 5) .attr("y2", ypos-15) .style("stroke", "black") .classed("percentage-line", true) d3.selectAll(".stacked_bar").attr("fill-opacity", "0.2") d3.select(this).attr("fill", color(d3.select(this.parentNode).attr("data-key"))) d3.select(this).attr("fill-opacity", 1) } }) .on("click", function () { const clicked_player_num = d3.select(this).attr("data-person"); const clicked_time_percent = d3.select(this).attr("data-percent"); if (user_input_player['num_players'] == clicked_player_num && user_input_player['percent'] == clicked_time_percent){ user_input_player['clicked'] = false; user_input_player['num_players'] = null; user_input_player['percent'] = null; } else { user_input_player['clicked'] = true; user_input_player['num_players'] = clicked_player_num; user_input_player['percent'] = clicked_time_percent; /* Mouse Out Event */ d3.selectAll(".percentage-line").remove(); d3.select(this).attr("stroke", "none"); d3.select("#tooltip").remove(); data.columns.slice(1).forEach(k => { d3.selectAll(`.b${k.split("+").join("")}`).attr("fill", color(k)).transition(t) }) d3.selectAll(".stacked-rect").attr("fill", null).transition(t) d3.selectAll(".stacked-rect").attr("fill-opacity", null).transition(t) d3.selectAll(".stacked_bar").attr("fill-opacity", null) /* Mouse Over Event */ // Get this bar's x/y values, then augment for the tooltip var xpos = parseFloat(d3.select(this).attr("x")); var ypos = parseFloat(d3.select(this).attr("y")); // Create the tooltip label as an SVG group with a text and a rect inside var tgrp = svg.append("g") .attr("id", "tooltip") // .attr("transform", (d, i) => `translate(${xpos},${ypos})`); tgrp.append("rect") .attr("width", "70px") .attr("height", "40px") .attr("fill", "#f2eff2") .attr("x", xpos + (parseInt(d3.select(this).attr("width"))/2) - 5) .attr("y", ypos-50) tgrp.append("text") .attr("x", xpos + (parseInt(d3.select(this).attr("width"))/2)) .attr("y", ypos-40) .attr("text-anchor", "left") .attr("font-family", "sans-serif") .attr("font-size", "13px") .attr("font-weight", "bold") .attr("fill", "black") .text(d3.select(this).attr("data-percent")); tgrp.append("text") .attr("x", xpos + (parseInt(d3.select(this).attr("width"))/2)) .attr("y", ypos-25) .attr("text-anchor", "left") .attr("font-family", "sans-serif") .attr("font-size", "13px") .attr("font-weight", "bold") .attr("fill", "black") .text(convertPlayerNum(d3.select(this).attr("data-person"))); svg.append('line') .attr("x1", parseFloat(d3.select(this).attr("x"))+ (parseInt(d3.select(this).attr("width"))/3)) .attr("y1", parseFloat(d3.select(this).attr("y"))) .attr("x2", xpos + (parseInt(d3.select(this).attr("width"))/2) - 5) .attr("y2", ypos-15) .style("stroke", "black") .classed("percentage-line", true) d3.selectAll(".stacked_bar").attr("fill-opacity", "0.2") d3.select(this).attr("fill", color(d3.select(this.parentNode).attr("data-key"))) d3.select(this).attr("fill-opacity", 1) } console.log(user_input_player['clicked']); }) .on("mouseout", function () { mouseOutEvent() }) svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); var legend1 = svg.append("text") .text("% Games for Corresponding Min. Players") .attr("x", width*0.25) .attr("y", height*.08) .style("fill", "black") .style("font-weight", "bold") .style("font-size", "20px") var legend2 = svg.append("text") .text("Min. Number of Players") .attr("x", width*0.01) .attr("y", height*0.9) .style("fill", "black") .style("font-weight", "bold") .style("font-size", "20px") .attr("transform", `rotate(-90,${width*0.01}, ${height*0.9})`) return svg.node(); }32:[] 29:{"id":"ea35964298ae9365","slug":"30-minute-intervals/2","title":"30 minute intervals","thumbnail":"883de5e2df0836b2b9a4fe4daf0158f84c2d09ef8bceaa3594b2bcd3e8e51377","access_level":"public","create_time":"$D2019-05-04T16:59:44.337Z","update_time":"$D2019-05-04T17:10:03.942Z","view_time":null,"first_public_time":"$D2019-05-04T17:10:44.977Z","fork":{"id":"a18ea2ebc3466068","slug":"30-minute-intervals","title":"30 minute intervals","owner":{"id":"cd94045f8c13702c","login":"tigerlily-he","name":"Lily He"}},"stars":1,"starred":false,"owner":{"type":"team","id":"2f2e001a32e7feb8","login":"duhfatbiscuit","name":"","avatar_url":"https://avatars-next.observableusercontent.com/6efbe44cd708660e92347c0c21cf44ef5a24854894d36d41ad29543f4c95e28c","tier":"starter_2024"},"version":2220,"publish_version":2220,"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":0,"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":"$2b","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":"$2c","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":"$2d","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":"$2e","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":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1281,"value":"$30","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 * 90, 40))\n .style(\"font-size\", \"10px\")\n .style(\"margin-left\", `100px`)\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) + 165},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 svg.append(\"text\")\n .attr(\"x\", 80)\n .attr(\"y\", 20)\n .style(\"font-size\", \"14px\")\n .text(\"Min. Play Time (minutes)\");\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1701,"value":"$31","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: 100, right: 10, bottom: 0, left: 50})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1828,"value":"height = data.length * 45 + 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.interpolateGnBu(t * -0.6 + 0.9), 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"},{"id":2127,"value":"function convertPlayerNum(text){\n switch(text){\n case \"0\":\n return \"1 player\";\n break;\n case \"1\":\n return \"2 players\";\n break;\n case \"2\":\n return \"3 players\";\n break;\n case \"3\":\n return \"4 players\";\n break;\n case \"4\":\n return \"5 players\";\n break;\n case \"5\":\n return \"6 players\";\n break;\n case \"6\":\n return \"7 players\";\n break;\n case \"7\":\n return \"8 players\";\n break;\n case \"8\":\n return \"9 players\";\n break;\n case \"9\":\n return \"10+ players\";\n break;\n default:\n return \"-1\";\n break;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2134,"value":"width = 900","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2a:"$29:body"