21:null 22:["$","title",null,{"children":"Online Judge/ Data Structures & Algorithms/ Conceptual Clarity | Jyoti Sunkara | Observable"}] 27: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 }); }28:T9f5,filetedData = { let categories = { "Take part in contests or problem-solving on platforms like Codeforces, Atcoder, 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 practised on other platforms this semester?"]){ case "Take part in contests or problem-solving on platforms like Codeforces, Atcoder, Codechef etc. regularly": { categories["Take part in contests or problem-solving on platforms like Codeforces, Atcoder, 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 sum = 0; for(var l = 0; l < groups.length; l++) { sum += categories[groups[l]]; } let data = [] for(var i = 0; i < groups.length; i++) { var entry = { "How much have you practised 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 practised on other platforms this semester?"] == groups[i]) { switch(csv[j]["To what extent did OJ help give you conceptual clarity about the theory taught in lectures (OOP, Graph Algorithms, BSTs, String Algorithms etc.)"]) { 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"] /= 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; }29:[{"id":"4c7d7419914e60e9c3bc90c461618cb045f0ba5d604b7a2917e31296e6b9206ddadf6c69f46e6ecf0c857f986cbcc37a5662daab8cfa33590b981774bc1cb737","href":"https://static.observableusercontent.com/files/4c7d7419914e60e9c3bc90c461618cb045f0ba5d604b7a2917e31296e6b9206ddadf6c69f46e6ecf0c857f986cbcc37a5662daab8cfa33590b981774bc1cb737","name":"DSA.csv","type":"text/csv","lastModified":1595963352171.631,"size":33851}] 25:{"id":"a21418e15d0dc79d","slug":"online-judge-data-structures-algorithms-conceptual-clari","title":"Online Judge/ Data Structures & Algorithms/ Conceptual Clarity","thumbnail":"c37be77b765d5df4a4b9ddef33908eaa70be43f765c2b6323636d072f21b83d2","access_level":"public","create_time":"$D2020-07-28T19:09:12.171Z","update_time":"$D2020-08-02T07:22:10.151Z","view_time":null,"first_public_time":"$D2020-07-28T19:11:15.829Z","has_unpublished_edits":null,"fork":{"id":"05f3149e2cc1aeb0","slug":"online-judge-data-structures-algorithms-course-takeaway","title":"Online Judge/ Data Structures & Algorithms/ Course Takeaway","owner":{"id":"ada962c783485a41","login":"jyotisunkara","name":"Jyoti Sunkara"}},"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","bio":"Captivated by all things wild!"},"version":386,"publish_version":386,"role":null,"authored":false,"authors":[{"type":"individual","id":"88c1466c252b64df","login":"jyotisunkara","name":"Jyoti Sunkara","avatar_url":"https://avatars-next.observableusercontent.com/1a4924e14955570a65d952632deaf2ed48f252f8bc538219f6e8a793ea22664f","tier":null,"bio":"Captivated by all things wild!"}],"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":0,"collection":{"id":"11fdfebcd23be66b","slug":"online-judge","title":"Online Judge","owner":{"id":"ada962c783485a41","login":"jyotisunkara","name":"Jyoti Sunkara"}},"type":"notebook","body":{"titling":"auto","title":"Online Judge/ Data Structures & Algorithms/ Conceptual Clarity","cells":[{"id":0,"value":"md`# Online Judge/ Data Structures & Algorithms/ Conceptual Clarity`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"md`### To what extent did OJ help give students conceptual clarity about the theory taught in lectures`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"$27","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"chart.update(layout)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"csv = d3.csvParse(source, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$28","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"groupName = csv.columns[13]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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 or problem-solving on platforms like Codeforces, Atcoder, Codechef etc. regularly\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"subgroups = [\"1\", \"2\", \"3\", \"4\", \"5\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"color = d3.scaleOrdinal().range([\" #8e44ad \", \"#3498db\", \" #58d68d \", \" #f7dc6f\", \" #e74c3c \"].reverse())\n .domain(d3.range(subgroups.length))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"yAxis = d3.axisLeft(y).tickPadding(8)\n .tickFormat(d3.format(\".0%\"));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"legendBoxSize = 15","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"legendPadding = 5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"labels = [\"1 (Low/ Rarely)\", \"2\", \"3\", \"4\", \"5 (High/ Often)\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"file = await FileAttachment(\"DSA.csv\").text()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"viewof source = {\n const textarea = html`

\n${file}`;\n  textarea.style.display = \"block\";\n  textarea.style.boxSizing = \"border-box\";\n  textarea.style.width = \"calc(100% + 28px)\";\n  textarea.style.font = \"var(--mono_fonts)\";\n  textarea.style.minHeight = \"60px\";\n  textarea.style.border = \"none\";\n  textarea.style.padding = \"4px 10px\";\n  textarea.style.margin = \"0 -14px\";\n  textarea.style.background = \"rgb(247,247,249)\";\n  textarea.style.tabSize = 2;\n  textarea.oninput = () =>\n    (textarea.style.height = `${textarea.value.match(/^/gm).length * 21 +\n      8}px`);\n  textarea.oninput();\n  return textarea;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W29","stdlib":"1"}}
26:"$25:body"
</article></body></html>