2f:T53b,{ const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); // Append clipping path circles svg .selectAll('clipPath') .data(students) .join("clipPath") .attr("id", d => d.name .toLowerCase() .split(' ') .join('_') ) .append("circle") .attr("id", d => d.name) .attr("r", 20) .attr("cx", d => x(d.var1)) .attr("cy", d => y(d.var2)); // Append images svg .append("g") .selectAll('image') .data(students) .join('image') .attr('href', d => d.img) .attr("x", d => x(d.var1) - 25) .attr('y', d => y(d.var2) - 25) .attr('width', 50) .attr('height', 50) .attr( 'clip-path', d => `url(#${d.name .toLowerCase() .split(' ') .join('_')})` ) .attr('preserveAspectRatio', "xMidYMin slice"); // Append students' first names svg .append("g") .selectAll("text") .data(students) .join("text") .attr("dy", "0.35em") .attr("x", d => x(d.var1)) .attr("y", d => y(d.var2) - 28) .attr("font-family", "sans-serif") .attr("font-size", 12) .attr("font-weight", "bold") .attr("text-anchor", "middle") .text(d => d.name.split(' ')[0]); svg.append("g").call(xAxis); svg.append("g").call(yAxis); return svg.node(); }30:Tad2,students = [ { name: "Aastha Khanna", img: "https://ca.slack-edge.com/T0WA5NWKG-U017YC2KLAJ-cd76c73a41c8-72", var1: Math.random() * 150, var2: Math.random() * 2.0 }, { name: "Andrew Bailey", img: "https://ca.slack-edge.com/T0WA5NWKG-U029GTJCD7T-535b45ebfb68-48", var1: Math.random() * 150, var2: Math.random() * 2.0 }, { name: "Annie Passan", img: "https://ca.slack-edge.com/T0WA5NWKG-U028KSDT50A-b0fee795ea6e-48", var1: Math.random() * 150, var2: Math.random() * 2.0 }, { name: "Arriana Daniels", img: "https://ca.slack-edge.com/T0WA5NWKG-U01FYF3JQPM-9bf3df6647ff-48", var1: Math.random() * 150, var2: Math.random() * 2.0 }, { name: "Arun Nath", img: "https://ca.slack-edge.com/T0WA5NWKG-U029FE9G4TS-f86637d599b5-48", var1: Math.random() * 150, var2: Math.random() * 2.0 }, { name: "Chris M-S", img: "https://ca.slack-edge.com/T0WA5NWKG-U02NSK3MLHG-00a1844f2758-48", var1: Math.random() * 150, var2: Math.random() * 2.0 }, { name: "Delaney Scheiern", img: "https://ca.slack-edge.com/T0WA5NWKG-U027JNL6Z99-1a46a4a4c01c-48", var1: Math.random() * 150, var2: Math.random() * 2.0 }, { name: "Dimitrios Psaltos", img: "https://ca.slack-edge.com/T0WA5NWKG-U02AJ5LGTUG-g856b06dd79d-48", var1: Math.random() * 150, var2: Math.random() * 2.0 }, { name: "Eda Kavlakoglu", img: "https://ca.slack-edge.com/T0WA5NWKG-U01GG7WVB5G-16a49e13314f-48", var1: Math.random() * 150, var2: Math.random() * 2.0 }, { name: "Jon Hand", img: "https://ca.slack-edge.com/T0WA5NWKG-U01SJPTURE0-572082fb93cb-48", var1: Math.random() * 150, var2: Math.random() * 2.0 }, { name: "Kasha Muzila", img: "https://ca.slack-edge.com/T0WA5NWKG-U01ES3ADNCS-cc0e89673dd9-48", var1: Math.random() * 150, var2: Math.random() * 2.0 }, { name: "Nan Li", img: "https://ca.slack-edge.com/T0WA5NWKG-U01LXNY9N3V-b09188cbadda-48", var1: Math.random() * 150, var2: Math.random() * 2.0 }, { name: "Pony Ameri", img: "https://ca.slack-edge.com/T0WA5NWKG-U01TDP79S7M-f0c1d3f62bb2-48", var1: Math.random() * 150, var2: Math.random() * 2.0 }, { name: "Saniya Lakka", img: "https://ca.slack-edge.com/T0WA5NWKG-U023YSA2C23-04cbdb77fe16-48", var1: Math.random() * 150, var2: Math.random() * 2.0 }, { name: "Stephen Bridwell", img: "https://ca.slack-edge.com/T0WA5NWKG-U01P18DCRSQ-f44485872273-48", var1: Math.random() * 150, var2: Math.random() * 2.0 }, { name: "Victor Ramirez", img: "https://ca.slack-edge.com/T0WA5NWKG-U028C4139P1-f029dba50d03-512", var1: Math.random() * 150, var2: Math.random() * 2.0 } ]31:[] 2d:{"title":"2022 Fall Section 1 Students Scatterplot","cells":[{"id":0,"value":"md`# 2022 Fall Section 1 Students Scatterplot`","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":64,"value":"html`\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"chart = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n svg\n .append(\"g\")\n .selectAll('image')\n .data(students)\n .join('image')\n .attr('href', d => d.img)\n .attr(\"x\", d => x(d.var1) - 17)\n .attr('y', d => y(d.var2))\n .attr('width', 35)\n .attr('height', 35);\n //.attr(\"stroke\", \"steelblue\")\n //.attr(\"stroke-width\", 1.5)\n //.attr(\"fill\", \"none\")\n //.selectAll(\"circle\")\n //.data(students)\n //.join(\"circle\")\n //.attr(\"cx\", d => x(d.var1))\n //.attr(\"cy\", d => y(d.var2))\n //.attr(\"r\", 3);\n\n svg\n .append(\"g\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 10)\n .selectAll(\"text\")\n .data(students)\n .join(\"text\")\n .attr(\"dy\", \"0.35em\")\n .attr(\"x\", d => x(d.var1))\n .attr(\"y\", d => y(d.var2) - 10)\n .attr(\"text-anchor\", \"middle\")\n .text(d => d.name.split(' ')[0]);\n\n svg.append(\"g\").call(xAxis);\n\n svg.append(\"g\").call(yAxis);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"x = d3\n .scaleLinear()\n .domain(d3.extent(students, d => d.var1))\n .nice()\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"y = d3\n .scaleLinear()\n .domain(d3.extent(students, d => d.var2))\n .nice()\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"xAxis = g =>\n g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x)) //.ticks(width / 80))\n .call(g => g.select(\".domain\").remove())\n .call(g =>\n g\n .append(\"text\")\n .attr(\"x\", width)\n .attr(\"y\", margin.bottom - 4)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"end\")\n .text(\"Variable 1\")\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"yAxis = g =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").remove())\n.call(g =>\n g\n .append(\"text\")\n .attr(\"x\", -margin.left)\n .attr(\"y\", 10)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .text(\"Variable 2\")\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"margin = ({ top: 35, right: 20, bottom: 35, left: 40 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}