25:["$","title",null,{"children":"W209 Section 3 Students Scatterplot | Mak Ahmad | Observable"}] 49:T54a,{ const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const lastname = function(d) { const split = d.toLowerCase().split(' '); return split[split.length - 1] } // Append clipping path circles svg .selectAll("anything") .data(students) .enter() .append("clipPath") .attr("id", d => lastname(d.name)) .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(#${lastname(d.name)})` ) .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(); }4a:Tbab,students = [ { name: "Adithi", img: "https://ca.slack-edge.com/T0WA5NWKG-U05Q6NBPU4R-b3196d8d3fcd-72", var1: Math.random() * 150, var2: Math.random() * 2.0 }, { name: "Aimee", img: "https://ca.slack-edge.com/T0WA5NWKG-U067V9B20GM-7082a64518b0-72", var1: Math.random() * 150, var2: Math.random() * 2.0 }, { name: "Chloe", img: "https://ca.slack-edge.com/T0WA5NWKG-U05EASBCY66-03459d5ab8c0-72", var1: Math.random() * 150, var2: Math.random() * 2.0 }, { name: "Dan", img: "https://ca.slack-edge.com/T0WA5NWKG-U052DATFX38-5c53b05cb8fa-72", var1: Math.random() * 150, var2: Math.random() * 2.0 }, { name: "Eric", img: "https://ca.slack-edge.com/T0WA5NWKG-U06832BDQQ1-g7ce1229c2f5-72", var1: Math.random() * 150, var2: Math.random() * 2.0 }, { name: "Eun-Hae", img: "https://ca.slack-edge.com/T0WA5NWKG-U064Y7T9TSB-3f2a30e3dec7-72", var1: Math.random() * 150, var2: Math.random() * 2.0 }, { name: "Gina", img: "https://ca.slack-edge.com/T0WA5NWKG-U05P7ELB5JT-234ebd6606ce-72", var1: Math.random() * 150, var2: Math.random() * 2.0 }, { name: "Hyung", img: "https://ca.slack-edge.com/T0WA5NWKG-U0670A26K9N-8e04cc130e00-72", var1: Math.random() * 150, var2: Math.random() * 2.0 }, { name: "Indu", img: "https://ca.slack-edge.com/T0WA5NWKG-U051DPE4M6J-57554b5b4667-72", var1: Math.random() * 150, var2: Math.random() * 2.0 }, { name: "Jae", img: "https://ca.slack-edge.com/T0WA5NWKG-U05GB5K23HR-cfce9c7d625f-72", var1: Math.random() * 150, var2: Math.random() * 2.0 }, { name: "Jesse", img: "https://ca.slack-edge.com/T0WA5NWKG-U06A19FTUE4-7756fc6b8a81-72", var1: Math.random() * 150, var2: Math.random() * 2.0 }, { name: "Joshua", img: "https://ca.slack-edge.com/T0WA5NWKG-U053JE2TRNG-fd164ed7389a-72", var1: Math.random() * 150, var2: Math.random() * 2.0 }, { name: "Justin", img: "https://ca.slack-edge.com/T0WA5NWKG-U0686D72Q56-bb3952bc0528-72", var1: Math.random() * 150, var2: Math.random() * 2.0 }, { name: "Mohamed", img: "https://ca.slack-edge.com/T0WA5NWKG-U05K82D9ALC-c1f938d66e6b-72", var1: Math.random() * 150, var2: Math.random() * 2.0 }, { name: "Ryan", img: "https://ca.slack-edge.com/T0WA5NWKG-U05QHMAFZ4Z-db8e37c6e608-72", var1: Math.random() * 150, var2: Math.random() * 2.0 }, { name: "Subhasis", img: "https://ca.slack-edge.com/T0WA5NWKG-U06BYJXL7V1-b93ba674e9dc-72", var1: Math.random() * 150, var2: Math.random() * 2.0 }, { name: "Yifan", img: "https://ca.slack-edge.com/T0WA5NWKG-U07CUQDE6PP-a0b482e70d25-72", var1: Math.random() * 150, var2: Math.random() * 2.0 }, { name: "Zakaria", img: "https://ca.slack-edge.com/T0WA5NWKG-U05385DR3QW-e9423c222785-72", var1: Math.random() * 150, var2: Math.random() * 2.0 } ]4b:[] 29:{"id":"94af61891b042d62","slug":null,"title":"W209 Section 3 Students Scatterplot","thumbnail":"e9b4e40749808bdb4f3f2d0a6acbe4eac7ce968bae36485c1d641fcbce24326a","access_level":"public","create_time":"$D2023-09-18T03:16:36.125Z","update_time":"$D2024-09-15T18:45:34.308Z","view_time":null,"first_public_time":"$D2023-09-18T03:16:36.125Z","has_unpublished_edits":null,"fork":{"id":"43eb1eef5c4e6b79","slug":null,"title":"W209 Section 4 Students Scatterplot","owner":{"id":"375612435f7935c9","login":"makahmad","name":"Mak Ahmad"}},"stars":0,"starred":false,"owner":{"type":"team","id":"375612435f7935c9","login":"makahmad","name":"Mak Ahmad","avatar_url":"https://avatars-next.observableusercontent.com/715f582284384f47898ac4d5e738ae71c37139b7e1aae08021f6100f8e02bd89","tier":"education_2026","bio":"","followed_by_you":false,"follows_you":false},"version":293,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a0ee4b29e550daf5","login":"makahmad","name":"Mak Ahmad","avatar_url":"https://avatars-next.observableusercontent.com/715f582284384f47898ac4d5e738ae71c37139b7e1aae08021f6100f8e02bd89","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"a0ee4b29e550daf5","login":"makahmad","name":"Mak Ahmad","avatar_url":"https://avatars-next.observableusercontent.com/715f582284384f47898ac4d5e738ae71c37139b7e1aae08021f6100f8e02bd89","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":15,"collection":null,"type":"notebook","body":{"titling":"auto","title":"W209 Section 3 Students Scatterplot","cells":[{"id":0,"value":"md`# W209 Section 3 Students Scatterplot`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"html`\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"{ const svg = d3.create(\"svg\"); \n svg.append(\"g\")\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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(\"path\").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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"d3.axisLeft(y)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"yAxis = function(g) {\n g\n .attr(\"transform\", `translate(${margin.left},0)`);\n const axisLeftFunction = d3.axisLeft(y);\n axisLeftFunction(g);\n // g.select(\".domain\").remove();\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 Hi\")\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"margin = ({ top: 35, right: 20, bottom: 35, left: 40 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"1"}} 24:null