25:["$","title",null,{"children":"W209 Section 2 Students Scatterplot | Anna Li's Workspace | 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:T42d,chart = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); svg .append("g") .selectAll('image') .data(fakeMembers) .join('image') .attr('href', d => d.picture.thumbnail) .attr("x", d => x(d.location.coordinates.longitude) - 17) .attr('y', d => y(d.location.coordinates.latitude)) .attr('width', 35) .attr('height', 35); //.attr("stroke", "steelblue") //.attr("stroke-width", 1.5) //.attr("fill", "none") //.selectAll("circle") //.data(students) //.join("circle") //.attr("cx", d => x(d.var1)) //.attr("cy", d => y(d.var2)) //.attr("r", 3); svg .append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .selectAll("text") .data(fakeMembers) .join("text") .attr("dy", "0.35em") .attr("x", d => x(d.location.coordinates.longitude)) .attr("y", d => y(d.location.coordinates.latitude) - 10) .attr("text-anchor", "middle") .text(d => d.name.first); svg.append("g").call(xAxis); svg.append("g").call(yAxis); return svg.node(); }4b:Td13,students = [ { name: "Amber", img: "https://ca.slack-edge.com/T0WA5NWKG-U039QFFFAU8-ge30f31a78e2-512", var1: Math.random() * 150, var2: Math.random() * 2.0 }, { name: "Andrea", img: "https://ca.slack-edge.com/T0WA5NWKG-U03K3AUSTQU-8d880438895c-512", var1: Math.random() * 150, var2: Math.random() * 2.0 }, { name: "Anna", img: "https://ca.slack-edge.com/T0WA5NWKG-U04CVLCCY93-140cdb66b4d6-512", var1: Math.random() * 150, var2: Math.random() * 2.0 }, { name: "Arshia", img: "https://ca.slack-edge.com/T0WA5NWKG-U048EV8H29L-d7ef51569ff5-512", var1: Math.random() * 150, var2: Math.random() * 2.0 }, { name: "Aoyade", img: "https://ca.slack-edge.com/T0WA5NWKG-U03L3LQM6FQ-0f0439c7737d-512", var1: Math.random() * 150, var2: Math.random() * 2.0 }, { name: "Carla", img: "https://ca.slack-edge.com/T0WA5NWKG-U03MFNGNZ24-85b09d2db1b4-512", var1: Math.random() * 150, var2: Math.random() * 2.0 }, { name: "Darren", img: "https://ca.slack-edge.com/T0WA5NWKG-U03QKJVK6B0-fbd6f4a1e620-512", var1: Math.random() * 150, var2: Math.random() * 2.0 }, { name: "Derek", img: "https://ca.slack-edge.com/T0WA5NWKG-U04J01VATLL-af2de66f3aa7-512", var1: Math.random() * 150, var2: Math.random() * 2.0 }, { name: "I-Hsiu", img: "https://ca.slack-edge.com/T0WA5NWKG-U049MTV2GDV-g87bf754bbca-512", var1: Math.random() * 150, var2: Math.random() * 2.0 }, { name: "Jaipaul", img: "https://ca.slack-edge.com/T0WA5NWKG-U03RN3U0EPJ-912aab7f0a45-512", var1: Math.random() * 150, var2: Math.random() * 2.0 }, { name: "Minjing", img: "https://ca.slack-edge.com/T0WA5NWKG-U029EH7C9P0-360fb6bb16d4-512", var1: Math.random() * 150, var2: Math.random() * 2.0 }, { name: "Mohammad", img: "https://ca.slack-edge.com/T0WA5NWKG-U04AAF9TPCN-dbf4835c32de-512", var1: Math.random() * 150, var2: Math.random() * 2.0 }, { name: "Nate", img: "https://ca.slack-edge.com/T0WA5NWKG-U04AJU92E8L-cd1538e4f929-512", var1: Math.random() * 150, var2: Math.random() * 2.0 }, { name: "Oluwafemi", img: "https://ca.slack-edge.com/T0WA5NWKG-U03SRMQAVS8-gf2810ca121e-512", var1: Math.random() * 150, var2: Math.random() * 2.0 }, { name: "Reeva", img: "https://ca.slack-edge.com/T0WA5NWKG-U037RHRKZND-fd625df75170-512", var1: Math.random() * 150, var2: Math.random() * 2.0 }, { name: "Ryan", img: "https://ca.slack-edge.com/T0WA5NWKG-U03JG434JF2-7138fecf13a2-512", var1: Math.random() * 150, var2: Math.random() * 2.0 }, { name: "Sinan", img: "https://ca.slack-edge.com/T0WA5NWKG-U03QZ6MJE69-f4bce085c4d8-512", var1: Math.random() * 150, var2: Math.random() * 2.0 }, { name: "Steven", img: "https://ca.slack-edge.com/T0WA5NWKG-U03A8DQQYRF-214ba249496f-512", var1: Math.random() * 150, var2: Math.random() * 2.0 }, { name: "Subha", img: "https://ca.slack-edge.com/T0WA5NWKG-U03MT5X6TNC-32dd7187add9-512", var1: Math.random() * 150, var2: Math.random() * 2.0 }, { name: "Yiqin", img: "https://ca.slack-edge.com/T0WA5NWKG-U03CF2AH494-b311dd6b0b71-512", var1: Math.random() * 150, var2: Math.random() * 2.0 } ]4c:[] 29:{"id":"a979bce4cfd717aa","slug":null,"title":"W209 Section 2 Students Scatterplot","thumbnail":"439bdf9f5ca0ca8ed7c57ece2358d671e2d50545581c01c9650cb35cb6361f65","access_level":"public","create_time":"$D2023-09-26T02:01:29.753Z","update_time":"$D2023-09-26T02:11:55.984Z","view_time":null,"first_public_time":"$D2023-09-26T02:01:29.753Z","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":"8f1aa2ef81167011","login":"anna-li-ws","name":"Anna Li's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/64b6f95cf8b4ee30211596730662cd839c4301e89daa7cc8224c2381be4bda6b","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":304,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"79cedbb85d7564c8","login":"anna-li","name":"Anna Li","avatar_url":"https://avatars-next.observableusercontent.com/912501ab82a5672a58b561cc69c26839f3b6119df95d9928c7a58754c55ed593","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"79cedbb85d7564c8","login":"anna-li","name":"Anna Li","avatar_url":"https://avatars-next.observableusercontent.com/912501ab82a5672a58b561cc69c26839f3b6119df95d9928c7a58754c55ed593","tier":null,"role":"editor"},{"type":"team","id":"8f1aa2ef81167011","login":"anna-li-ws","name":"Anna Li's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/64b6f95cf8b4ee30211596730662cd839c4301e89daa7cc8224c2381be4bda6b","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"W209 Section 2 Students Scatterplot","cells":[{"id":0,"value":"md`# W209 Section 2 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":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"fakeMembers = getFakeMembers(50).then(\n (members) => members,\n (err) => new Error(\"cannot load members from randomuser.me\")\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"getFakeMembers = count =>\n new Promise((resolves, rejects) => {\n const api = `https://api.randomuser.me/?nat=US&results=${count}`;\n const request = new XMLHttpRequest();\n request.open('GET', api);\n request.onload = () =>\n request.status === 200\n ? resolves(JSON.parse(request.response).results)\n : rejects(Error(request.statusText));\n request.onerror = err => rejects(err);\n request.send();\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(fakeMembers, d => d.location.coordinates.longitude))\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(fakeMembers, d => d.location.coordinates.latitude))\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":"$4b","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":"$W4c","stdlib":"1"}} 24:null