29:null 2a:["$","title",null,{"children":"D3: Selections | Ayaan Kazerouni | Observable"}] 2f:T4eb,`d3.select` lets you select any _single_ DOM element—this can be an element to which we have a reference in JavaScript above (like the `container` variable above), or it can be a string that's [any valid CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors) (e.g., class names, ids, HTML element names, or conditional selectors). `d3.selectAll` similarly takes in a selector argument, and selects _all_ elements that match the selector. By chaining the `select` and `selectAll` commands above, our `'circle'` selection only applies to circles directly within the `container` element. Once we have a selection in hand, we can use the `attr` method to manipulate the element's attributes. The `attr` method takes two parameters: - The first parameter is a string representing the attribute to be set, like `'r'` for radius in the example above, - The second parameter can either be a value for the attribute, or a function that sets the value. In the example above, we used a function to compute a new random number for each circle's radius. _We'll talk about what the `d` parameter for this function represents when we get to data joins._ In addition to setting _attributes_, we can also set CSS style rules for selected elements:30:[] 2d:{"id":"a531a0d74a0eb0a5","slug":"csc477-d3-selections","title":"D3: Selections","thumbnail":"e58686775bf6e61300a43ad1d23c0cfdc44226ae6aadef8cefc50306ba279bd2","access_level":"unlisted","create_time":"$D2025-05-13T02:53:47.761Z","update_time":"$D2026-05-07T21:36:32.693Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"1d83bfce92a9c574","login":"ayaankazerouni","name":"Ayaan Kazerouni","avatar_url":"https://avatars-next.observableusercontent.com/0e57571babb328d16b661fb3c0f94c9629fc275ae03e484ce19dbcf72fa1be0d","tier":"starter_2024"},"version":229,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7a2aaf0dcd8f4999","login":"ayaankazerouni","name":"Ayaan Kazerouni","avatar_url":"https://avatars-next.observableusercontent.com/d56bdf990c9be43beacbf55c7ca358b0aa7c36eb9211e9fc23f3b50bc80603bd","tier":null}],"members":[{"type":"team","id":"1d83bfce92a9c574","login":"ayaankazerouni","name":"Ayaan Kazerouni","avatar_url":"https://avatars-next.observableusercontent.com/0e57571babb328d16b661fb3c0f94c9629fc275ae03e484ce19dbcf72fa1be0d","tier":"starter_2024","role":"editor"},{"type":"individual","id":"7a2aaf0dcd8f4999","login":"ayaankazerouni","name":"Ayaan Kazerouni","avatar_url":"https://avatars-next.observableusercontent.com/d56bdf990c9be43beacbf55c7ca358b0aa7c36eb9211e9fc23f3b50bc80603bd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":20,"collection":{"id":"6c810503155b0a33","slug":"csc-477-cal-poly","title":"CSC 477","owner":{"id":"1d83bfce92a9c574","login":"ayaankazerouni","name":"Ayaan Kazerouni"}},"type":"notebook","body":{"title":"D3: Selections","cells":[{"id":0,"value":"# D3: Selections","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"We'll start our discussion of D3 (data-driven documents) with the idea of _selections_.\n\nSelections allow D3 to programmatically apply attributes, styles, and event listeners to DOM elements. (These are not the same as the \"selection\" abstraction for interactions in Vega-Lite.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"## Simple selections\n\nSelections coupled with _data joins_ allow us to draw graphical elements (\"marks\") for individual data points. We'll get to that.\n\nTo begin with, however, let's think about selections as they apply to already-existing DOM elements.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":55,"value":"In the code below, we begin by simply drawing 5 circles. Unlike the previous notebook on [Just Enough SVG](https://observablehq.com/@ayaankazerouni/csc477-just-enough-svg), we're using a JavaScript cell, and using `htl.html` to create an HTML element within the JavaScript code.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"{\n const container = htl.html`\n \n `;\n return container;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"In the next cell, we use a D3 Selection to:\n- select the SVG container,\n- then select all `circle` elements inside of it, and\n- set the circles' `r` attributes to a random number\n\n_Notice that the original `` elements don't have their `r` attributes set._\n\nRun the cell below a few times and see the circle's sizes changing. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":57,"value":"{\n const container = htl.html`\n \n `;\n\n // Random number generator. This is a function and not, itself, a random number.\n const random = d3.randomInt(5, 30);\n\n d3.select(container) // Select the svg container\n .selectAll('circle') // Select all its child elements that are circles\n .attr('r', random) // Set each circle's r attribute.\n\n return container\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":91,"value":"{\n const container = htl.html`\n \n `;\n\n const random = d3.randomInt(5, 30);\n \n d3.select(container)\n .selectAll('circle')\n .attr('r', random)\n .attr('fill', randomColor)\n .style('cursor', 'pointer'); // <-- Set the fill for each circle\n\n return container;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"## Adding SVG elements with D3\n\nYou can also draw SVG elements using D3, instead of writing raw SVG. This is the style in which you'll typically draw graphics.\n\nThe code below uses D3 methods to create an SVG image area and to draw circles in it with random fill and radii.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":126,"value":"{\n // Create an SVG container area.\n const svg = d3.create('svg')\n .attr('width', width)\n .attr('height', '100px');\n\n const random = d3.randomInt(5, 30);\n\n for (const x of [50, 150, 250, 350, 450]) {\n // Append a circle to the svg container at the given x position and y position 50\n svg.append('circle')\n .attr('cx', x)\n .attr('cy', 50)\n .attr('r', random)\n .attr('fill', randomColor);\n }\n\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"In the examples above, we've been drawing graphics from \"nothing\", that is, just shapes that are not backed by data in any way. So far, our capabilities with D3 are no different from those offered by, say, [P5.js](https://p5js.org).\n\nIn the following lesson, we'll learn about D3's _data joins_. D3's data joins are a powerful feature that allow us to:\n\n- map graphics to data\n- control how data _entries_, _updates_, and _exits_ are handled, allowing us to implement performant graphical updates, interactions, and animations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":168,"value":"## Other resources\n\n- [d3-select documentation](https://d3js.org/d3-selection/selecting)\n- [Selections, _D3 in depth_](https://www.d3indepth.com/selections/) (although this is aimed at a slightly older version of D3, the conceptual explanations are still useful)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":159,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":66,"value":"import { stylesheet } from '@ayaankazerouni/utils'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":130,"value":"function randomColor() {\n const colors = ['firebrick', 'forestgreen', 'yellow', 'skyblue', 'black', 'grey'];\n const randomColorIndex = d3.randomInt(colors.length);\n return colors[randomColorIndex()]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"