2c:null 2d:["$","title",null,{"children":"D3 Tutorial Part 2 - The Data Join | Marius Hogräfer | Observable"}] 32: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: `33:[] 30:{"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","has_unpublished_edits":null,"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","bio":"A ♥ for data visualization + interaction"},"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,"bio":"A ♥ for data visualization + interaction"}],"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":{"titling":"auto","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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":716,"value":"html`\n\n $\"AU$ \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3@5\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":697,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":520,"value":"dimensionA = \"Horsepower\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"rangeHorsepower = carData.map(d => d[dimensionA]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"maxHorsepower = d3.max(rangeHorsepower);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":541,"value":"x1 = horizontalScale(100)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":544,"value":"x2 = horizontalScale(carData[0].Horsepower)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"dimensionB = \"Miles_per_Gallon\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":558,"value":"rangeMpG = carData.map(d => d[dimensionB])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":556,"value":"// maxMpG = ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":592,"value":"verticalScale(20)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":596,"value":"verticalScale(0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"dimensionC = \"Origin\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":581,"value":"colorScale = d3.scaleOrdinal()\n// ... ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":583,"value":"colorScale(\"Japan\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":589,"value":"colorScale(\"USA\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":708,"value":"html`