3c:null 3d:["$","title",null,{"children":"D3 Beginning Exercise | DataaVizHMC | Observable"}] 43:T48c,md`Three key lines here are \`\`\`javascript svg.selectAll('circle') .data(circleInfo) .enter().append('circle') \`\`\` The result of these lines is that we have one \`\` in \`svg\` for each element in \`circleInfo\`. If \`circleInfo\` contains ${circleInfo.length} objects, then we have ${circleInfo.length} circles. Each circle is bound to one element of the \`circleInfo\` array. When we call \`.attr()\`, the first argument is the name of the SVG attribute that we are setting. The second argument can either be a constant value, like setting the \`fill\` to be green, or it can be a function, like for \`cx\`, \`cy\`, and \`r\`. When it is a function, the attribute is set to the return value of the function. This function will be called for each circle and it is passed the data that is bound to the circle. So, in the above code, \`circ\` is an element of \`circleInfo\`. To set \`cx\` and \`cy\`, we are passing [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions). To set \`r\`, we are passing a function using the normal syntax. Both syntaxes work for setting attribute values.`44:[] 41:{"id":"9530b8ff3a91299c","slug":null,"title":"D3 Beginning Exercise","thumbnail":"4956d1b9be3f3aee9b867bedc8de0fdd48e72ccf6370b7ce37acd75a52a06d05","access_level":"unlisted","create_time":"$D2025-02-17T21:06:00.481Z","update_time":"$D2025-02-17T21:11:13.578Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"9aa36b4aa72e6b7c","login":"dataavizhmc","name":"DataaVizHMC","avatar_url":"https://avatars-next.observableusercontent.com/f2d727851ab4dd36ae51dde52223c9a775470157acb8c109a24c78435ec11037","tier":"starter_2024","bio":""},"version":53,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"74942dd6d6baa727","login":"gabe-hope3","name":"Gabe Hope","avatar_url":"https://avatars-next.observableusercontent.com/d4aa0361a0af1ee7fd565ca01cfe4c6274d25c9d4ec3891b0e82e5307ad05c45","tier":null,"bio":""}],"members":[{"type":"team","id":"9aa36b4aa72e6b7c","login":"dataavizhmc","name":"DataaVizHMC","avatar_url":"https://avatars-next.observableusercontent.com/f2d727851ab4dd36ae51dde52223c9a775470157acb8c109a24c78435ec11037","tier":"starter_2024","role":"editor"},{"type":"individual","id":"74942dd6d6baa727","login":"gabe-hope3","name":"Gabe Hope","avatar_url":"https://avatars-next.observableusercontent.com/d4aa0361a0af1ee7fd565ca01cfe4c6274d25c9d4ec3891b0e82e5307ad05c45","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"D3 Beginning Exercise","cells":[{"id":0,"value":"# D3 Beginning Exercise","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"md`### Rectangles\n\nAnother SVG element that we will often use is [\\`\\`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect), for rectangles. The \\`x\\` and \\`y\\` attributes of the rectanlge set the position of its top-left corner. The \\`width\\` and \\`height\\` attributes then set its width and height.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"md`### D3: *Selections and Joins*\n\nSay we have a dataset that describes 5 circles that we want to show.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"circleInfo = [\n {\n x: 25,\n y: 50,\n radius: 5\n },\n {\n x: 75,\n y: 50,\n radius: 10\n },\n {\n x: 125,\n y: 50,\n radius: 15\n },\n {\n x: 175,\n y: 50,\n radius: 20\n },\n {\n x: 225,\n y: 50,\n radius: 25\n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"md`We don't want to have to repeat the same code ${circleInfo.length} times in order to draw each circle individually. We can use D3's selections and data joins in order to create one circle for each object in our data.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"{\n // create our outer SVG element with a size of 500x100 and select it\n const svg = d3.create('svg')\n .attr('width', 500)\n .attr('height', 100);\n \n // create one circle for each element in circleInfo\n svg.selectAll('circle')\n .data(circleInfo)\n .enter().append('circle')\n // set the attributes for the circles based on the data\n .attr('fill', 'green')\n .attr('cx', circ => circ.x)\n .attr('cy', circ => circ.y)\n // this function syntax works too\n // it behaves the same as the above arrow functions\n .attr('r', function (circ) {\n return circ.radius;\n });\n \n // return the outer SVG element in order to render it\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":25,"value":"$43","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"md`#### Exercise\n\nRecreate the rectangle example again, this time using d3.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":31,"value":"rectInfo = [\n { xPos: 10, yPos: 10, width: 300, height: 20, color: 'purple' },\n { xPos: 10, yPos: 40, width: 250, height: 20, color: 'brown' },\n { xPos: 10, yPos: 70, width: 200, height: 20, color: 'orange' },\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"// write your answer here","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"solution(`{\n // create our outer SVG element with a size of 500x100 and select it\n const svg = d3.create('svg')\n .attr('width', 500)\n .attr('height', 100);\n \n // create one circle for each element in circleInfo\n svg.selectAll('rect')\n .data(rectInfo)\n .join('rect')\n // set the attributes for the circles\n .attr('fill', d => d.color)\n .attr('x', d => d.xPos)\n .attr('y', d => d.yPos)\n .attr('width', d => d.width)\n .attr('height', d => d.height);\n \n // return the outer SVG element in order to render it\n return svg.node();\n}`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"solution = (code, lang='javascript') => html`\n

Solution

\n${md`\\`\\`\\`${lang}\n${code}\n\\`\\`\\``}\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W44","stdlib":"1"}} 42:"$41:body"