25:["$","title",null,{"children":"d3.scaleLinear | Yuichi Yazaki | Observable"}] 49:[{"id":"071f5c8df7a2e4458ba1720fde560e5895629ef6a6769814d7d9f0bb5f57a721fcaeb395df6e39af9cd50cbbb8b4327357883d729e8a37e601cd7525d7658b43","href":"https://static.observableusercontent.com/files/071f5c8df7a2e4458ba1720fde560e5895629ef6a6769814d7d9f0bb5f57a721fcaeb395df6e39af9cd50cbbb8b4327357883d729e8a37e601cd7525d7658b43","name":"Pulalius.jpg","type":"image/jpeg","lastModified":1723970368526.699,"size":189020}] 29:{"id":"4e228943e03acf8e","slug":null,"title":"d3.scaleLinear","thumbnail":"c38ebfb6c6a30d45c6236594c9eac0d9a017e68f5c4788397611c181fc939715","access_level":"public","create_time":"$D2024-08-18T08:39:28.526Z","update_time":"$D2024-08-18T09:08:08.698Z","view_time":null,"first_public_time":"$D2024-08-18T08:39:28.526Z","has_unpublished_edits":null,"fork":{"id":"65ca753ff2fc5607","slug":"d3-scalelinear","title":"d3.scaleLinear","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"a1d7ead7944dd327","login":"visualizingjp","name":"Yuichi Yazaki","avatar_url":"https://avatars-next.observableusercontent.com/1b66e94cecde0c737084a41d3922d6e35b8928922fee6113d4db6432bd161acd","tier":"starter_2024","bio":"Data Visualization Japan\nhttps://www.facebook.com/yuichi.yazaki\nhttps://twitter.com/yuichiyazaki","following":false},"version":838,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5c68688afd0e935c","login":"visualizingjp","name":"Yuichi Yazaki","avatar_url":"https://avatars-next.observableusercontent.com/1b66e94cecde0c737084a41d3922d6e35b8928922fee6113d4db6432bd161acd","tier":null,"bio":"Data Visualization Japan\nhttps://www.facebook.com/yuichi.yazaki\nhttps://twitter.com/yuichiyazaki","following":false}],"members":[{"type":"individual","id":"5c68688afd0e935c","login":"visualizingjp","name":"Yuichi Yazaki","avatar_url":"https://avatars-next.observableusercontent.com/1b66e94cecde0c737084a41d3922d6e35b8928922fee6113d4db6432bd161acd","tier":null,"role":"editor"},{"type":"team","id":"a1d7ead7944dd327","login":"visualizingjp","name":"Yuichi Yazaki","avatar_url":"https://avatars-next.observableusercontent.com/1b66e94cecde0c737084a41d3922d6e35b8928922fee6113d4db6432bd161acd","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.scaleLinear","cells":[{"id":0,"value":"# d3.scaleLinear\n\n[d3.scaleLinear](https://d3js.org/d3-scale/linear#scaleLinear) 構造は、入力と出力の間に線形関係を持つ [スケール](https://observablehq.com/@d3/introduction-to-d3s-scales) を作成します。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"lin = d3.scaleLinear()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"デフォルトでは、スケールの*ドメイン*と*レンジ*はともに区間[0,1]であり、このスケールは恒等関数として表現できます：*y* = *x*。これは例えば、カニの大きさをメートル単位で測定し、それを同じ長さの線で表現したい場合に起こることです：カニの幅が0.09 mであれば、線の長さも0.09 mになります。ドメインからレンジへの変換では、数値自体は変わりませんが、概念的には、その量は観測値（ドメイン内）から視覚的な変数（レンジ内）へと変換されています。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":731,"value":"

Fossil crab *Pulalius Vulgaris*. Photo: [Jason Boddy](https://fr.wikipedia.org/wiki/Fichier:Pulalius.jpg)

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":39,"value":"より一般的には、線形スケール変換は ${tex`y = ax+b`} として計算できます。ここで、a は傾き、b はy切片、つまり x = 0 のときの値です。しかし、私たちはこのようにして作成するのではありません。むしろ、レンジとドメインを2つの区間として指定します — 傾きと切片は、ドメインの開始がレンジの開始にマッピングされ、ドメインの終了がレンジの終了にマッピングされるように決定されます。\n\n距離を比例した長さで表現するには:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":51,"value":"run2pixels = d3.scaleLinear()\n .domain([0, 42.195]) // unit: km\n .range([0, 600]) // unit: pixels","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"run2pixels(0) // The start line","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"run2pixels(42.195) // フルマラソンの距離は 42.195 km で、600 ピクセルで表されます","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"run2pixels(10 * 1.609344) // 10 miles","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"_マイルをキロメートルに変換すること（前のセルで行ったように）は線形変換ですが、物理量の性質を変えるものではないため、スケーリング操作ではありません。これは、私たちがどの単位で作業しているかを確認することの重要性を強調しています。通常、ドメインは観測値の単位（摂氏度、米ドル、秒など）で、レンジは画面や印刷の単位（ピクセル、ミリメートル...あるいはCSSの色さえも）で表されます。_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":153,"value":"### 反転したレンジ\nドメインとレンジは必ずしも0から始める必要はありません。この　世界の気温傾向のチャート（クリックして新しいウィンドウで開く）では、次のように定義された垂直スケールを使用している可能性があります:\n\n~~~\ny = d3.scaleLinear()\n .domain(d3.extent(data, d => d.value))\n .range([height, 0])\n~~~\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":166,"value":"ポイントがページに収まるように *a* と *b* を設定しようとする代わりに、スケール定義を使用すると、デザイナーは意図を明示的に伝えることができます。\n- グラフは垂直の *高さ* をカバーする必要があります。\n- 最高気温は画面の上部にある必要があります。\n- 使用可能な垂直スペースは、データドメインの [extent](https://d3js.org/d3-array/summarize#extent) 内のすべての値 (*つまり、最小値と最大値) を囲む必要があります。\n\n範囲が「反転」していることに気付いたかもしれません。つまり、範囲は *高さ* から 0 になります。これは、キャンバスまたは SVG を使用して視覚化を描画する場合に非常に一般的です。これらの 2 つのシステムでは、座標は上から下に向かって下を指します。通常、最小値は画像上で最大値よりも「下」に配置されることが予想されるため、スケールの範囲は反転された間隔で記述されます。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":174,"value":"### Nice bounds\n\nThe exact snippet of code in the temperature trends example is, in fact, a bit more complete.\n\nFirst, it adds margins to the scale, so that the circle marks are not too close to the edge of the SVG container. (The minimal and maximal temperatures should not be drawn with a center at coordinates equal to 0 or to height — otherwise they would show as half-circles).\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":162,"value":"~~~js\ny = d3.scaleLinear()\n .domain(d3.extent(data, d => d.value)).nice()\n .range([height - margin.bottom, margin.top])\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":187,"value":"Second, it adds a call to *scale*.nice, which allows to materialize tick marks above and below the extent of the temperature anomaly values (in this case, +1.4°C and -0.8°C). *scale*.nice enlarges the domain’s interval in such a way that its minimum and maximum bounds are [nicely-rounded](https://observablehq.com/@d3/d3-ticks) values, *i.e.* multiples of 2, 5 and powers of 10. This ensures that the vertical axis will be properly labeled.\n\nThis example shows how the scale definition is much more than a way to position the marks. Indeed, the horizontal and vertical [axes](https://d3js.org/d3-axis) of the chart are drawn exclusively by reading the horizontal and vertical scales. Their positions, ticks and labels are behaving accordingly — this saves time, but also guarantees that, when one changes the height of the chart, or when new data arrives with higher temperatures, everything will adapt in a consistent manner.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":554,"value":"### Round ranges\n\n[*scale*.rangeRound](https://d3js.org/d3-scale/linear#linear_rangeRound) sets the range as *scale*.range, while making sure that the values returned will be integers. Useful for representing data with discrete elements. Here's an example where a grade (D to A) will be associated with the percentage of correct answers to a test:\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"rangeRound","database":"$undefined"},{"id":557,"value":"grades = d3.scaleLinear().rangeRound([0, 3])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":574,"value":"grades(63 / 100)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":562,"value":"[\"D\", \"C\", \"B\", \"A\"][grades(63 / 100)]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":583,"value":"Or, the number of children in a class with an occupancy rate of 90% and a maximum of 46 pupils:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":585,"value":"children = d3.scaleLinear().rangeRound([0, 46])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":587,"value":"children(90 / 100)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":595,"value":"Note: *scale*.rangeRound(*range*) is a shortcut notation for *scale*.range(*range*).interpolate(d3.interpolateRound). See [*scale*.interpolate](#interpolate) below.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":382,"value":"### Piecewise scales\n\nIf the domain is a list of more than 2 numbers, multiple segments are considered, and each segment is matched to the corresponding numbers in the domain, resulting in a continuous piecewise interpolation:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"piecewise","database":"$undefined"},{"id":398,"value":"piecewiseScale = d3.scaleLinear()\n .domain([0, 100, 200, 300, 400])\n .range([220, 200, 100, 200, 150]) // add + Math.sin(now / 1000) * 50 to one of these for animation","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"results in the following curve:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":401,"value":"svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":644,"value":"The piecewise linear scale is closely related to the piecewise interpolation method: [d3.piecewise](https://observablehq.com/@d3/d3-piecewise).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":215,"value":"### Non-numeric range\n\nThe range of linear scales (as well as of other types of [continuous scales](https://observablehq.com/@d3/continuous-scales)) is usually an interval between two real numbers; but it can also be of a non-numeric type, the most useful example being the color scales. To create a color range, one simply gives the start and end colors (or more for a piecewise scale).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":377,"value":"crayons = d3.scaleLinear()\n .domain([-1, 0, 1])\n .range([\"orange\", \"white\", \"green\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"{\n return html`${d3\n .ticks(-1, 1, 20)\n .map(crayons)\n .map(\n t =>\n ` `\n )}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"This idea generalizes with [interpolators](https://observablehq.com/@d3/d3-interpolate), which can be set, for continuous scales, by calling *scale*.interpolate (see [below](#interpolate)).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":604,"value":"The range can also be made of [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) objects, allowing a scale to transform a number into a date:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":607,"value":"date = d3.scaleLinear()\n .range([new Date(\"2009-01-01T00:00:00\"), new Date(\"2009-12-31T23:59:59\")])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":610,"value":"date(0.5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"days = d3.scaleLinear().range([new Date(\"2009-01-01\"), new Date(\"2009-12-31\")])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":616,"value":"days(0.5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":627,"value":"See [d3.scaleTime](https://observablehq.com/@d3/d3-scaletime) for the converse operation.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":217,"value":"### Clamping\n\n*scale*.clamp enforces strict bounds on the domain. We’ve described the scale, so far, as a function of the form *y = ax + b*. But there are cases when the odd data point or input that is outside the domain must *not* result in a value outside the range — which this formula might produce.\n\nConsider, for example, a linear scale that defines the length of a bar representing a certain quantity. If an irregular data point arrives with a negative quantity, the bar should be of length = 0, and not some number below 0 — which would result in an error in the SVG.\n\nSimilarly, if a value exceeds the expected maximum of the domain, it might be desirable to limit the output to the range’s maximum. An example could be a scale that encodes an opacity — a number that should be between 0 and 1.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":239,"value":"opacity = d3.scaleLinear()\n .domain([0, 10])\n .range([0, 1])\n .clamp(true) // try with false instead","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"opacity(-1) // -1 is outside the domain!","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"opacity(15) // 15 is outside the domain!","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"That property is readable:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":256,"value":"opacity.clamp()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"### Unknown\n\n*scale*.unknown sets the return value of the scale when the input value is unknown (typically NaN, undefined, or a string such as \"No Data\", that cannot be transformed into a number). By default, the unknown value is undefined, but it's possible to set it to a different constant, to represent unavailable data:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":288,"value":"paint = d3.scaleLinear()\n .range([\"yellow\", \"red\"])\n .unknown(\"#ccc\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"paint(NaN)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"values = [NaN].concat(d3.ticks(0, 1, 20))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"{\n return html`${values\n .map(paint)\n .map(\n t =>\n ` `\n )}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"That property is readable:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":301,"value":"paint.unknown()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"### Invert\n\n*scale*.invert gives an input value that would result in the value. As described in the introduction to scales, inverse values are useful to enable interactivity, so that when the user moves points at a certain screen location, the application infers the underlying value.\n\nNot many surprises here, but note that non-numeric scales (such as a scale with a color range) are *not* invertible:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":349,"value":"paint.invert(\"red\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"Inverted clamped scales are clamped to the domain:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":352,"value":"opacity.clamp(true).invert(-1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":541,"value":"Finally, the invert of piecewise scales works as expected if the scale is monotonous. If there are several solutions, such as with this scale that establishes an opacity that increases when the (positive or negative) value is away from 0, then the results might be unexpected:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":508,"value":"d3.scaleLinear()\n .domain([-30, 0, 30])\n .range([1, 0, 1])\n .clamp(true)\n .invert(0.4)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":652,"value":"### Interpolate\n\n[*scale*.interpolate](https://d3js.org/d3-scale/linear#linear_interpolate) allows to set an [interpolation method](https://observablehq.com/@d3/d3-interpolate) for the scale.\n\nA traditional use-case is for color scales, where we want to [use a better color space](https://observablehq.com/@d3/working-with-color) than the default (interpolateRgb), to have more vivid intermediary colors.\n\nAnother common use-case is to set [d3.interpolateRound](https://observablehq.com/@d3/d3-interpolatenumber), instead of the default interpolateNumber, in order to generate only integer values:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"interpolate","database":"$undefined"},{"id":658,"value":"scaleRound = d3.scaleLinear()\n .range([0, 960])\n .interpolate(d3.interpolateRound)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":662,"value":"scaleRound(1 / 3)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":667,"value":"By creating your own interpolation method, you can specify, for example, a linear scale that returns numbers with one decimal:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":670,"value":"scaleDecimal = d3.scaleLinear()\n .range([0, 960])\n .interpolate(function(a, b) {\n const c = b - a;\n return function(t) {\n return +(a + t * c).toFixed(1);\n };\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":672,"value":"scaleDecimal(2 / 7)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":683,"value":"The interpolation method is also readable:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":681,"value":"scaleDecimal.interpolate()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"### Shorthand notation\n\none can indicate the range, or (domain, range) directly when creating a *linearScale*:\n\n~~~js\nconst x = d3.scaleLinear([0, 960]);\nconst color = d3.scaleLinear([10, 100], [\"brown\", \"steelblue\"]);\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":190,"value":"## Identity\n\n[d3.scaleIdentity](https://d3js.org/d3-scale/linear#scaleIdentity) — which maps a domain onto itself — is a particular case of linear scale. It can be useful in some cases, for example with [d3-zoom](https://d3js.org/d3-zoom) when working with values that are already expressed in pixel coordinates.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"identity","database":"$undefined"},{"id":12,"value":"---\n\nThanks to [@fiorins](/@fiorins) for suggestions.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 24:null