30:null 31:["$","title",null,{"children":"D3 Tutorial Part 2 - The Data Join | Marius Hogräfer | Observable"}] 36:T462,md` So what exactly happened there? We defined an empty SVG canvas. Our data is a flat array of integer numbers. Then, we defined the data join between all \`text\` elements in that canvas and the entries of our dataset. Since our canvas did not contain any \`text\` elements yet, D3 created a new element in _exampleCanvas_ for every entry in our data. Using the \`.attr()\` function, we then defined how each of these elements should look like: * The x position is the product of the value of the element of our data and 25, using an accessor function * The y position is set fixed to 25 pixels. * The font of the text is sans-serif and has a dark blue color * The actual text that each \`text\` element represent is the value from the data The interesting parts of this are of course the data-dependent styles (x and text), which we defined using an arrow function. The function is evaluated for every element in the data join, which is passed to the function as the parameter \`d\`. If our data is an array of structured objects, we can use the arrow function to access the properties of each element, like so: `37:[] 34:{"id":"3b675624d111d618","slug":"d3-tutorial-part-2-the-data-join","title":"D3 Tutorial Part 2 - The Data Join","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2019-09-21T19:17:50.559Z","update_time":"$D2023-09-21T06:21:54.208Z","view_time":null,"first_public_time":"$D2019-09-24T07:45:58.865Z","fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"3adf8da5f114b89d","login":"mahog","name":"Marius Hogräfer","avatar_url":"https://avatars-next.observableusercontent.com/89ae96d8530754fb6ed75fdeb4226d4278c2bfc782de259df99b2ac34bd420aa","tier":"starter_2024"},"version":733,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f14bf17e190cd922","login":"mahog","name":"Marius Hogräfer","avatar_url":"https://avatars-next.observableusercontent.com/89ae96d8530754fb6ed75fdeb4226d4278c2bfc782de259df99b2ac34bd420aa","tier":null}],"members":[{"type":"individual","id":"f14bf17e190cd922","login":"mahog","name":"Marius Hogräfer","avatar_url":"https://avatars-next.observableusercontent.com/89ae96d8530754fb6ed75fdeb4226d4278c2bfc782de259df99b2ac34bd420aa","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"169224c119756340","slug":"davi-d3-tutorial","title":"DAVI - D3 Tutorial","owner":{"id":"3adf8da5f114b89d","login":"mahog","name":"Marius Hogräfer"}},"type":"notebook","body":{"title":"D3 Tutorial Part 2 - The Data Join","cells":[{"id":714,"value":"md`\n# D3 Tutorial Part 2 - The Data Join`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":716,"value":"html`\n\n $\"AU$ \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"md`\n\nThis notebook is part of the tutorial series on D3 for the Data Visualization lecture at Aarhus University. In this notebook, we will build on the concepts from part 1 to learn about arguably the most important concept in D3: The data join.\n\nThroughout this notebook, you will find some JavaScript code snippets which you can execute using Shift+Enter or by clicking the blue arrow on the top right of the cell. You can also modify the code to play around with the functions and parameters.\n\nLet's try this out in the next cell, where we import d3 into this notebook which will allow us to use the library in this notebook:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3@5\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":697,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"md`\n## What is data in D3?\n\nD3 is short for _data driven documents_. \nIn turn, when working with D3, we first need to think about what kind of data we are working with.\n\nAn important point to make here is that in d3, there are no restrictions as to what can serve as data.\nIt is possible to represent any arbitrary JavaScript object with visual marks.\n(Side note: Its flexibility - not only in regards to data, but in general - is possibly the main reason why d3 is still so popular as a visualization framework right now).\n\nUsually however, data comes in one of three shapes.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"md`\n**1: A flat list of values**\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"data_example1 = [5, 4, 7, 1, 5, 7, 0, 1, 4, 5, 6]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"\nmd`\n**2: Arrays of values in another array: **\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"data_example2 = [[2.2, 11.5, 7], [7, 23, 1], [1, 1, 2], [0, 12, 11]];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"\nmd`\n**3: An array of structured objects**\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"data_example3 = [{name: \"Gunnar Bang Mikkelsen\", age: 38}, {name: \"Ditte Hæyer Rasmussen\", age: 24}, {name: \"Pernille Daal Pedersen\", age: 47}];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"md`\nThe latter data structure is the most common one, as it expresses tabular data. \nWe will use this type of data in the exercise at the end of this part of the tutorial.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"md`\nNow that we know what our data looks like, let's get to the data join.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":702,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"md`\n## The Data Join\n\nIn visualization, our goal is to represent some piece of information through the visual variables of a visual mark.\nThis mapping between data and visual marks in D3 is called _data join_.\nSimilar to _d3.selectAll()_, joining data with visual marks saves us from writing a lot of boilerplate code, which let's us focus on the interesting things rather than repetitious data management.\n\nSo how does the data join work?\nIn D3, for every element of our data, we add individual SVG elements to the DOM and store the data as a property of that element.\nThat way, D3 creates a bi-directional mapping between elements of the data and elements in the DOM, which allows us to update one when the other changes.\n\nLet's look at an example:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":616,"value":"width = 900","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":618,"value":"height = 250","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"svg`\n\n` ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"testData = d3.range(10) // array of the first ten integer numbers, starting with 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"\nd3.select(\"#exampleCanvas\").selectAll(\"text.step1\").data(testData)\n .join(\"text\")\n .attr(\"class\", \"step1\")\n .attr(\"x\", d => d * 25)\n .attr(\"y\", 20)\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"fill\", \"steelblue\")\n .text(d => d);\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":469,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":490,"value":"testData2 = [\n {name: \"a\", value: 3, type: \"YB\"}, \n {name: \"b\", value: 2, type: \"CC\"}, \n {name: \"c\", value: 4, type: \"DD\"}, \n {name: \"d\", value: 1, type: \"FE\"}, \n {name: \"e\", value: 5, type: \"GG\"}\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":659,"value":"svg`\n\n` ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"\nd3.select(\"#exampleCanvas2\").selectAll(\"text.step2\").data(testData2)\n .join(\"text\")\n .attr(\"class\", \"step2\")\n .attr(\"x\", d => d.value * 25)\n .attr(\"y\", 30)\n .attr(\"font-size\", d => d.value ** 2 + 10)\n .attr(\"fill\", \"steelblue\")\n .text(d => d.name);\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"md`\nThis allows us to define mappings between properties of the items in our data and any visual variable that we can define in SVG.\nTo help us do this, D3 provides us with a valuable helper function: Scales.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":705,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"md`\n## Scales\n\n[Scales in D3](https://github.com/d3/d3-scale) are basically mapping function between a _domain_ (i.e. the range of values in our data) and a _range_ (i.e. the possible values that we can map this data to).\nFor each type of data, there are specific scales that can define the mapping from a value of the data to a visual variable.\n\nQuantitative data such as the horsepower of a car is best mapped to continuous values such as the height of a bar or the x-position in a scatter plot.\nD3 offers [continuous scales](https://github.com/d3/d3-scale#continuous-scales) for this purpose.\nContinuous scales can use a linear, exponential, or logarithmic mappings.\n\nOrdinal data such as the year in which a car was built is best mapped to ordinal values such as different colors or shapes of a visual mark.\nD3 offers [ordinal scales](https://github.com/d3/d3-scale#ordinal-scales) for this purpose, which define a mapping between a discrete domain and range.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":512,"value":"md`\nLet's say we want to define a scale for the ${dimensionA} dimension in our cars data set, which is a quantitative value.\nA good practise for linear scales is to extract the maximum value from the data beforehand (if possible), rather than using fixed values.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"carData = fetch(\"https://vega.github.io/editor/data/cars.json\")\n .then(result => result.json());","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":520,"value":"dimensionA = \"Horsepower\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"rangeHorsepower = carData.map(d => d[dimensionA]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"maxHorsepower = d3.max(rangeHorsepower);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"md`\nIt is save to assume 0 as the lower bound for the scale, however we could also extract the minimum value just like we did with the upper bound of the scale's domain.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"md`\nWe will use the width we defined above as the upper bound of our range.\nThis means that our scale will define the mapping from 0 to the maximum ${dimensionA} value onto 0 to the maximum x coordinate in our canvas.\n\nLet's define the scale for our horizontal mapping:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":514,"value":"horizontalScale = d3.scaleLinear()\n .domain([0, maxHorsepower])\n .range([0, width])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":535,"value":"md`\nAs stated above, a scale is a function.\nWe can now pass values from our domain to the scale and get a horizontal position in return.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":541,"value":"x1 = horizontalScale(100)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":544,"value":"x2 = horizontalScale(carData[0].Horsepower)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"md`\nNow it's your turn. \nDefine a mapping function from the Miles_per_Gallon dimension to the height we have defined above.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"dimensionB = \"Miles_per_Gallon\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":558,"value":"rangeMpG = carData.map(d => d[dimensionB])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":556,"value":"// maxMpG = ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":553,"value":"verticalScale = d3.scaleLinear()\n// .domain()\n// .range()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":591,"value":"md`Some tests to see if the scale works as expected:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":592,"value":"verticalScale(20)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":596,"value":"verticalScale(0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":571,"value":"md`\nNow define a mapping from the country of origin to a color scale.\nNote that ${dimensionC} is a nominal dimension, which means you will need an ordinal scale to represent it.\nHave a look at [the D3 documentation](https://github.com/d3/d3-scale#ordinal-scales) for that.\nYou can either define your own color values or use one of [the preset color schemes](https://github.com/d3/d3-scale-chromatic).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"dimensionC = \"Origin\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":581,"value":"colorScale = d3.scaleOrdinal()\n// ... ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"md`Again some tests to see if the scale works as expected:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":583,"value":"colorScale(\"Japan\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":589,"value":"colorScale(\"USA\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":708,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":562,"value":"md`\n## Exercise: Putting everything together\nScales are another great way of simplifying the code we write to define a visualization.\nSince scales are functions, we can easily use them to access the data in the data join and return a value based on that data.\n\nUncomment the code in the next cell and adapt the attribute modifiers for \\`cx\\` and \\`cy\\` to accessor functions that use the horizontal and vertical scales defined above.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":667,"value":"svg`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":601,"value":"\nd3.select(\"#exampleCanvas3\").selectAll(\"circle\").data(carData)\n .join(\"circle\")\n //.attr(\"cx\", ???) // add accessor to horizontal scale\n //.attr(\"cy\", ???) // add accessor function to vertical scale\n .attr(\"r\", 5)\n .attr(\"fill\", \"steelblue\") // replace with your color scale from above\n .attr(\"fill-opacity\", 0.7)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":711,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"md`\n## Further Reading\n* [An in-depth guide to d3's data join by Mike Bostock](https://observablehq.com/@d3/selection-join?collection=@d3/d3-selection)\n* [Thinking in Data Joins by Mike Bostock](https://bost.ocks.org/mike/join/) (good read, but be aware that some API calls are deprecated by now and might not even work anymore)\n* [d3 selection API reference on GitHub](https://github.com/d3/d3-selection)\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 35:"$34:body"