just_saying

3e:null 3f:["$","title",null,{"children":"d3.interpolate | Riia Järvenpää | Observable"}] 45:T1c09,svg` `46:T52c,md`d3.interpolate [automagically detects](https://github.com/d3/d3-interpolate/blob/master/src/value.js#L10) the type of the values—by looking at the type of the *b* value. It is able to recognize: - **numbers** from numeric values, and pass them to [d3.interpolateNumber](https://observablehq.com/@d3/d3-interpolatenumber); - **colors** from strings matching the CSS Colors spec, or from [d3-color](https://github.com/d3/d3-color) objects: d3.interpolateRgb (see [Working with color](https://observablehq.com/@d3/working-with-color) notebook); - **strings** containing numbers: [d3.interpolateString](https://observablehq.com/@d3/d3-interpolatestring); - **dates** from JavaScript Date objects (not strings): [d3.interpolateDate](https://observablehq.com/@d3/d3-interpolatedate); - **arrays** and **objects**: [d3.interpolateArray, d3.interpolateObject](https://observablehq.com/@d3/d3-interpolateobject). When given a pair of arrays, the type of each element of the array will be detected in turn, and interpolated with the same methods. Similarly for objects, the type of each of the enumerable properties of the object will be determined, and the property interpolated with the dedicated method. (Of course this happens recursively for, say, arrays that contain objects with string properties containing numbers…) `47:[] 43:{"id":"412094c34c31573f","slug":null,"title":"d3.interpolate","thumbnail":"3faad9e2d5b4365f8e6fb423af869474fe27854dcb36dad84f3118ebdb552422","access_level":"public","create_time":"$D2023-05-06T11:37:48.481Z","update_time":"$D2023-05-06T11:39:12.050Z","view_time":null,"first_public_time":"$D2023-05-06T11:37:48.481Z","has_unpublished_edits":null,"fork":{"id":"cbca4c76651cdbbf","slug":"d3-interpolate","title":"d3.interpolate","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"1a7853441e3c211d","login":"rialistic","name":"Riia Järvenpää","avatar_url":"https://avatars-next.observableusercontent.com/b4c8ff27583b2087427edc32f10cb51d0ca63b15edff86fe2bb5e15692bcf867","tier":"starter_2024","bio":"Trying to be a social data researcher. Kallio, Helsinki, Finland. I like to data, but been mostly doing raw communications so far.","following":false},"version":408,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"02643ec94659c257","login":"rialistic","name":"Riia Järvenpää","avatar_url":"https://avatars-next.observableusercontent.com/b4c8ff27583b2087427edc32f10cb51d0ca63b15edff86fe2bb5e15692bcf867","tier":null,"bio":"Trying to be a social data researcher. Kallio, Helsinki, Finland. I like to data, but been mostly doing raw communications so far.","following":false}],"members":[{"type":"individual","id":"02643ec94659c257","login":"rialistic","name":"Riia Järvenpää","avatar_url":"https://avatars-next.observableusercontent.com/b4c8ff27583b2087427edc32f10cb51d0ca63b15edff86fe2bb5e15692bcf867","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"d3.interpolate","cells":[{"id":0,"value":"md`# d3.interpolate\n\nThe [d3-interpolate](https://github.com/d3/d3-interpolate) module offers a way of computing intermediate values between two given values. This module is essential to a lot of D3’s magic, most notably [scales](https://github.com/d3/d3-scale) and [transitions](https://github.com/d3/d3-transition).\n\n[d3.interpolate](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolate) is its main and generic interpolation method. It takes two given values *a* and *b*, and, depending on the inferred type, routes them through the specific function that will create the relevant interpolator. (The determination of the type, which can be numbers, colors, arrays, objects…, is made by analyzing the second value *b*.)\n\nFor example, if you give d3.interpolate two strings describing CSS colors, it will recognize them as such and call its default color interpolation method, d3.interpolateRgb:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"color = d3.interpolate(\"rgb(108,99,255)\", \"red\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"color(0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"color(1) // \"red\" equivalent in the rgb() or rgba() syntax","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"color(0.5) // representation of an intermediate color, half-way between the start and end values","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"md`A color interpolator is usually represented as a color ramp going from 0 to the left (color a), to 1 to the right (color b).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"ramp(color)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"md`Interpolating between numbers, though boring, is a fundamental operation:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"d3.interpolate(0, 100)(0.3)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"md`It becomes much more interesting when we realize that numbers _inside_ strings can be interpolated too, like for example with this string representing a CSS transform:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"transform = d3.interpolate(\n \"translate(0,0) rotate(0)\",\n \"translate(950,10) rotate(90)\"\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"transform(0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"transform(t)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"md`The following drawing combines both a color interpolator and a string interpolator:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"viewof t = slider({ description: \"t\", value: 0 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"d3.interpolate([1.78, 3.33, 2.1], [1.64, 1.2, 0])(t)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"d3.interpolate(\n {\n model: \"A98\",\n price: 99.9,\n dimensions: [1.78, 3.33, 2.1],\n shoes: { size: 9 }\n },\n {\n model: \"F242\",\n price: 299.9,\n dimensions: [1.64, 1.2, 0],\n shoes: { size: 11.5 }\n }\n)(t)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"md`We’ll explore the string interpolation method in more details in [d3.interpolateString](https://observablehq.com/d/4d67286e63de0769). Note that, for the case of CSS transforms, d3-interpolate also offers the more capable interpolation method [d3.interpolateTransformCss](https://observablehq.com/@d3/d3-interpolatetransformcss).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"md`## Caveats\n\nThe order of priority of the type detection makes it so that it will just work in most cases (see the [API documentation](https://github.com/d3/d3-interpolate#interpolate) for details).\n\nBut all this magic doesn’t happen without a few caveats: the type detection is made on the second value, b; so if you try to interpolate between, say, a color and a number, the interpolation method that kicks in looks for numbers and fails (NaN: not a number):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"d3.interpolate(\"red\", 10)(0.5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"md`… however, if you try in the other direction (*b* being a color), the interpolation method that kicks in tries to convert *a* to a color, then makes everything red:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"d3.interpolate(10, \"red\")(0.5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"md`Explicitly calling the correct function solves this situation:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"d3.interpolateRgb(\"red\", 10)(0.5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"md`Some of the types for which there exists interpolation methods are not detectable; should you need to use, for example, d3.interpolateTransformCss, you will have to call it explicitly — and hence it cannot be detected inside an array or as an object property.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"md`Similarly, concerning colors, [more nuanced interpolation methods](https://github.com/d3/d3-interpolate/blob/master/README.md#color-spaces) will sometimes give better results than the default d3.interpolateRgb. They too must be called explicitly. See [Working with color](https://observablehq.com/@d3/working-with-color) for details.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3-interpolate@2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"import {ramp} from \"@mbostock/color-ramp\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 44:"$43:body"