2b:null 2c:["$","title",null,{"children":"D3: Scales, Axes | Matthew Berger | Observable"}] 31:T465,md`## Quantitative-to-Quantitative

${Object.assign(await FileAttachment('quantitative-types.png').image(), {alt:'Quantitative Maps', style: 'width: 100%; max-width: 606px;' })} Constructing the scale: we enumerate, for each item in our data, what its corresponding value in the visual range should be... 😐 Let's instead consider **extents** of the domain and range.

${Object.assign(await FileAttachment('quantitative-extents.png').image(), {alt:'Extents', style: 'width: 100%; max-width: 606px;' })} More formally, let the data domain be denoted ${tex`D`} and the visual range ${tex`R`}, with the scale denoted by the map ${tex`f : D \rightarrow R`}. Further, denote the minimum and maximum of our data domain as ${tex`d_{min}`} and ${tex`d_{max}`}, respectively, and likewise, the minimum and maximum of our visual range as ${tex`r_{min}`} and ${tex`r_{max}`}, respectively. **Quantitative-to-quantitative scales should map extents** * ${tex`f(d_{min}) = r_{min}`} * ${tex`f(d_{max}) = r_{max}`} Still have some flexibility - what kind of function do we want ${tex`f`} to be? `32:T47a,{ let svg = d3.create('svg').attr('width', 400).attr('height', 400) // center our plot, leaving some padding on the sides let g = svg.append('g') // create just a single group element .attr('transform', 'translate(50,50)') // create a rectangle, to frame our plot g.append('rect') .attr('width', 300) .attr('height', 300) .attr('fill', 'none') .attr('stroke', d3.hcl(0,0,30)) // the data join! g.selectAll('circle') // empty: no circles exist .data(cars) // our car data .enter() // grab the enter selection - placeholder elements, one for each car .append('circle') // replace placeholders with circles .attr('cx', d => x_scale(d.Miles_per_Gallon)) // for a car, get its MPG, apply the scale -> x coordinate .attr('cy', d => y_scale(d.Displacement)) // likewise for the y coordinate .attr('r', 4) // radius does not encode data, so fix this to some amount - not too big, not too small .attr('fill', d3.hcl(120,20,70)) // provide a nice fill .attr('stroke', d3.hcl(0,0,20)) // a subtle stroke, to make the circles "pop" .attr('stroke-width', .5) return svg.node() }33:T4ee,md`### Square Root Scale The way that we constructed a linear scale can be extended to construct virtually _any_ type of (continuous) function. We will consider a few special cases here. Suppose we would like our scale to behave like a square root. In this case, what we do is adjust our ${tex`\alpha`} function: ${tex`\alpha(x) = \frac{\sqrt{x}-\sqrt{d_{min}}}{\sqrt{d_{max}}-\sqrt{d_{min}}}`} However, our function ${tex`f`} for actually _doing_ the mapping remains unchanged. ${tex`\alpha(x)`} varies like a square root, and it is still in the range of ${tex`[0,1]`}. We're done. However: the ratio criteria is now violated 😬! Why would we ever want to do this? Consider a circle as our (0-dimensional) graphical mark, and **size** as our visual variable. What geometric property of a circle do we _perceive_? * Its radius? * Its area? * Its circumference? It [turns out](https://eagereyes.org/blog/2008/linear-vs-quadratic-change) that we perceive **area**, rather than radius. As a result, if we use a linear scale for a circle's radius, its area will increase quadratically (${tex`A = \pi r^2`}) as a function of the data. However, if we use a square root scale for radius, then area will increase linearly. Let's compare these two options. `34:T8e2,{ let svg = d3.create('svg').attr('width', width).attr('height', 300) let plot_scale = d3.scaleBand().domain(['linear','sqrt']).range([4,295]).paddingInner(.2) let n_circles = 20, min_radius = 4, max_radius = 18 let circle_data = d3.range(n_circles).map(d => d+1) let r_linear_scale = d3.scaleLinear().domain([1,n_circles]).range([min_radius,max_radius]) let r_sqrt_scale = d3.scaleSqrt().domain([1,n_circles]).range([min_radius,max_radius]) let x_scale = d3.scaleBand().domain(circle_data).range([0,width-100]).padding(0.2) let line_scale = d3.scaleLinear() .domain([0,Math.PI*max_radius*max_radius]).range([plot_scale.bandwidth()-3,2.6*max_radius]) svg.selectAll('g').data(plot_scale.domain()).enter().append('g').attr('id', d => d) .attr('transform', d => `translate(50,${plot_scale(d)})`) .append('rect') .attr('width', width-100).attr('height', plot_scale.bandwidth()) .attr('fill', 'none').attr('stroke', d3.hcl(0,0,35)) svg.select('#linear').selectAll('circle').data(circle_data).enter().append('circle') .attr('cx', d => x_scale(d)+x_scale.bandwidth()/2).attr('cy', max_radius+5) .attr('r', d => r_linear_scale(d)).attr('stroke', 'none').attr('fill', d3.hcl(130,30,66)) svg.select('#linear').selectAll('path').data([0]).enter().append('path') .attr('fill', 'none').attr('stroke', d3.hcl(0,0,48)).attr('stroke-width', 2) .attr('d', _ => { let line = d3.line() .x((_,i) => x_scale(circle_data[i])+x_scale.bandwidth()/2) .y(d => line_scale(Math.PI*Math.pow(r_linear_scale(d),2))) return line(circle_data) }) svg.select('#sqrt').selectAll('circle').data(circle_data).enter().append('circle') .attr('cx', d => x_scale(d)+x_scale.bandwidth()/2).attr('cy', max_radius+5) .attr('r', d => r_sqrt_scale(d)).attr('stroke', 'none').attr('fill', d3.hcl(130,30,66)) svg.select('#sqrt').selectAll('path').data([0]).enter().append('path') .attr('fill', 'none').attr('stroke', d3.hcl(0,0,48)).attr('stroke-width', 2) .attr('d', _ => { let line = d3.line() .x((_,i) => x_scale(circle_data[i])+x_scale.bandwidth()/2) .y(d => line_scale(Math.PI*Math.pow(r_sqrt_scale(d),2))) return line(circle_data) }) return svg.node() }35:T671,md` Oof. We can hardly discern the distribution of the data for this interval. Instead, the subset of the data domain ${tex`[1000,10000]`} dominates the visual range. This is a limitation of using a linear scale, and how our data is distributed. Suppose our data is distributed in one of the following manners: * Uniform distribution ${tex`x \sim \mathcal{U}(d_{min},d_{max})`} * Normal distribution ${tex`x \sim \mathcal{N}(\mu,\sigma)`} * A mixture of normals (this is common) Then a linear scale is appropriate. But let's suppose our data was distributed in the following manner: ${tex`x \sim e^{\mu + \sigma z}`} In the above, ${tex`z`} is a normally-distributed variable with mean 0 and variance 1. This is known as a log-normal distribution. In this case, data _grows exponentially_ as a function of ${tex`z`}, and consequently, a linear scale will _bias_ the visual range to the _largest_ values. This is not unique to the log-normal distribution, we can also just exponentiate a uniformly-distributed variable. How can we account for exponential growth? We apply a logarithm, making the data linear! This motivates the log scale: ${tex`\alpha(x) = \frac{\log{x}-\log{d_{min}}}{\log{d_{max}}-\log{d_{min}}}`} Similar to the square root scale, ${tex`\alpha(x) \in [0,1]`}, and so the minimum of our data maps to the minimum of our visual range, the maximum of our data maps to the maximum of our visual range, and our scale grows logarithmically. To get a sense of log scale vs. linear scale, we can experiment with different data distributions, and different data domains. Here we will also introduce **Observable inputs** 😃! `36:T4ba,md`### Point Scales A point scale assumes a sequence of values (ordered) in the data domain, and since its visual range is quantitative, assumes the minimum and maximum values for the range. More formally, if we denote the input data domain by ${tex`D = (d_1, d_2, \cdots , d_n)`} and our visual range by ${tex`R = [r_{min}, r_{max}]`}, then the point scale, by default, satisfies the following: * ${tex`f(d_1) = r_{min}`} * ${tex`f(d_n) = r_{max}`} * ${tex`f(d_i) = (1-\frac{i-1}{n-1})r_{min} + \frac{i-1}{n-1}r_{max}`} This will split the visual range into **equal steps**, where the step is defined by: ${tex`\frac{1}{n-1}(r_{max}-r_{min})`}. For instance, for ${tex`n=3`}, the step will be half of the range, to account for the first data item at the beginning, the third data item at the end, and the second data item in the middle. In some cases, it is convenient to provide **padding** to the beginning and end of the visual range. For instance, if we are drawing circles and we are mapping their centers, the padding can account for the circle radius. For a nonzero padding, ${tex`f(d_1) \ne r_{min}`} and ${tex`f(d_n) \ne r_{max}`}. It is most instructive to show the consequences of padding: `37:T9a8,point_scale_plot = { // graciously yanked from https://observablehq.com/@d3/d3-scalepoint const fontSize = width > 500 ? "14px" : "10px"; return svg``; }38:T446,md`### Band Scales A band scale makes the same assumptions as a point scale regarding the data domain and visual range, but does not merely associate a single position with each data item. Rather, for each data item some subset of the visual range, otherwise known as **band**, is also associated with its value. Band scales are typically used for the spatial visual variable. Assuming no padding for now, the mapping for a band scale provides us the following: * ${tex`f(d_i) = (1-\frac{i-1}{n})r_{min} + \frac{i-1}{n}r_{max}`} The main difference here is in the denominator, which will result in a smaller spacing of the visual range. But, now associated with each item is a bandwidth: * ${tex`\text{bandwidth} = \frac{1}{n}(r_{max}-r_{min})`} The interpretation is as follows: the visual range occupied by data item ${tex`d_i`} is ${tex`[f(d_i),f(d_i)+\text{bandwidth}]`}. Band scales have two padding parameters: * Outer padding: this is akin to the step of a point scale. * Inner padding: this provides space _between_ bands. These parameters are illustrated in the following: `39:Tdf7,{ //graciously yanked from https://observablehq.com/@d3/d3-scaleband const fontSize = width > 500 ? "12px" : "8px"; return svg``; }3a:T4ce,{ let svg = d3.create('svg').attr('width', 300).attr('height', 400) let g = svg.append('g') .attr('transform', 'translate(25,25)') let ordinal_values = ['A','B','C','D'] let makeup_data = ordinal_values.map(d => { return {O:d,Q:Math.random()}}) let x_scale = d3.scaleBand() .domain(ordinal_values) .range([0,250]) .paddingInner(0.2) let height_scale = d3.scaleLinear() .domain([0,d3.max(makeup_data, d => d.Q)]) .range([0,350]) g.append('rect') .attr('width', 250).attr('height', 350) .attr('fill', 'none').attr('stroke', d3.hcl(0,0,45)) g.selectAll('bar') .data(makeup_data) .enter() .append('rect') .attr('x', d => x_scale(d.O)) // use the band scale to return a quantitative value the ordinal value .attr('y', d => 350-height_scale(d.Q)) // hmm, why is this being done? .attr('width', x_scale.bandwidth()) // use the band scale's bandwidth to determine each bar's width .attr('height', d => height_scale(d.Q)) // encode quantitative value with bar height .attr('fill', d3.hcl(120,30,66)).attr('stroke', d3.hcl(0,0,30)).attr('stroke-width', .4) return svg.node() }3b:T687,md`# Axes Axes are necessary components to visualization that tell us _how to read visual variables_. We commonly think about axes as tick marks and labels for the x-axis and y-axis of a plot, but really, an axis should be used for _every visual variable decision_. I am using the term "axis" loosely here, e.g. color legends for color, a legend to interpret size, orientation, and so on. In general: **Our plots should be readable by humans.** Now, for spatial visual variables, constructing axes actually boils down to ... **visualizing scales**! D3 has nice built-in support for this. How convenient 😃. We can take our scatterplot above, and add axes quite easily. To do so requires the following: * For each axis we create, we need to add it as a child to a group element. * The group element under consideration _may need to be transformed_. For instance, if we want to plot an x-axis on the bottom of the plot, then we need to specify a translation to that location. * We create an axis object via \`d3.axisOrientation\`, where \`Orientation\` is one of \`{Left, Right, Top, Bottom}\`, and provide it our scale. * For D3 to populate the corresponding group element with graphics that correspond to our axis (tick marks and text labels), we need to call the ... \`call\` method of a \`Selection\`. This method will take our axis, and append its elements to the group element. \`call\`, more broadly, is a useful method when we are creating elements and setting their attributes _over and over_ in the same exact manner - you can think of it like a function that intends to reduce redundant code. We will see more examples of it later. Let's try this out! `3c:T443,full_scatterplot = { let svg = d3.create('svg').attr('width', 400).attr('height', 400) let g = svg.append('g') .attr('transform', 'translate(50,50)') g.append('g') .attr('id', 'scatter') // this is to distinguish our scatterplot below... .selectAll('circle') .data(cars) .enter() .append('circle') .attr('cx', d => x_scale(d.Miles_per_Gallon)) .attr('cy', d => y_scale(d.Displacement)) .attr('r', 4) .attr('fill', d3.hcl(120,30,66)) .attr('stroke', d3.hcl(0,0,20)) .attr('stroke-width', .5) g.append('g').lower() .attr('class', 'axis y') // useful for uniquely identifying our axes! .call(d3.axisLeft(y_scale)) // create an axis for our y scale, on the left side of our plot g.append('g').lower() .attr('class', 'axis x') // useful for uniquely identifying our axes! .attr('transform', `translate(0,${y_scale.range()[0]})`) // translate down for the x scale .call(d3.axisBottom(x_scale)) // create an axis for the x scale, on the bottom //d3.axisBottom(x_scale)(g.select('.x')) return svg.node() }3d:[{"id":"1c2c8f12f99ab5d1f9bd36419c49fbbb9c6fcf808ec98df7fd2377187fd38bdfcd20bb7c32ccb043e6a0a85011dd4377128d2a5d1bd4d6d48079ab5d8fbc3186","href":"https://static.observableusercontent.com/files/1c2c8f12f99ab5d1f9bd36419c49fbbb9c6fcf808ec98df7fd2377187fd38bdfcd20bb7c32ccb043e6a0a85011dd4377128d2a5d1bd4d6d48079ab5d8fbc3186","name":"cars.json","type":"application/json","lastModified":1593453920751.562,"size":100492},{"id":"28e02bf147cd97c36ee2a34f825a2bcc611cb8992c7c081d9710a6870c216e57a1b1bf992de352ba5a92222af0fd1fc83ef9b757f2905eb317dc3444617c47c2","href":"https://static.observableusercontent.com/files/28e02bf147cd97c36ee2a34f825a2bcc611cb8992c7c081d9710a6870c216e57a1b1bf992de352ba5a92222af0fd1fc83ef9b757f2905eb317dc3444617c47c2","name":"quantitative-types.png","type":"image/png","lastModified":1599478513614.117,"size":141571},{"id":"3c751bbdbdb59536935a8e57be36170d11364563f20014a872b315967b0be25f1980553f4bc37cd7a61ca31228f41758977316290ca0eca51ff3d9d81f44b521","href":"https://static.observableusercontent.com/files/3c751bbdbdb59536935a8e57be36170d11364563f20014a872b315967b0be25f1980553f4bc37cd7a61ca31228f41758977316290ca0eca51ff3d9d81f44b521","name":"ratios@1.png","type":"image/png","lastModified":1599503017995.93,"size":19320},{"id":"1376bf46a4e7a654a34197e19e05848c91b5de3290204af76545ec2e7ec6f98fc85efebff94f7e910e98cbcfc7d510ad44483e461e7651897261d6dca7a574a6","href":"https://static.observableusercontent.com/files/1376bf46a4e7a654a34197e19e05848c91b5de3290204af76545ec2e7ec6f98fc85efebff94f7e910e98cbcfc7d510ad44483e461e7651897261d6dca7a574a6","name":"domain-range.png","type":"image/png","lastModified":1599477741199.558,"size":28016},{"id":"c693399798a204f398b62a14f326ae684160537dd618280b161c52eb61d7241ee137cedebb2a8e7b70479b7ec297cc7d1702561ea1136a1af261ebec723e0103","href":"https://static.observableusercontent.com/files/c693399798a204f398b62a14f326ae684160537dd618280b161c52eb61d7241ee137cedebb2a8e7b70479b7ec297cc7d1702561ea1136a1af261ebec723e0103","name":"quantitative-extents.png","type":"image/png","lastModified":1599480024510.654,"size":15911},{"id":"673d02884f2c326d82d39de5a397aeb6fd0aab50694d091a6332e0309c40cc411b3012f3607125c8e7b319ab3caa5f6c026cdc65fe8e18a740190e882997259f","href":"https://static.observableusercontent.com/files/673d02884f2c326d82d39de5a397aeb6fd0aab50694d091a6332e0309c40cc411b3012f3607125c8e7b319ab3caa5f6c026cdc65fe8e18a740190e882997259f","name":"all-types.png","type":"image/png","lastModified":1599478513628.42,"size":140240},{"id":"61c5c716173d8726ea90b4ce3c2bc91c81bdad0ea3d8be7d72267c2734824683267bbdf72557002ae375bb8e6a3ec09441033b0ad14ec5b72d85300205a13a4a","href":"https://static.observableusercontent.com/files/61c5c716173d8726ea90b4ce3c2bc91c81bdad0ea3d8be7d72267c2734824683267bbdf72557002ae375bb8e6a3ec09441033b0ad14ec5b72d85300205a13a4a","name":"discrete-types.png","type":"image/png","lastModified":1599478513633.008,"size":142942},{"id":"d6ce9a883cde538a9145a2bc34ca4e560aa4a8247e7177ae03598d60eddaf5a65bf3e5c105b9bd592162912145c424de365776fcf6f3cf4b27e9b05f8c0955fc","href":"https://static.observableusercontent.com/files/d6ce9a883cde538a9145a2bc34ca4e560aa4a8247e7177ae03598d60eddaf5a65bf3e5c105b9bd592162912145c424de365776fcf6f3cf4b27e9b05f8c0955fc","name":"ordinal-types.png","type":"image/png","lastModified":1599502387912.705,"size":141663}] 2f:{"id":"c4da3d2e18721868","slug":null,"title":"D3: Scales, Axes","thumbnail":"e51b02386c36a02e741ecc581ffcbcd910f99a8fa2019dd06891085d9389c94c","access_level":"unlisted","create_time":"$D2020-06-25T02:20:15.293Z","update_time":"$D2020-09-09T20:20:26.533Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"ff8d3dc5309f0e8f","login":"mattberger","name":"Matthew Berger","avatar_url":"https://avatars-next.observableusercontent.com/db43c568a6d4eb06d6475f8809d39dc6cc8e44a37000cb82904f063c85599c88","tier":"starter_2024"},"version":1154,"publish_version":1154,"role":null,"authored":false,"authors":[{"type":"individual","id":"3e3683c87ab9f224","login":"mattberger","name":"Matthew Berger","avatar_url":"https://avatars-next.observableusercontent.com/db43c568a6d4eb06d6475f8809d39dc6cc8e44a37000cb82904f063c85599c88","tier":null}],"members":[{"type":"individual","id":"3e3683c87ab9f224","login":"mattberger","name":"Matthew Berger","avatar_url":"https://avatars-next.observableusercontent.com/db43c568a6d4eb06d6475f8809d39dc6cc8e44a37000cb82904f063c85599c88","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"D3: Scales, Axes","cells":[{"id":0,"value":"md`# D3: Scales, Axes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`# Scales\n\n

${Object.assign(await FileAttachment('domain-range.png').image(), {alt:'Domain-to-Range', style: 'width: 100%; max-width: 606px;' })}\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":982,"value":"md`## Maps\n\nGiven an item in our data domain, how do we map it to the (chosen) visual range?\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":985,"value":"md`\n

${Object.assign(await FileAttachment('all-types.png').image(), {alt:'All Maps', style: 'width: 100%; max-width: 606px;' })}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":991,"value":"md`## Discrete-to-Discrete\n\n

${Object.assign(await FileAttachment('discrete-types.png').image(), {alt:'Discrete Maps', style: 'width: 100%; max-width: 606px;' })}\n\nWe manually decide: for each item in the data domain, what should be its item in the visual range?\n\n🙌\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":997,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1017,"value":"md` ### Linear Scales\n\nRecall principle of expressiveness: visual encoding should take on properties of the data.\n\nQuantitative data: **ratio preservation**\n\n\n${tex`\\frac{a-d_{min}}{b-d_{min}} = \\frac{f(a)-f(d_{min})}{f(b)-f(d_{min})}`}\n\n\n

${Object.assign(await FileAttachment('ratios@1.png').image(), {alt:'Ratios', style: 'width: 100%; max-width: 606px;' })}\n\nWe have sufficient constraints to construct a linear function:\n\n* For a given value ${tex`x \\in D`}, compute ${tex`\\alpha(x) = \\frac{x-d_{min}}{d_{max}-d_{min}}`}. Note that ${tex`\\alpha(x) \\in [0,1]`} assuming ${tex`x \\in [d_{min},d_{max}]`}.\n* Then ${tex`f(x) = (1-\\alpha(x)) r_{min} + \\alpha(x) r_{max}`}.\n\nQuestions:\n\n* How would you show the function is, indeed, linear?\n* Does this construction satisfy the ratio criteria? Why?\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"md`### \\`d3.scaleLinear\\`\n\nWe are now in a position to put this into practice. D3 has native support for a number of scales. The first we will consider is a linear scale. We construct it via \\`d3.scaleLinear()\\`, and then set its following methods:\n\n* \\`domain\\`: accepts an Array of 2 numbers, the minimum and maximum of our data domain.\n* \\`range\\`: accepts an Array of 2 numbers, the minimum and maximum of our visual range.\n\nThis should be familiar 😃. And for other quantitative-to-quantitative scales, this will be a _very common pattern_, requiring the following:\n\n* _Compute_ the **extents** of your data domain.\n* _Determine_ the **extents** of your visual range.\n\nLet's use a linear scale to create a scatterplot: one scale for the x-axis, and another for the y-axis.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"cars = FileAttachment(\"cars.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"md`\n\nTo compute the extent - minimum and maximum - for quantitative data, we use \\`d3.extent\\`.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"mpg_extent = d3.extent(cars, d => d.Miles_per_Gallon)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"displacement_extents = d3.extent(cars, d => d.Displacement)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"md`\n\nWe next compute our scales. We have our data domain from the above! But what about the range?\n\nThe range of our visual variables is usually something we prescribe. For instance, we know, a priori, where the x-axis of our plot should begin, and where it should end.\n\nSometimes, though, our visual variables are data-dependent! We will see examples of this later.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"x_scale = d3.scaleLinear().domain(mpg_extent).range([0,300])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"y_scale = d3.scaleLinear().domain(displacement_extents).range([300,0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"md`\n\nThe range for \\`y_scale\\` probably looks a bit funny. However, recall the SVG coordinate system: the y-axis points **down**. By specifying the minimum of our visual variable for \\`y\\` to be pixel coordinate 300 (the _bottom_ of the plot), and the maximum to be pixel coordinate 0 (the _top_ of the plot), we account for this nuance with SVG.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"md`\n\nNotice how some points intersect the rectangle frame. Why is this happening? How would you fix this?\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1041,"value":"md`\n\n**Sidebar: D3 Amnesia**\n\nFaced with nothing but data, _what do you do?_\n\nHere is your D3 mantra:\n\n* Given data Array, identify attributes.\n* For each attribute, compute its extent, decide on visual variable.\n* Construct a scale for each attribute.\n* Issue \\`data\\` join on Array, create elements.\n* For each data attribute, issue \\`attr\\` corresponding to its visual variable. _Assign value from scale, given data._\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"md`\n\nIn the above example, \\`d3.scaleSqrt\\` is used, constructed in the exact same manner as \\`d3.scaleLinear\\`.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"md`### Log Scale\n\nLet's suppose that the exent of our data is ${tex`[1,10000]`}, and the data is uniformly distributed within this interval. We then go ahead and plot our data:\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"{\n let svg = d3.create('svg').attr('width', width).attr('height', 100)\n \n let g = svg.append('g').attr('transform', 'translate(50,25)')\n \n let n_points = 90\n let rand_data = d3.range(n_points).map(_ => 1 + (10000-1)*Math.random())\n let x_scale = d3.scaleLinear().domain([1,10000]).range([0,width-100])\n \n g.selectAll('circle').data(rand_data).enter().append('circle')\n .attr('cx', d => x_scale(d)).attr('cy', 25).attr('r', 6)\n .attr('fill', d3.hcl(120,30,66)).attr('opacity', .6)\n \n g.append('g').attr('transform', `translate(0,${25+8})`).call(d3.axisBottom(x_scale))\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"md`\n\nSo we see that data values that lie in ${tex`[1000,10000]`} are clearly depicted. But what about data in ${tex`[1,1000]`}? Well, in this example, as our data was uniformly distributed, this is ok. But what if _most_ of the data was in the interval ${tex`[1,1000]`}?\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"{\n let svg = d3.create('svg').attr('width', width).attr('height', 100)\n \n let g = svg.append('g').attr('transform', 'translate(50,25)')\n \n let n_small_points = 90, n_large_points = 10\n let small_data = d3.range(n_small_points).map(_ => 1 + (1000-1)*Math.random())\n let large_data = d3.range(n_large_points).map(_ => 1001 + (10000-1001)*Math.random())\n let rand_data = small_data.concat(large_data)\n let x_scale = d3.scaleLinear().domain([1,10000]).range([0,width-100])\n \n g.selectAll('circle').data(rand_data).enter().append('circle')\n .attr('cx', d => x_scale(d)).attr('cy', 25).attr('r', 6)\n .attr('fill', d3.hcl(120,30,66)).attr('opacity', .6)\n \n g.append('g').attr('transform', `translate(0,${25+8})`).call(d3.axisBottom(x_scale))\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"viewof scale_type = select({\n description: 'Pick your scale.',\n options: ['linear', 'log'],\n value: 'linear'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"viewof distribution_type = select({\n description: 'Pick your distribution.',\n options: ['uniform', 'exponentiated uniform'],\n value: 'uniform'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"viewof min_d = slider({\n min: 1, \n max: 10, \n step: 0.1, \n value: 1,\n description: 'Minimum of your data'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"viewof max_d = slider({\n min: 11, \n max: 1000, \n step: 0.1, \n value: 100,\n description: 'Maximum of your data'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"{\n let svg = d3.create('svg').attr('width', width).attr('height', 100)\n \n let g = svg.append('g').attr('transform', 'translate(50,25)')\n \n let min_val = min_d, max_val = max_d, min_log = Math.log(min_val), max_log = Math.log(max_val), n_points = 90\n let rand_data = d3.range(n_points).map(_ => {\n let alpha = Math.random()\n return distribution_type == 'uniform' ? (1-alpha)*min_val + alpha*max_val : Math.exp((1-alpha)*min_log + alpha*max_log)\n })\n let x_scale = scale_type == 'linear' ? d3.scaleLinear() : d3.scaleLog()\n x_scale.domain([min_val,max_val]).range([0,width-100])\n \n g.selectAll('circle').data(rand_data).enter().append('circle')\n .attr('cx', d => x_scale(d)).attr('cy', 25).attr('r', 6)\n .attr('fill', d3.hcl(120,30,66)).attr('opacity', .6)\n \n g.append('g').attr('transform', `translate(0,${25+8})`).call(d3.axisBottom(x_scale))\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"md` ## Ordinal-to-Quantitative\n\n

${Object.assign(await FileAttachment('ordinal-types.png').image(), {alt:'Ordinal Maps', style: 'width: 100%; max-width: 606px;' })}\n\nRecall: **ordinal values are equidistant**: all we can say is that \"**A** is less than **B**\", but _not_ \"**A** is 4 times less than **B**\".\n\nPrinciple for this mapping: divide quantitative range into **equal-spaced values**.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"ps_ordinal_domain = 'ABCDEF'.split('').filter((_,i) => i < ps_domain_cardinality)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"quantitative_range = [60, Math.min(700, width - 60)]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"point_scale = d3.scalePoint()\n .domain(ps_ordinal_domain)\n .range(quantitative_range)\n .padding(ps_padding)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":496,"value":"viewof ps_domain_cardinality = slider({\n min: 2, \n max: 6, \n step: 1, \n value: 3,\n description: 'Domain Cardinality'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":499,"value":"viewof ps_padding = slider({\n min: 0, \n max: 1, \n step: 0.01, \n value: 0,\n description: 'Padding'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":479,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":535,"value":"bs_ordinal_domain = 'ABCDEF'.split('').filter((_,i) => i < bs_domain_cardinality)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":520,"value":"viewof bs_domain_cardinality = slider({\n min: 2, \n max: 6, \n step: 1, \n value: 3,\n description: 'Domain Cardinality'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"viewof bs_paddingOuter = slider({\n min: 0, \n max: 1, \n step: 0.01, \n value: 0,\n description: 'Outer padding'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":524,"value":"viewof bs_paddingInner = slider({\n min: 0, \n max: 1, \n step: 0.01, \n value: 0,\n description: 'Inner padding'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":530,"value":"band_scale = d3.scaleBand()\n .domain(bs_ordinal_domain)\n .range(quantitative_range)\n .paddingInner(bs_paddingInner)\n .paddingOuter(bs_paddingOuter)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":539,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"md`\n\nBand scales are super useful:\n\n* It is not too hard to see how the \"bands\" above resemble \"bars\" in a bar plot. Indeed, band scales are commonly used for bars - the map provides us the **start** of the bar, and the bandwidth provides us the **width** of the bar. We can then adjust padding between bars as we see fit!\n* Where band scales are most powerful, in my opinion, is **positioning and sizing plots**. This will be evident when we cover multiple view arrangements, but for now, you should think about how each value of a data attribute can correspond to a plot, and thus the band scale's map determines the plot's position, and its bandwidth represents the drawing area for the plot ...\n\nFor now, let's create a bar plot.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":659,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":464,"value":"md`## Nominal-to-Quantitative?\n\nRecall that with nominal data, if the visual variable we choose for our encoding is quantitative, then we have no choice but to impose some ordering. Hence, we can apply the scales above to nominal data in the exact same manner! We just need to determine the ordering for the nominal attribute.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"md` ## Quantitative-to-Ordinal\n\nThere do exist scales for handling quantitative domains and ordinal ranges, but we will rarely use these scales in this course. These are typically handled for _quantizing_ data, please see [the docs](https://observablehq.com/@d3/d3-quantize) for examples if interested.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":603,"value":"$3c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"md`## Tweaking Axes\n\nSuppose you were not a fan of the defaults used for creating axes by D3 (🙋🏻 I am one of these people). We can actually tweak them to our liking! But we need to understand what is created by an axis. So let's take a closer look ...\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":609,"value":"viewof full_scatterplot_vis = drawdom(full_scatterplot,10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":611,"value":"full_scatterplot_vis","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":614,"value":"{\n let axis_tweak = (axis_g) => {\n axis_g.selectAll('path').attr('stroke', d3.hcl(0,0,70))\n axis_g.selectAll('.tick').selectAll('line').attr('stroke', d3.hcl(0,0,45))\n axis_g.selectAll('.tick').selectAll('text').attr('fill', d3.hcl(0,0,45))\n }\n // d3.select(full_scatterplot).selectAll('.axis').call(axis_tweak)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":645,"value":"md`\n\nThe group elements that are created for each tick provide us a nice way to customize axes. As an example, let's suppose we wanted to create **guides**, so we can more easily identify attribute values for individual marks. The groups associated with ticks have applied appropriate transformations, so any element we create under a tick will be positioned _relative_ to this transformation. As a result, guides are really simple to create: we _think locally_, and just specify the horizontal/vertical spans.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":633,"value":"{\n// d3.select(full_scatterplot).selectAll('.x').selectAll('.tick')\n// .append('line') // vertical guides\n// .attr('y1', -y_scale.range()[0]).attr('y2', y_scale.range()[1]) // use scale to position guides\n// .attr('stroke-width', .7).attr('stroke', d3.hcl(0,0,90))\n \n// d3.select(full_scatterplot).select('.y').selectAll('.tick')\n// .append('line') // horizontal guides\n// .attr('x1', x_scale.range()[0]).attr('x2', x_scale.range()[1]) // use scale to position guides\n// .attr('stroke-width', .7).attr('stroke', d3.hcl(0,0,90))\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":663,"value":"md`\n\nAxes can also be created for ordinal-to-quantitative scales. I encourage trying this out on the bar plot above.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1116,"value":"md`## Axis Labels`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1119,"value":"{\n// d3.select(full_scatterplot)\n// .selectAll('.x')\n// .append('text')\n// .text('Miles Per Gallon')\n// .attr('transform', 'translate(150,30)')\n// .attr('text-anchor', 'middle')\n// .attr('fill', d3.hcl(0,0,30))\n// .attr('font-weight', 'bold')\n \n// d3.select(full_scatterplot)\n// .selectAll('.y')\n// .append('text')\n// .text('Displacement')\n// .attr('transform', 'translate(-34,150) rotate(270)')\n// .attr('text-anchor', 'middle')\n// .attr('fill', d3.hcl(0,0,30))\n// .attr('font-weight', 'bold')\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"md`# Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"import {drawdom,drawjoin} from '91007ee9d5fd152b'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"import {slider,select} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3d","stdlib":"1","titling":"auto"}} 30:"$2f:body"