31:T8be,{ const margin = ({top: 30, right: 30, bottom: 30, left: 30}); const barId = DOM.uid("bar"); const arrowId = DOM.uid("arrow"); return htl.svg``; }32:[{"id":"ef5fbb8b77ff7c117ec45df5583ee5919321685578e8247c348eaa9139e6dacf64ef339374c8069109351d0985aee2e536884e5cb82d4361c21123adb8790475","href":"https://static.observableusercontent.com/files/ef5fbb8b77ff7c117ec45df5583ee5919321685578e8247c348eaa9139e6dacf64ef339374c8069109351d0985aee2e536884e5cb82d4361c21123adb8790475","name":"bertin-variables.png","type":"image/png","lastModified":1581530282111.814,"size":329437}] 2e:{"title":"Learn D3: Scales","cells":[{"id":75,"value":"# Learn D3: Scales\n\nOf all D3’s tools for data graphics, the most fundamental is the *scale*, which maps an abstract dimension of data to a visual variable.\n\nFor a taste, consider this tiny (but delicious!) dataset of fruit.","pinned":false,"hidden":false,"mode":"md"},{"id":1295,"value":"fruits = [\n {name: \"🍊\", count: 21},\n {name: \"🍇\", count: 13},\n {name: \"🍏\", count: 8},\n {name: \"🍌\", count: 5},\n {name: \"🍐\", count: 3},\n {name: \"🍋\", count: 2},\n {name: \"🍎\", count: 1},\n {name: \"🍉\", count: 1}\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":3042,"value":"We typically think of dimensions as spatial, such as position in three dimensions, but an abstract dimension need not be spatial. It may be quantitative, such as the *count* of each fruit above. Or it may be nominal, such as a *name*.","pinned":false,"hidden":false,"mode":"md"},{"id":3825,"value":"fruits.map(d => d.count) // the count dimension (quantitative)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3828,"value":"fruits.map(d => d.name) // the name dimension (nominal)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3061,"value":"In *Semiology of Graphics*, Jacques Bertin describes how graphical marks such as points and lines can “represent differences (≠), similarities (≡), a quantified order (Q), or a nonquantified order (O), and can express groups, hierarchies, or vertical movements” using position, size, color, and the like. These properties of graphical marks are our visual variables.","pinned":false,"hidden":false,"mode":"md"},{"id":3075,"value":"

From *Semiology of Graphics*, colorized by the author.

","pinned":false,"hidden":false,"mode":"md"},{"id":3394,"value":"Like many visualizations, the bar chart below maps two abstract dimensions to two visual variables: the *name* dimension is mapped to the bars’ *y*-position, while the *count* dimension is mapped to the *x*-position. These mappings are implemented by the *x* and *y* scales that follow.","pinned":false,"hidden":false,"mode":"md"},{"id":3396,"value":"htl.html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":2241,"value":"x = d3.scaleLinear()\n .domain([0, d3.max(fruits, d => d.count)])\n .range([margin.left, width - margin.right])\n .interpolate(d3.interpolateRound)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2237,"value":"y = d3.scaleBand()\n .domain(fruits.map(d => d.name))\n .range([margin.top, height - margin.bottom])\n .padding(0.1)\n .round(true)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3081,"value":"(Feel free to edit the code and see what happens!)\n\nD3 scales come in many types. Which you use depends on the abstract dimension (quantitative or nominal?) and the visual variable (position or color?). Here *x* is a [linear scale](/@d3/d3-scalelinear) because *count* is quantitative and bar length should be proportional to value, while *y* is a [band scale](/@d3/d3-scaleband) because *name* is nominal and bars are thick.","pinned":false,"hidden":false,"mode":"md"},{"id":3474,"value":"Each scale is configured by pairwise correspondences from abstract data (the *domain*) to visual variable (the *range*). For example, the *x*-domain’s lower value (0) is mapped to *x*-range’s lower value (the chart’s left edge), while the domain’s upper value (the maximum count) is mapped to the range’s upper value (the right edge).","pinned":false,"hidden":false,"mode":"md"},{"id":3539,"value":"For a linear scale, the domain and range are continuous intervals (from *min* to *max*). For a band scale, the domain is an array of discrete values (🍊, 🍇, 🍏, …) while the range is a continuous interval; the band scale automatically determines how to slice the range into discrete, padded bands.","pinned":false,"hidden":false,"mode":"md"},{"id":4036,"value":"The scales above are configured using *method chaining*. This concise style is possible because methods that configure a scale, such as *scale*.domain, return the scale. Here’s the equivalent longhand.","pinned":false,"hidden":false,"mode":"md"},{"id":4039,"value":"{\n const x = d3.scaleLinear();\n x.domain([0, d3.max(fruits, d => d.count)]);\n x.range([margin.left, width - margin.right]);\n x.interpolate(d3.interpolateRound);\n return x;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":4050,"value":"Scale methods can also be used to retrieve their associated values if you call them with no arguments. This is useful for deriving new scales or debugging.","pinned":false,"hidden":false,"mode":"md"},{"id":4046,"value":"x.domain()","pinned":true,"hidden":false,"mode":"ojs"},{"id":4047,"value":"x.range()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2893,"value":"And what *is* a D3 scale? A function. Calling it returns the visual value (such as an *x*-position) corresponding to the given abstract value (such as a *count*).","pinned":false,"hidden":false,"mode":"md"},{"id":2717,"value":"y(\"🍇\") // the y-coordinate for name = grapes","pinned":true,"hidden":false,"mode":"ojs"},{"id":2720,"value":"x(21) // the x-coordinate corresponding to count = 21","pinned":true,"hidden":false,"mode":"ojs"},{"id":4313,"value":"x(0) // the x-coordinate corresponding to count = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":4191,"value":"By [convention](/@d3/margin-convention), most D3 charts apply margins to inset scale ranges and make room for axes. Hence, *x*(0) is often not zero; it’s the size of the left margin.","pinned":false,"hidden":false,"mode":"md"},{"id":4076,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":3435,"value":"The *xy*-position returned by these scales is a point, such as [*x* = 640, *y* = 30]. But since bars aren’t infinitesimal—they have a width and height—this position corresponds to the bar’s top-right corner. The bar’s width is *x*(*count*) - *x*(0), and its height is defined as *y*.bandwidth() by the band scale.","pinned":false,"hidden":false,"mode":"md"},{"id":3541,"value":"htl.html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":3595,"value":"x(21) - x(0) // the width of the bar corresponding to count = 21","pinned":true,"hidden":false,"mode":"ojs"},{"id":3597,"value":"y.bandwidth() // the height of each bar","pinned":true,"hidden":false,"mode":"ojs"},{"id":3620,"value":"Let’s peel away another layer of the onion (or the… banana?) to see how scales are used. Below is the code for a solitary bar.","pinned":false,"hidden":false,"mode":"md"},{"id":3603,"value":"viewof count = Inputs.range([0, 21], {value: 12, step: 1, label: \"Count\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3607,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":2139,"value":"The code above uses [hypertext literal (htl)](/@observablehq/htl), which is a convenient way to render HTML or SVG markup in Observable. Dynamic expressions, such as the width of the bar, can be embedded in literals as \\${…}.","pinned":false,"hidden":false,"mode":"md"},{"id":2442,"value":"The real magic of hypertext literals, though, is that embedded expressions can be DOM elements or even arrays of DOM elements! We can thus generate all the bars simultaneously by mapping the data to SVG elements.","pinned":false,"hidden":false,"mode":"md"},{"id":2695,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":3746,"value":"(These nested expressions use htl.svg—a hypertext literal specifically for SVG rather than HTML—because SVG elements have their own XML namespace. You can use either htl.svg or htl.html for the outer SVG element, but within, the SVG literal is necessary. Because namespaces.)","pinned":false,"hidden":false,"mode":"md"},{"id":2945,"value":"Another great reason to use scales is that D3 provides axes for explicitly showing a positional scale’s encoding, complete with nice, human-readable ticks. Axes improve the readability of charts, helping you to communicate.","pinned":false,"hidden":false,"mode":"md"},{"id":2270,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":4347,"value":"D3 axes require [selections](https://d3js.org/d3-selection), which we’ve so far avoided in favor of declarative hypertext literals. But as above, the two can be paired harmoniously.","pinned":false,"hidden":false,"mode":"md"},{"id":3899,"value":"To add the axis, we first create a (as yet detached) G element using htl.svg. Then we select this element by passing it to [d3.select](https://d3js.org/d3-selection/selecting#select). Then we invoke [*selection*.call](https://d3js.org/d3-selection/control-flow#selection_call) once to render the axis into the G element, and again to remove the domain path (for a minimalist style). Lastly we retrieve the G element by calling [*selection*.node](https://d3js.org/d3-selection/control-flow#selection_node), and embed it in the outer literal.","pinned":false,"hidden":false,"mode":"md"},{"id":2950,"value":"Position is the strongest visual variable, so it’s not a coincidence that our discussion of scales has so far focused on position.\n\nYet scales can be used for other visual variables, such as color. 🌈","pinned":false,"hidden":false,"mode":"md"},{"id":3763,"value":"color = d3.scaleSequential()\n .domain([0, d3.max(fruits, d => d.count)])\n .interpolator(d3.interpolateBlues)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3940,"value":"The code above defines a sequential scale, which is similar to a linear scale except instead of a range it relies on an interpolator. And an interpolator is a function which takes a value between 0 and 1, returning the corresponding visual value. Often, this interpolator is one of D3’s [built-in color schemes](/@d3/color-schemes).\n\nPassing this color scale a count returns the corresponding color string.","pinned":false,"hidden":false,"mode":"md"},{"id":3918,"value":"color(0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3921,"value":"color(21)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3953,"value":"Now we can add a redundant encoding to the bar chart, mapping *count* to *color* as well as *x*-position. To document the color encoding, similar to an axis for a positional encoding, we’ll import a [D3 color legend](/@d3/color-legend).","pinned":false,"hidden":false,"mode":"md"},{"id":3767,"value":"Legend(color, {title: \"Number of fruit\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3765,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":1419,"value":"Some visualizations require specialized graphical marks that aren’t built-in to SVG or Canvas. Next, we’ll go beyond basic bar charts and visit D3’s shapes.\n\nNext","pinned":false,"hidden":false,"mode":"md"},{"id":28,"value":"---\n\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":2264,"value":"width = 640","pinned":true,"hidden":false,"mode":"ojs"},{"id":2238,"value":"height = 202","pinned":true,"hidden":false,"mode":"ojs"},{"id":2307,"value":"margin = ({top: 20, right: 0, bottom: 0, left: 30})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3769,"value":"import {Legend} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}