3e:null 3f:["$","title",null,{"children":"Selections and Joins | VisCourse | Observable"}] 45:T623,The above code works like this: **Selecting Elements**: `container.selectAll('rect')` This line of code selects all `` elements within the container. If there are no `` elements present, this selection is empty but ready to be populated based on our dataset. **Binding Data**: `.data(data)` The .data(data) method binds the provided dataset (an array stored in the data variable) to our selection. For each data point in our dataset, D3 will try to find a corresponding `` element. **Joining Data**: `.join('rect')` The .join('rect') method is where the magic happens. This method handles the enter, update, and exit selections for us: - **Enter**: If there are more data points than `` elements, D3 will create new elements for each extra data point. - **Update**: If a `` element already exists and corresponds to a data point, D3 will update it based on any subsequent chained method calls. - **Exit**: If there are more `` elements than data points, D3 will remove the extra elements. (This behavior isn't explicitly shown in the code, but it's implicitly handled by .join.) **Setting Attributes**: `.attr(...)` The .attr method sets attributes for the SVG elements: - `.attr('x', d => d.x)`: Set the x-coordinate of the rectangle's top-left corner based on the x property of the data point. - Each `d => d.property` is an arrow function that returns the specified property from the bound data point. D3 automatically provides the data point as the argument (d) for each item in our selection. 46:[] 43:{"id":"df608efcb73f793f","slug":null,"title":"Selections and Joins","thumbnail":"c7ac56e90f645837aa056264984eb9f29308a5470a8b52946de15db1f751678f","access_level":"public","create_time":"$D2023-10-03T01:09:53.142Z","update_time":"$D2023-10-09T03:29:20.001Z","view_time":null,"first_public_time":"$D2023-10-09T03:27:21.690Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"911f88a404433e08","login":"viscourse","name":"VisCourse","avatar_url":"https://avatars-next.observableusercontent.com/a066633218ef6bd4c0e650b7f1f72ec6da49de22f34b42b7585c6ee85b9298f9","tier":"starter_2024","bio":"","following":false},"version":136,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"443971f6948f4234","login":"lacepadilla","name":"Lace Padilla","avatar_url":"https://avatars-next.observableusercontent.com/9e70ded93d1383211fe69d5551aa0ce50bacdc1a7ad7cf42b7e6b013e4cda60c","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"443971f6948f4234","login":"lacepadilla","name":"Lace Padilla","avatar_url":"https://avatars-next.observableusercontent.com/9e70ded93d1383211fe69d5551aa0ce50bacdc1a7ad7cf42b7e6b013e4cda60c","tier":null,"role":"editor"},{"type":"team","id":"911f88a404433e08","login":"viscourse","name":"VisCourse","avatar_url":"https://avatars-next.observableusercontent.com/a066633218ef6bd4c0e650b7f1f72ec6da49de22f34b42b7585c6ee85b9298f9","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Selections and Joins","cells":[{"id":0,"value":"# Selections and Joins \n\nThis notebook is based on one by Dan Kerrigan [Guides and Examples](@nyuvis/review), which was adapted from the [d3-selection](https://github.com/d3/d3-selection) documentation, [Learn D3: Joins](/@d3/learn-d3-joins), [*selection*.join](https://observablehq.com/@d3/selection-join), [Thinking with Joins](https://bost.ocks.org/mike/join/), [Three Little Circles](https://bost.ocks.org/mike/circles/), [Nested Selections](https://bost.ocks.org/mike/nest/), and [How Selections Work](https://bost.ocks.org/mike/selection/), all by Mike Bostock.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"D3.js is a powerful library for manipulating documents based on data. One of the core concepts in D3.js is the \"data join\", which binds data to DOM elements. Let's dive into using selections and joins in D3.js.\n\n## Selections in D3.js\n\n### What is a Selection?\n\nA selection in D3.js represents a group of DOM elements. You can use D3 to select elements from the DOM, modify them, and even append or remove elements.\n\n### Selecting Elements\n\nTo select an element by tag name:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"Below is a version with just SVG code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"\n \n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"Now let's make a version in D3.js","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"First we make the SVG container","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":33,"value":"{\n const container = d3.create('svg')\n .attr('height', 100)\n .attr('width', 500);\n\n return container.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"Now to add stuff to it we need to select an element in this case 'container' and we can do various things to it. Below we will 'append' items to the container. We append 3 SVG rects to the container ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"{\n const container = d3.create('svg')\n .attr('height', 100)\n .attr('width', 500);\n \n container.append('rect')\n .attr('x', 10)\n .attr('y', 10)\n .attr('width', 300)\n .attr('height', 20)\n .attr('fill', 'green');\n\n container.append('rect')\n .attr('x', 10)\n .attr('y', 40)\n .attr('width', 250)\n .attr('height', 20)\n .attr('fill', 'green');\n\n container.append('rect')\n .attr('x', 10)\n .attr('y', 70)\n .attr('width', 200)\n .attr('height', 20)\n .attr('fill', 'orange');\n\n return container.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"Selections can also point to multiple elements. In the below example, `cells` has 3 `` elements.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":45,"value":"{\n const container = d3.create('svg')\n .attr('height', 100)\n .attr('width', 500);\n \n // Create a group for the green rectangles\n const greenGroup = container.append('g').attr('fill', 'green');\n \n greenGroup.append('rect')\n .attr('x', 10)\n .attr('y', 10)\n .attr('width', 300)\n .attr('height', 20);\n\n greenGroup.append('rect')\n .attr('x', 10)\n .attr('y', 40)\n .attr('width', 250)\n .attr('height', 20);\n\n // Add the orange rectangle outside the group, directly to the SVG container\n container.append('rect')\n .attr('x', 10)\n .attr('y', 70)\n .attr('width', 200)\n .attr('height', 20)\n .attr('fill', 'orange');\n\n return container.node();\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"{\n const container = d3.create('svg')\n .attr('height', 100)\n .attr('width', 500);\n\n const data = [\n {x: 10, y: 10, width: 300, height: 20, color: 'green'},\n {x: 10, y: 40, width: 250, height: 20, color: 'green'},\n {x: 10, y: 70, width: 200, height: 20, color: 'orange'},\n ];\n\n const cells = container.selectAll('g')\n .data(data)\n .join('g')\n .attr('transform', d => `translate(${d.x},${d.y})`);\n\n cells.append('rect')\n .attr('width', d => d.width) // Set width from data\n .attr('height', d => d.height) // Set height from data\n .attr('fill', d => d.color); // Set fill color from data\n \n return container.node();\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"updated","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":63,"value":"# Tutorial: Selections and Joins in D3.js\n\nD3.js is a powerful library for manipulating documents based on data. One of the core concepts in D3.js is the \"data join\", which binds data to DOM elements. Let's dive into using selections and joins in D3.js.\n\n### What is a Selection?\n\nA selection in D3.js represents a group of DOM elements. You can use D3 to select elements from the DOM, modify them, and even append or remove elements.\n\n### Creating an SVG container\nBefore we dive into selections and joins, let's understand how to create an SVG container using D3:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":74,"value":"{\n const container = d3.create('svg')\n .attr('height', 100)\n .attr('width', 500);\n\n return container.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"Here, we're using d3.create('svg') to create an SVG element. We then set its height and width using the attr method.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":85,"value":"### Appending Elements: The Basic Selection\n\nWith our container in place, we can start appending SVG shapes to it:\n\nIn this code, container.append('rect') appends a new rectangle () to our SVG container. The subsequent attr method calls set various attributes for this rectangle, including its position (x, y), dimensions (width, height), and color (fill).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":78,"value":"{\n const container = d3.create('svg')\n .attr('height', 100)\n .attr('width', 500);\n \n container.append('rect')\n .attr('x', 10)\n .attr('y', 10)\n .attr('width', 300)\n .attr('height', 20)\n .attr('fill', 'green');\n\n container.append('rect')\n .attr('x', 10)\n .attr('y', 40)\n .attr('width', 250)\n .attr('height', 20)\n .attr('fill', 'green');\n\n container.append('rect')\n .attr('x', 10)\n .attr('y', 70)\n .attr('width', 200)\n .attr('height', 20)\n .attr('fill', 'orange');\n\n return container.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"We can also .append to a group.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":88,"value":"{\n const container = d3.create('svg')\n .attr('height', 100)\n .attr('width', 500);\n \n // Create a group for the green rectangles\n const greenGroup = container.append('g').attr('fill', 'green');\n \n greenGroup.append('rect')\n .attr('x', 10)\n .attr('y', 10)\n .attr('width', 300)\n .attr('height', 20);\n\n greenGroup.append('rect')\n .attr('x', 10)\n .attr('y', 40)\n .attr('width', 250)\n .attr('height', 20);\n\n // Add the orange rectangle outside the group, directly to the SVG container\n container.append('rect')\n .attr('x', 10)\n .attr('y', 70)\n .attr('width', 200)\n .attr('height', 20)\n .attr('fill', 'orange');\n\n return container.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"\n## Selections: Selecting Multiple Elements","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":67,"value":"{\n const container = d3.create('svg')\n .attr('height', 100)\n .attr('width', 500);\n \n // Create a group for the green rectangles\n const greenGroup = container.append('g').attr('fill', 'green');\n \n greenGroup.append('rect')\n .attr('x', 10)\n .attr('y', 10)\n .attr('width', 300)\n .attr('height', 20);\n\n greenGroup.append('rect')\n .attr('x', 10)\n .attr('y', 40)\n .attr('width', 250)\n .attr('height', 20);\n\n // Add the orange rectangle outside the group, directly to the SVG container\n container.append('rect')\n .attr('x', 10)\n .attr('y', 70)\n .attr('width', 200)\n .attr('height', 20)\n .attr('fill', 'orange');\n\n container.selectAll('rect')\n .attr('stroke', 'black')\n .attr('stroke-width', 2);\n\n return container.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"## Data Join\n\nNotice we hard coded the data at the top. That is not feasible for real data sets. So we will look to join SVG elements with data. \n\n1. We'll define a dataset representing the attributes of the rectangles.\n2. We'll use D3's .data() method to bind this dataset to a selection of rectangles.\n3. Based on this binding, we'll then use D3's .enter() method to create and append new rectangles to the SVG for each item in our dataset.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":107,"value":"{\n const container = d3.create('svg')\n .attr('height', 100)\n .attr('width', 500);\n \n // Dataset representing the attributes of the rectangles\n const data = [\n { x: 10, y: 10, width: 300, height: 20, fill: 'green' },\n { x: 10, y: 40, width: 250, height: 20, fill: 'green' },\n { x: 10, y: 70, width: 200, height: 20, fill: 'orange' },\n ];\n\n // Use D3's .data() method to bind the dataset to the rectangles\n container.selectAll('rect')\n .data(data)\n .join('rect')\n .attr('x', d => d.x)\n .attr('y', d => d.y)\n .attr('width', d => d.width)\n .attr('height', d => d.height)\n .attr('fill', d => d.fill);\n\n return container.node();\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"$45","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":117,"value":"# Conclusion\nD3.js offers a flexible way to manipulate the DOM based on data. Through selections, you can access and modify elements, and with data joins, you can bind data to elements to create dynamic visualizations. Our example showcased basic rectangle creation, but the principles apply to more complex scenarios and various types of visualizations.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 44:"$43:body"