31:T4e3,{ const target = html``; const margin = { left: 50, right: 20, top: 20, bottom: 50 }, iwidth = width - margin.left - margin.right, iheight = height - margin.top - margin.bottom; const svg = d3.select(target); const gDrawing = svg .append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); gDrawing .append("rect") .attr("width", iwidth) .attr("height", iheight) .attr("fill", "#eee"); const x = d3 .scaleLinear() .domain([0, d3.max(data, d=>d.first_name.length)]) .range([0, iwidth]); const y = d3 .scaleLinear() .domain([0, d3.max(data, d=>d.last_name.length)]) .range([iheight, 0]); gDrawing .append("g") .attr("class", "x--axis") .attr("transform", `translate(0, ${iheight})`) .call(d3.axisBottom(x)); gDrawing .append("g") .attr("class", "y--axis") .attr("transform", `translate(0, 0)`) .call(d3.axisLeft(y)); const circles = gDrawing .selectAll("circle") .data(data) .join("circle") .attr("cx", d => x(d.first_name.length)) .attr("cy", d => y(d.last_name.length)) .attr("r", 5) .attr("fill", "steelblue"); return target; }32:T6b1,{ const target = html``; const margin = { left: 50, right: 20, top: 20, bottom: 50 }, iwidth = width - margin.left - margin.right, iheight = height - margin.top - margin.bottom; const svg = d3.select(target); const gDrawing = svg .append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); gDrawing .append("rect") .attr("width", iwidth) .attr("height", iheight) .attr("fill", "#eee"); const x = d3 .scaleLinear() .domain([0, d3.max(data, d=>d.first_name.length)]) .range([0, iwidth]); const y = d3 .scaleLinear() .domain([0, d3.max(data, d=>d.last_name.length)]) .range([iheight, 0]); const color = d3.scaleOrdinal() .domain(Array.from(new Set(data.map(d => d.first_name[0])).values())) .range(d3.schemeTableau10); gDrawing .append("g") .attr("class", "x--axis") .attr("transform", `translate(0, ${iheight})`) .call(d3.axisBottom(x)); gDrawing .append("g") .attr("class", "y--axis") .call(d3.axisLeft(y)); const circles = gDrawing .selectAll("circle") .data(data) .join("circle") .attr("cx", d => x(d.first_name.length)) .attr("cy", d => y(d.last_name.length)) .attr("r", 20) .attr("fill", d=>color(d.first_name[0])); const text = gDrawing .selectAll("text.label") .data(data) .join("text") .attr("class", "label") .attr("x", d => x(d.first_name.length)) .attr("y", d => y(d.last_name.length)) .style("dominant-baseline", "middle") .style("text-anchor", "middle") .style("font-size", "16pt") .text(d=>d.first_name[0]); return target; }33:T941,{ const target = html``; const margin = { left: 50, right: 20, top: 20, bottom: 50 }, iwidth = width - margin.left - margin.right, iheight = height - margin.top - margin.bottom; const svg = d3.select(target); const gDrawing = svg .append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); gDrawing .append("rect") .attr("width", iwidth) .attr("height", iheight) .attr("fill", "#eee"); const x = d3 .scaleLinear() .domain([0, d3.max(data, d=>d.first_name.length)]) .range([0, iwidth]); const y = d3 .scaleLinear() .domain([0, d3.max(data, d=>d.last_name.length)]) .range([iheight, 0]); const color = d3.scaleOrdinal() .domain(Array.from(new Set(data.map(d => d.first_name[0])).values())) .range(d3.schemeAccent) gDrawing .append("g") .attr("class", "x--axis") .attr("transform", `translate(0, ${iheight})`) .call(d3.axisBottom(x)); gDrawing .append("g") .attr("class", "y--axis") .call(d3.axisLeft(y)); // Append clipping path circles const clipPath = gDrawing .selectAll('clipPath') .data(data) .join("clipPath") .attr("id", d => d.first_name.toLowerCase()[0] + '-' + d.last_name.toLowerCase() ) .append("circle") .attr("id", d => d.first_name) .attr("r", 25) .attr("cx", d => x(d.first_name.length)) .attr("cy", d => y(d.last_name.length)); // Append images const profileImage = gDrawing .append("g") .selectAll('image.slack') .data(data) .join('image') .attr('href', d => d.slack) .attr("x", d => x(d.first_name.length) - 25) .attr('y', d => y(d.last_name.length) - 25) .attr('width', 50) .attr('height', 50) .attr( 'clip-path', d => `url(#${d.first_name.toLowerCase()[0] + '-' + d.last_name.toLowerCase()})` ) .attr('preserveAspectRatio', "xMidYMin slice"); const text = gDrawing .selectAll("text.label") .data(data) .join("text") .attr("class", "label") .attr("x", d => x(d.first_name.length)) .attr("y", d => y(d.last_name.length)+25) .style("dominant-baseline", "Hanging") .style("text-anchor", "middle") .style("font-size", "10pt") .text(d=>d.first_name); return target; }34:Tc6d,sp = { const target = html``; const margin = { left: 50, right: 20, top: 20, bottom: 50 }, iwidth = width - margin.left - margin.right, iheight = height - margin.top - margin.bottom; const svg = d3.select(target); const image_size = 50; data.forEach(function(d){ d["first_name"] = d["first_name"].trim() d["xval"] = Math.random() * 10; d["yval"] = Math.random() * 10; }) const gDrawing = svg .append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); gDrawing .append("rect") .attr("width", iwidth) .attr("height", iheight) .attr("fill", "#eee"); const x = d3 .scaleLinear() .domain([0, 10]) .range([0, iwidth]); const y = d3 .scaleLinear() .domain([0, 10]) .range([iheight, 0]); const color = d3.scaleOrdinal() .domain(Array.from(new Set(data.map(d => d.first_name[0])).values())) .range(d3.schemeAccent) var x_axis = gDrawing .append("g") .attr("class", "x--axis") .attr("transform", `translate(0, ${iheight})`) .call(d3.axisBottom(x)); var y_axis = gDrawing .append("g") .attr("class", "y--axis") .call(d3.axisLeft(y)); // Append clipping path circles const clipPath = gDrawing .selectAll('clipPath') .data(data) .join("clipPath") .attr("id", d => d.first_name.toLowerCase()[0] + d.last_name.toLowerCase() ) .append("circle") .attr("id", d => d.first_name) .attr("r", image_size/2) .attr("cx", d=>x(d["xval"])) .attr("cy", d=>y(d["yval"])); // Append images const profileImage = gDrawing .selectAll('image.slack') .data(data) .join('image') .attr('href', d => d.slack) .attr("x", d => x(d["xval"]) - image_size/2) .attr('y', d => y(d["yval"]) - image_size/2) .attr('width', image_size) .attr('height', image_size) .attr( 'clip-path', d => `url(#${d.first_name.toLowerCase()[0] + d.last_name.toLowerCase()})` ) .attr('preserveAspectRatio', "xMidYMin slice"); const text = gDrawing .selectAll("text.label") .data(data) .join("text") .attr("class", "label") .attr("x", d => x(d["xval"])) .attr('y', d => y(d["yval"]) + image_size/2) .style("dominant-baseline", "Hanging") .style("text-anchor", "middle") .style("font-size", "10pt") .text(d=>d.first_name); d3.select("#animate").on("click", function() { const duration = 1000; data.forEach(function(d){ d["xval"] = Math.random() * 10; d["yval"] = Math.random() * 10; }); clipPath .data(data) .transition() .duration(duration) .attr("cx", d=>x(d["xval"])) .attr("cy", d=>y(d["yval"])); profileImage .data(data) .transition() .duration(duration) .attr("x", d => x(d["xval"]) - image_size/2) .attr('y', d => y(d["yval"]) - image_size/2); text .data(data) .transition() .duration(duration) .attr("x", d => x(d["xval"])) .attr('y', d => y(d["yval"]) + image_size/2); }); return target; }35:[{"id":"a06c575d2d10f77dcb8f0063d0e200cd011c5c2805d5866b66b2450e799c095e6ff0a2526776521c5ab55560cda463f19dec2db6b36d01bbe8fb297ca1fa78b0","href":"https://static.observableusercontent.com/files/a06c575d2d10f77dcb8f0063d0e200cd011c5c2805d5866b66b2450e799c095e6ff0a2526776521c5ab55560cda463f19dec2db6b36d01bbe8fb297ca1fa78b0","name":"students@10.csv","type":"text/csv","lastModified":1726150258453.054,"size":1288},{"id":"d32f9b10bd78d30d8de90cb351d9c5a52eafdca621d9f1b31d020d1a343dd83157e1765298b7dbbedd9ae4c8d04a0210e0aba6ba291c5626e75fba0e5488833e","href":"https://static.observableusercontent.com/files/d32f9b10bd78d30d8de90cb351d9c5a52eafdca621d9f1b31d020d1a343dd83157e1765298b7dbbedd9ae4c8d04a0210e0aba6ba291c5626e75fba0e5488833e","name":"students@11.csv","type":"text/csv","lastModified":1737071022815.478,"size":1174},{"id":"0a0ea00e790ac9905b1b95a312c65343c820b0ebf1720fcd2c64aaaa0d4f06266e1e92157567480d0aa5dfa05330aab424a3e1a1bfc74332a6361f377a72f71a","href":"https://static.observableusercontent.com/files/0a0ea00e790ac9905b1b95a312c65343c820b0ebf1720fcd2c64aaaa0d4f06266e1e92157567480d0aa5dfa05330aab424a3e1a1bfc74332a6361f377a72f71a","name":"students@12.csv","type":"text/csv","lastModified":1737675483810.341,"size":1172},{"id":"9b753e83057138514ae3744bb6872689ea59d12622a4010b737db88d33b28f4c481f92f0689c08d8d841318ce8c55f52a0ae3a5db29beaf0232ca561eb97543c","href":"https://static.observableusercontent.com/files/9b753e83057138514ae3744bb6872689ea59d12622a4010b737db88d33b28f4c481f92f0689c08d8d841318ce8c55f52a0ae3a5db29beaf0232ca561eb97543c","name":"students@13.csv","type":"text/csv","lastModified":1737675602740.609,"size":1143},{"id":"b71fcbdd3a9de4345cf9dc80eaa4e21d69812d3e5dba4a2374d53a5b2cdb165b6c79ed6a83bf4fa9ba5f49c5dc6cd1ec7c5c1ea4471bf9ee70089b29d0773a4f","href":"https://static.observableusercontent.com/files/b71fcbdd3a9de4345cf9dc80eaa4e21d69812d3e5dba4a2374d53a5b2cdb165b6c79ed6a83bf4fa9ba5f49c5dc6cd1ec7c5c1ea4471bf9ee70089b29d0773a4f","name":"students@14.csv","type":"text/csv","lastModified":1747954761446.912,"size":1442},{"id":"5ce60a94d8be070bc66034da185355369230c24871b1e260b4335faf1b566d36325f4b7825e7b4cc2b6a6e655dc1178d613207d8249d4cca30042421139cfa96","href":"https://static.observableusercontent.com/files/5ce60a94d8be070bc66034da185355369230c24871b1e260b4335faf1b566d36325f4b7825e7b4cc2b6a6e655dc1178d613207d8249d4cca30042421139cfa96","name":"students@15.csv","type":"text/csv","lastModified":1755652044755.164,"size":1786},{"id":"6e853022cbd1ab660d2ef7c9fc79000d08db327d98b6f70bd3dd15c898ab9ceb52f11680882651c4b23acf69d43016636b2bec8cd849199b41019ef797cea8cb","href":"https://static.observableusercontent.com/files/6e853022cbd1ab660d2ef7c9fc79000d08db327d98b6f70bd3dd15c898ab9ceb52f11680882651c4b23acf69d43016636b2bec8cd849199b41019ef797cea8cb","name":"students@16.csv","type":"text/csv","lastModified":1755652130739.883,"size":1292},{"id":"4b6c2239237446d1a6e0624a62c31a287209ee6c70b5f6e6f0a131a61f2c50a03a6811b50f05f0449ba778afd83aa5a466cf4838b57471033cd5db09b1dcf0ed","href":"https://static.observableusercontent.com/files/4b6c2239237446d1a6e0624a62c31a287209ee6c70b5f6e6f0a131a61f2c50a03a6811b50f05f0449ba778afd83aa5a466cf4838b57471033cd5db09b1dcf0ed","name":"students@17.csv","type":"text/csv","lastModified":1757380752861.087,"size":1052},{"id":"1f175aef8971021d9800ea11b2016d241c2d7628718a3b222a665db763378f9c782ef2396f3018a29b42b1eb8ca90e2e934b29eb6b36de3b4daf7a70d4f3a2f2","href":"https://static.observableusercontent.com/files/1f175aef8971021d9800ea11b2016d241c2d7628718a3b222a665db763378f9c782ef2396f3018a29b42b1eb8ca90e2e934b29eb6b36de3b4daf7a70d4f3a2f2","name":"students@18.csv","type":"text/csv","lastModified":1759798020782.398,"size":973},{"id":"05e8d68661af6d60de638a334ad6d6e6ba14c480298ed741eedfa65f929f195b5688bb0d72c80a22236dc5d5b26bf4a56f327658285ebe0c9caa87fb50fdc1b2","href":"https://static.observableusercontent.com/files/05e8d68661af6d60de638a334ad6d6e6ba14c480298ed741eedfa65f929f195b5688bb0d72c80a22236dc5d5b26bf4a56f327658285ebe0c9caa87fb50fdc1b2","name":"students@19.csv","type":"text/csv","lastModified":1759798333579.746,"size":956},{"id":"24902a8a88a1781dd062c955a4a4542492aebcf0b25338bf0322c23d7b44bdaab3229981201f5923120530745e7076f2ac376ec2b8024be566ff160d3d9277be","href":"https://static.observableusercontent.com/files/24902a8a88a1781dd062c955a4a4542492aebcf0b25338bf0322c23d7b44bdaab3229981201f5923120530745e7076f2ac376ec2b8024be566ff160d3d9277be","name":"students@20.csv","type":"text/csv","lastModified":1760401046922.093,"size":1034},{"id":"dc1097259cad63709db2ee474fb88c5e8ba517a6f64d8d141bdea3645e228305469f24255ee995c977ca47e90f109f2349bd1b4bbba14ab570279965153bd2d0","href":"https://static.observableusercontent.com/files/dc1097259cad63709db2ee474fb88c5e8ba517a6f64d8d141bdea3645e228305469f24255ee995c977ca47e90f109f2349bd1b4bbba14ab570279965153bd2d0","name":"students@3.csv","type":"text/csv","lastModified":1683602794302.778,"size":962},{"id":"29e2b62894330a9bdba2d0281e71cc9dc7afb6b4b69d5b1d12fb841fa3adf417bb509a569f4e7bb5efd265d2d64cf8441e96d0a4fae7f52782b8494dbc472841","href":"https://static.observableusercontent.com/files/29e2b62894330a9bdba2d0281e71cc9dc7afb6b4b69d5b1d12fb841fa3adf417bb509a569f4e7bb5efd265d2d64cf8441e96d0a4fae7f52782b8494dbc472841","name":"students@6.csv","type":"text/csv","lastModified":1704421727744.268,"size":2134},{"id":"992c8d14afb71a909e82188e731c5aaf4ce951a46132c75d11b5ab8650e58da4bd89d883103dfef5951d434ac20af7336dfc5689157304f864a8246041acdec0","href":"https://static.observableusercontent.com/files/992c8d14afb71a909e82188e731c5aaf4ce951a46132c75d11b5ab8650e58da4bd89d883103dfef5951d434ac20af7336dfc5689157304f864a8246041acdec0","name":"students@7.csv","type":"text/csv","lastModified":1704421774388.763,"size":2134},{"id":"873a5956d8c7e5cce61a978f01377de2f1fb1925df99b4b6f909f6d70501c9c355caf5aa8004138199114bd7ce6c60c287a28ac80e0f97410d74861ea94fd432","href":"https://static.observableusercontent.com/files/873a5956d8c7e5cce61a978f01377de2f1fb1925df99b4b6f909f6d70501c9c355caf5aa8004138199114bd7ce6c60c287a28ac80e0f97410d74861ea94fd432","name":"students@8.csv","type":"text/csv","lastModified":1704421858475.254,"size":2198},{"id":"202e896d4b92a824db74cf1277f3fa539db16e338689f4a6315c04dc834bb36ca4e5d7215109aa71aaf9d87db159ae93d8d2fd0b189d14731191150c81d80432","href":"https://static.observableusercontent.com/files/202e896d4b92a824db74cf1277f3fa539db16e338689f4a6315c04dc834bb36ca4e5d7215109aa71aaf9d87db159ae93d8d2fd0b189d14731191150c81d80432","name":"students@9.csv","type":"text/csv","lastModified":1706225998488.442,"size":1896},{"id":"fce2ac4222b29d3e3c0bdd51a2cff884f59e0169e2bb62e16f1bbf5333e433c50a79490527f212a2457dba5b856720d9e71cbd7e0e80f4b4425a0a509cad6c3a","href":"https://static.observableusercontent.com/files/fce2ac4222b29d3e3c0bdd51a2cff884f59e0169e2bb62e16f1bbf5333e433c50a79490527f212a2457dba5b856720d9e71cbd7e0e80f4b4425a0a509cad6c3a","name":"students@4.csv","type":"text/csv","lastModified":1693474743044.72,"size":1214},{"id":"03c5a5355f52c879c1b06b4441099712e45970d7a73c062783f1620bfbe23ef0528c602c2a7c5b3736c838c9a81e849800ce5b4b876dca8bf4367e535684a77f","href":"https://static.observableusercontent.com/files/03c5a5355f52c879c1b06b4441099712e45970d7a73c062783f1620bfbe23ef0528c602c2a7c5b3736c838c9a81e849800ce5b4b876dca8bf4367e535684a77f","name":"students@5.csv","type":"text/csv","lastModified":1694729794889.53,"size":1376}] 2f:{"title":"Week 3: Live Session Exercise","cells":[{"id":0,"value":"md`# Week 3: Live Session Exercise`","pinned":true,"hidden":false,"mode":"ojs"},{"id":181,"value":"data = FileAttachment(\"students@20.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"keys = Object.keys(data[0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":171,"value":"data.map(e=>keys.map(k=>e[k]).join(\",\")).join(\"\\n\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"height = width * .5","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"{\n const target = html``;\n\n const svg = d3.select(target);\n\n for (let d of data) {\n svg\n .append(\"circle\")\n .attr(\"cx\", d.first_name.length)\n .attr(\"cy\", d.last_name.length)\n .attr(\"r\", 5)\n .attr(\"fill\", \"steelblue\");\n\n svg\n .append(\"text\")\n .attr(\"x\", d.first_name.length)\n .attr(\"y\", d.last_name.length)\n .style(\"font-size\", \"8pt\")\n .text(d.first_name);\n }\n\n return target;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"md`## Data Binding`","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"{\n const target = html``;\n\n const svg = d3.select(target);\n\n const circles = svg\n .selectAll(\"circle\")\n .data(data)\n .join(\"circle\")\n .attr(\"cx\", d => d.first_name.length)\n .attr(\"cy\", d => d.last_name.length)\n .attr(\"r\", 5)\n .attr(\"fill\", \"steelblue\");\n\n return target;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"md `## Scale `","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"{\n const target = html``;\n\n const svg = d3.select(target);\n\n const x = d3\n .scaleLinear()\n .domain([0, d3.max(data, d=>d.first_name.length)])\n .range([0, width]);\n\n const y = d3\n .scaleLinear()\n .domain([d3.max(data, d=>d.last_name.length), 0])\n .range([0, height]);\n\n const circles = svg\n .selectAll(\"circle\")\n .data(data)\n .join(\"circle\")\n .attr(\"cx\", d => x(d.first_name.length))\n .attr(\"cy\", d => y(d.last_name.length))\n .attr(\"r\", 5)\n .attr(\"fill\", \"steelblue\");\n\n return target;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"value":"md `## Axis`","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"md`## Categorical Scale`","pinned":true,"hidden":false,"mode":"ojs"},{"id":51,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":107,"value":"md`## Animation`","pinned":true,"hidden":false,"mode":"ojs"},{"id":113,"value":"button = html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":117,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs"},{"id":219,"value":"d3.schemeTableau10","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}