2d:null 2e:["$","title",null,{"children":"Online Judge/ Computer Programming/ Clarity Of Statements | Jyoti Sunkara | Observable"}] 33:T965,chart = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height + 20]); const subgroup = svg .selectAll(".subgroup") .data(data) .join("g") .attr("class", "subgroup") .attr("fill", (d, i) => color(i)); const rect = subgroup .selectAll("rect") .data(d => d) .join("rect") .attr("x", (d, i) => x(i)) .attr("y", height - margin.bottom) .attr("width", x.bandwidth()) .attr("height", 0); subgroup.on("mouseenter", function() { svg .selectAll(".subgroup") .transition() .style("fill-opacity", 0.15); d3.select(this) .transition() .style("fill-opacity", 1); }); subgroup.on("mouseleave", function() { svg .selectAll(".subgroup") .transition() .style("fill-opacity", 1); }); svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .style("font-size", "13px") .attr("class", "x-axis") .call(xAxis); setTimeout(() => { svg.selectAll(".x-axis .tick text") .call(wrap, x.bandwidth(), 0) }, 0); const yAxisContainer = svg .append("g") .attr("transform", `translate(${margin.left},0)`) .style("font-size", "13px") .call(yAxis); svg .append("g") .attr("transform", `translate(${width + margin.left - 195},0)`) .call(legendChart); function transitionGrouped() { y.domain([0, groupedMax]); yAxisContainer .transition() .duration(500) .delay(500) .call(yAxis); rect .transition() .duration(500) .delay((d, i) => i * 20) .attr("x", (d, i) => x(i) + (x.bandwidth() / subgroups.length) * d[2]) .attr("width", x.bandwidth() / subgroups.length) .transition() .attr("y", d => y(d[1] - d[0])) .attr("height", d => y(0) - y(d[1] - d[0])); } function transitionStacked() { y.domain([0, stackedMax]); yAxisContainer .transition() .duration(500) .call(yAxis); rect .transition() .duration(500) .delay((d, i) => i * 20) .attr("y", d => y(d[1])) .attr("height", d => y(d[0]) - y(d[1])) .transition() .attr("x", (d, i) => x(i)) .attr("width", x.bandwidth()); } function update(layout) { if (layout === "stacked") transitionStacked(); else transitionGrouped(); } return Object.assign(svg.node(), { update }); }34:T97d,filetedData = { let categories = { "Take part in contests on platforms like Codeforces, Codechef etc. regularly": 0, "Have accounts on some platforms and solve problems occasionally": 0, "Minimal experience with competitive programming on other platforms": 0 } for(var k = 0; k < csv.length; k++) { switch(csv[k]["How much have you practiced on other platforms this semester?"]){ case "Take part in contests on platforms like Codeforces, Codechef etc. regularly": { categories["Take part in contests on platforms like Codeforces, Codechef etc. regularly"]++; break; } case "Have accounts on some platforms and solve problems occasionally": { categories["Have accounts on some platforms and solve problems occasionally"]++; break; } case "Minimal experience with competitive programming on other platforms": { categories["Minimal experience with competitive programming on other platforms"]++; break; } } } let data = [] for(var i = 0; i < groups.length; i++) { var entry = { "How much have you practiced on other platforms this semester?": groups[i], "1": 0, "2": 0, "3": 0, "4": 0, "5": 0 } for(var j = 0; j < csv.length; j++) { if(csv[j]["How much have you practiced on other platforms this semester?"] == groups[i]) { switch(csv[j]["Clarity of statement"]) { case 2: { entry["2"]++; break; } case 3: { entry["3"]++; break; } case 1: { entry["1"]++ break; } case 4: { entry["4"]++ break; } case 5: { entry["5"]++ break; } } } } // entry["1"] /= sum * (1/100); // entry["2"] /= sum * (1/100); // entry["3"] /= sum * (1/100); // entry["4"] /= sum * (1/100); // entry["5"] /= sum * (1/100); entry["1"] /= categories[groups[i]]; entry["2"] /= categories[groups[i]]; entry["3"] /= categories[groups[i]]; entry["4"] /= categories[groups[i]]; entry["5"] /= categories[groups[i]]; data.push(entry) } return data; }35:[{"id":"4a9303a5b812d63d47d41519b9288a6eff9b236ead57fe6fe134eeca3dd03750ecea096858c73670b94685d903b59ae3b4ba558906fcfa3144c3839add251c11","href":"https://static.observableusercontent.com/files/4a9303a5b812d63d47d41519b9288a6eff9b236ead57fe6fe134eeca3dd03750ecea096858c73670b94685d903b59ae3b4ba558906fcfa3144c3839add251c11","name":"OJ.csv","type":"text/csv","lastModified":1595590813672.483,"size":62557}] 31:{"id":"90f98b38b3a065b0","slug":"stacked-bars","title":"Online Judge/ Computer Programming/ Clarity Of Statements","thumbnail":"40ba18608750ce83b5575ea3e431918385e8121c678576450439a0d6f35bdbd0","access_level":"public","create_time":"$D2020-07-24T11:39:13.003Z","update_time":"$D2020-07-30T13:19:33.464Z","view_time":null,"first_public_time":"$D2020-07-24T13:11:36.568Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"ada962c783485a41","login":"jyotisunkara","name":"Jyoti Sunkara","avatar_url":"https://avatars-next.observableusercontent.com/1a4924e14955570a65d952632deaf2ed48f252f8bc538219f6e8a793ea22664f","tier":"starter_2024"},"version":370,"publish_version":370,"role":null,"authored":false,"authors":[{"type":"individual","id":"88c1466c252b64df","login":"jyotisunkara","name":"Jyoti Sunkara","avatar_url":"https://avatars-next.observableusercontent.com/1a4924e14955570a65d952632deaf2ed48f252f8bc538219f6e8a793ea22664f","tier":null}],"members":[{"type":"individual","id":"88c1466c252b64df","login":"jyotisunkara","name":"Jyoti Sunkara","avatar_url":"https://avatars-next.observableusercontent.com/1a4924e14955570a65d952632deaf2ed48f252f8bc538219f6e8a793ea22664f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"11fdfebcd23be66b","slug":"online-judge","title":"Online Judge","owner":{"id":"ada962c783485a41","login":"jyotisunkara","name":"Jyoti Sunkara"}},"type":"notebook","body":{"title":"Online Judge/ Computer Programming/ Clarity Of Statements","cells":[{"id":0,"value":"md`# Online Judge/ Computer Programming/ Clarity Of Statements`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"md`### Clarity Of Problem Statements`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"viewof layout = {\n const form = html``;\n form.oninput = () => form.value = form.radio.value;\n form.onchange = () => { // Safari…\n form.value = form.radio.value;\n form.dispatchEvent(new CustomEvent(\"input\"));\n };\n form.value = form.radio.value;\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"chart.update(layout)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"function wrap(text, wrapWidth, yAxisAdjustment = 0) {\n text.each(function() {\n var text = d3.select(this),\n words = text.text().split(/\\s+/).reverse(),\n word,\n line = [],\n lineNumber = 0,\n lineHeight = 1.1, // ems\n y = text.attr(\"y\"),\n dy = parseFloat(text.attr(\"dy\")) - yAxisAdjustment,\n tspan = text.text(null).append(\"tspan\").attr(\"x\", 0).attr(\"y\", y).attr(\"dy\", `${dy}em`);\n while (word = words.pop()) {\n line.push(word);\n tspan.text(line.join(\" \"));\n if (tspan.node().getComputedTextLength() > wrapWidth) {\n line.pop();\n tspan.text(line.join(\" \"));\n line = [word];\n tspan = text.append(\"tspan\").attr(\"x\", 0).attr(\"y\", y).attr(\"dy\", ++lineNumber * lineHeight + dy + \"em\").text(word);\n }\n }\n });\n return 0;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"csv = d3.csvParse(source, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"groupName = csv.columns[2]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"groups = [ \"Minimal experience with competitive programming on other platforms\", \"Have accounts on some platforms and solve problems occasionally\",\"Take part in contests on platforms like Codeforces, Codechef etc. regularly\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"subgroups = [\"1\", \"2\", \"3\", \"4\", \"5\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"color = d3.scaleOrdinal(d3.schemeSpectral[5])\n .domain(d3.range(subgroups.length))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"data = d3.stack()\n .keys(subgroups)(filetedData)\n .map((data, i) => data.map(([y0, y1]) => [y0, y1, i])) // add an extra array element for the subgroup index","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"groupedMax = d3.max(filetedData, row => d3.max(subgroups.map(col => row[col])))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"stackedMax = d3.max(data, y => d3.max(y, d => d[1]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"x = d3.scaleBand()\n .domain(d3.range(groups.length))\n .rangeRound([margin.left, width - margin.right])\n .padding(0.15)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"y = d3.scaleLinear()\n .domain([0, stackedMax])\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"xAxis = d3.axisBottom(x)\n // .tickSize(0)\n // .tickPadding(8)\n .tickFormat((d, i) =>groups[i])\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"margin = ({top: 20 + color.domain().length * (legendBoxSize + legendPadding), right: 10, bottom: 30, left: 50})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"yAxis = d3.axisLeft(y)\n .tickPadding(8)\n .tickFormat(d3.format(\".0%\"));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"legendBoxSize = 15","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"legendPadding = 5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"labels = [\"1 (Ambiguous)\", \"2\", \"3\", \"4\", \"5 (Well Explained)\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"legendChart = svg => {\n const entry = svg\n .append(\"g\")\n .selectAll(\".entry\")\n .data(labels)\n .join(\"g\")\n .attr(\n \"transform\",\n (d, i) => `translate(0,${(legendBoxSize + legendPadding) * i})`\n )\n .attr(\"class\", \"entry\");\n\n entry\n .append(\"rect\")\n .attr(\"width\", legendBoxSize)\n .attr(\"height\", legendBoxSize)\n .attr(\"fill\", (d, i) => color(i));\n\n entry\n .append(\"text\")\n .text(d => d)\n .attr(\"x\", legendBoxSize + legendPadding)\n .attr(\"y\", legendBoxSize / 2)\n .attr(\"dy\", \"0.35em\")\n .style(\"font\", \"13px sans-serif\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"file = await FileAttachment(\"OJ.csv\").text()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"viewof source = {\n const textarea = html`