25:["$","title",null,{"children":"D3 Data Joins | Visualização | Observable"}] 49:T5d0,{ replay; function getData() { let data = []; let numItems = Math.ceil(Math.random()*5-1); for(let i=0; i enter.append('circle') .attr('fill', 'green') .attr('cx', (d, i) => i*100+50) .attr('cy', 0) .attr('r', (d, i) => d) .call(enter => enter.transition(t) .attr('cy', 50) ), update => update.attr('fill', 'rebeccapurple'), exit => exit.attr('fill', 'gold') .call(exit => exit.transition(t) .attr('r', 0) .remove() ) ) yield container.node() await Promises.tick(2500) } // Code here container.selectAll('circle') .data(getData()) .join('circle') .attr('cx', function(d, i) { return i * 100 + 50; }) .attr('cy', 50) .attr('r', function(d, i) { return d; }) .style('fill', (d, i) => d > 30 ? 'rebeccapurple' : 'gold'); // return SVG DOM element return container.node(); }4a:[] 29:{"id":"ddcfa3c40e9ed193","slug":null,"title":"D3 Data Joins","thumbnail":"54cdad80a9ae0d8d767d26168051de9ccbbbfd3ef41c03241b4a10873a775c81","access_level":"public","create_time":"$D2023-04-04T14:36:11.818Z","update_time":"$D2023-04-04T15:42:42.657Z","view_time":null,"first_public_time":"$D2023-04-04T14:36:11.818Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"ba46d53cd92022c6","login":"datavisbarrafas","name":"Visualização","avatar_url":"https://avatars-next.observableusercontent.com/91f6fa5dc6b1dbedd8f176d7af8c62b8883701f35fa480fe14c3fea0e52b8954","tier":"starter_2024","bio":"","following":false},"version":183,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"03096d7517f4f329","login":"barrafas","name":"Tiago Barradas","avatar_url":"https://avatars-next.observableusercontent.com/e73be1a419e1adb4b0d05a0aeb1c2e537bfe4de32cb4fb75c44f237c757d4c1c","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"03096d7517f4f329","login":"barrafas","name":"Tiago Barradas","avatar_url":"https://avatars-next.observableusercontent.com/e73be1a419e1adb4b0d05a0aeb1c2e537bfe4de32cb4fb75c44f237c757d4c1c","tier":null,"role":"editor"},{"type":"team","id":"ba46d53cd92022c6","login":"datavisbarrafas","name":"Visualização","avatar_url":"https://avatars-next.observableusercontent.com/91f6fa5dc6b1dbedd8f176d7af8c62b8883701f35fa480fe14c3fea0e52b8954","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":"D3 Data Joins","cells":[{"id":0,"value":"# D3 Data Joins","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"This article shows how to join an array of data to a D3 selection. We cover how to create a data join, how to update a data join, how to join an array of objects and key functions. We also show how to simplify your data join code using layout functions.\n\nA data join creates a correspondence between an array of data and a selection of HTML or SVG elements.\n\nJoining an array to HTML/SVG elements means that:\n\n* HTML (or SVG) elements are added or removed such that **each array element has a corresponding HTML (or SVG) element**\n* each HTML/SVG element may be **positioned, sized and styled** according to the value of its corresponding array element\n \nFor example, suppose you've an array of five numbers which you'd like to join to circle elements:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"myData = [40, 10, 20, 60, 30];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"Each time D3 performs the join it'll add or remove circle elements so that each array element has a corresponding circle element.\n\nD3 can also update the position and radius of each circle (and any other attributes or style) based on the value of the corresponding array element.\n\nFor example, the radius of each circle can be set to half the value of the corresponding array value. This results in the first circle having a radius of 20, the second a radius of 5 and so on:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"{\n var myData = [40, 10, 20, 60, 30];\n\n const container = d3.create('svg')\n .attr('width', 600)\n .attr('height', 100);\n\n container.selectAll('circle')\n .data(myData)\n .join('circle')\n .attr('cx', function(d, i) {\n return i * 100;\n })\n .attr('cy', 50)\n .attr('r', function(d) {\n return 0.5 * d;\n })\n .style('fill', 'orange');\n\n // return SVG DOM element\n return container.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"## How to create a data join","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"The general pattern for creating a data join is:\n\n```js\nd3.select(container)\n .selectAll(element-type)\n .data(array)\n .join(element-type);\n```\n\nwhere:\n\n* container is a CSS selector string that specifies a single element that'll contain the joined HTML/SVG elements\n* element-type is a string describing the type of element you’re joining (e.g. ‘div' or 'circle')\n* array is the name of the array you’re joining\n\nTypically four methods are used in a data join:\n\n* .select defines the element that'll act as a container (or parent) to the joined HTML/SVG elements\n* .selectAll defines the type of element that'll be joined to each array element\n* .data defines the array that's being joined\n* .join performs the join. This is where HTML or SVG elements are added and removed","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":33,"value":"##

Exercise

\nJoin myData with circle","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"{\n const container = d3.create('svg')\n .attr('width', 600)\n .attr('height', 100);\n\n // Code here\n\n container.selectAll('circle')\n .data(myData)\n .join('circle');\n \n // return SVG DOM element\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":38,"value":"You can't see any circles because each radius is zero. However if you inspect and expand the SVG element (right click on the SVG element which has been coloured light pink and select Inspect) you'll see five circle elements have been added:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":42,"value":"## Updating the joined elements\n\nJoined HTML or SVG elements may be updated using the `.style`, `.attr` and `.text` methods. (The .join method returns a selection containing all of the joined elements.)\n\nFor example you can set the center, radius and colour of every circle using:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":44,"value":"{\n const container = d3.create('svg')\n .attr('width', 600)\n .attr('height', 100);\n\n // Code here\n container.selectAll('circle')\n .data(myData)\n .join('circle')\n .attr('cx', 200)\n .attr('cy', 50)\n .attr('r', 40)\n .style('fill', 'orange');\n \n // return SVG DOM element\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":46,"value":"## Data driven updates\n\nIf a **function** is passed into `.attr` or `.style` you can update the HTML/SVG elements in a **data-driven** manner.\n\nThe function is called for **each element in the selection**. It takes two parameters, typically named d and i.\n\nThe first parameter (d) represents the corresponding array element (or the 'joined value'). The second parameter i represents the index of the element within the selection.\n\nThe return value of the function is used to set the attribute or style value.\n\nLet's pass a function into the first `.attr`:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":48,"value":"{\n const container = d3.create('svg')\n .attr('width', 600)\n .attr('height', 100);\n\n // Code here\n container.selectAll('circle')\n .data(myData)\n .join('circle')\n .attr('cx', function(d, i) {\n return i * 100;\n })\n .attr('cy', 50)\n .attr('r', 40)\n .style('fill', 'orange');\n \n // return SVG DOM element\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":50,"value":"##

Exercise

\nSet `r` according to the joined value. Also let's colour the circle if its joined value is greater than 30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":60,"value":"{\n const container = d3.create('svg')\n .attr('width', 600)\n .attr('height', 100);\n\n // Code here\n container.selectAll('circle')\n .data(myData)\n .join('circle')\n .attr('cx', function(d, i) {\n return i * 100 + 50;\n })\n .attr('cy', 50)\n .attr('r', function(d, i) {\n return d;\n })\n .style('fill', (d, i) => d > 30 ? 'gold' : 'rebeccapurple');\n \n // return SVG DOM element\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":52,"value":"## Joining arrays of objects\n\nWhen building data visualisations with D3 you'll typically be joining arrays of objects (rather than arrays of numbers). For example: Code here","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":62,"value":"cities = [\n { name: 'London', population: 8674000},\n { name: 'New York', population: 8406000},\n { name: 'Sydney', population: 4293000},\n { name: 'Paris', population: 2244000},\n { name: 'Beijing', population: 11510000}\n];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"You can join an array of objects in the same manner as before. However, when a function is passed into `.attr` or `.style`, the d parameter is an object. This means that you'll typically reference a **property** of that object.\n\nFor example:\n\n```js\n .attr('r', function(d) {\n return 0.0001 * d.population;\n })\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":66,"value":"##

Exercise

\nCreate the circles above using the population to set up the `r` (use an scale factor 0.0004)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":71,"value":"{\n const container = d3.create('svg')\n .attr('width', 600)\n .attr('height', 100);\n\n // Code here\n container.selectAll('circle')\n .data(cities)\n .join('circle')\n .attr('cx', (d, i) => 100*i + 50)\n .attr('cy', 50)\n .attr('r', function(d, i) {\n return 0.000004 * d.population;\n })\n .style('fill', (d, i) => d > 30 ? 'red' : 'orange');\n \n // return SVG DOM element\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":73,"value":"##

Exercise

\nNow create an horizontal bar chart adding `rect`. `height` equals to 19, width population times 0.00004. `y` equals to `i*20`. Finally add some `text` elements and set the `y` position equals to `i*20+13`. Remember to call the `text` function.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":76,"value":"{\n const container = d3.create('svg')\n .attr('width', 600)\n .attr('height', 100);\n\n // Code here\n container.selectAll('rect')\n .data(cities)\n .join('rect')\n .attr('height', 19)\n .attr('width', (d, i) => 0.00004*d.population)\n .attr('y', (d, i) => i*20)\n .attr('fill', 'rebeccapurple')\n\n container.selectAll('text')\n .data(cities)\n .join('text')\n .attr('y', (d, i) => i*20+14)\n .text(d => d.name + \" -> \" + d.population)\n .attr('fill', 'gold')\n .attr('font-family', 'cursive')\n \n // return SVG DOM element\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":149,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"viewof replay = Inputs.button('Replay')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null