30:Ta08,roma = ["#7e1900","#801c01","#811f02","#822203","#832504","#852705","#862a06","#872d06","#882f07","#8a3108","#8b3409","#8c360a","#8d380b","#8e3b0c","#8f3d0c","#903f0d","#92410e","#93440f","#944610","#954811","#964a12","#974c13","#984e14","#995015","#9a5315","#9b5516","#9c5717","#9d5918","#9e5b19","#9f5d1a","#a05f1b","#a1611c","#a2631c","#a3651d","#a4671e","#a5691f","#a66b20","#a76d21","#a86f21","#a97122","#aa7323","#ab7524","#ac7725","#ad7926","#ae7c27","#af7e27","#b08028","#b18229","#b2842a","#b3862b","#b4882c","#b58a2d","#b68c2e","#b78e2e","#b8902f","#b99230","#ba9431","#bb9632","#bc9933","#bd9b35","#be9d36","#bf9f37","#c0a138","#c1a339","#c2a63b","#c3a83c","#c4aa3e","#c6ac3f","#c7af41","#c8b143","#c9b344","#cab646","#cbb848","#cdba4a","#cebc4d","#cfbf4f","#d0c151","#d2c354","#d3c556","#d4c859","#d5ca5c","#d6cc5e","#d8ce61","#d9d064","#dad267","#dbd36a","#dcd56c","#ddd76f","#ded872","#dfda75","#e0db78","#e0dc7b","#e1de7e","#e2df80","#e3e083","#e3e186","#e4e289","#e4e38b","#e5e48e","#e5e590","#e5e593","#e6e695","#e6e798","#e6e79a","#e6e89d","#e6e89f","#e6e9a1","#e6e9a4","#e6eaa6","#e6eaa8","#e6ebaa","#e5ebad","#e5ebaf","#e4ecb1","#e4ecb3","#e3ecb5","#e2ecb7","#e1edb9","#e0edba","#dfedbc","#deedbe","#ddedc0","#dbedc1","#daeec3","#d8eec4","#d7eec6","#d5eec7","#d3eec9","#d1edca","#cfedcb","#cdedcc","#cbedcd","#c9edcf","#c6edd0","#c4ecd1","#c1ecd1","#bfecd2","#bcebd3","#b9ebd4","#b7ead5","#b4ead5","#b1e9d6","#aee9d7","#abe8d7","#a8e7d8","#a5e7d8","#a2e6d9","#9fe5d9","#9ce4d9","#99e3da","#96e2da","#93e1da","#90e0da","#8ddfda","#8addda","#87dcdb","#84dbda","#81d9da","#7ed8da","#7bd6da","#78d5da","#75d3da","#73d1d9","#70d0d9","#6eced9","#6bccd8","#69cad8","#67c9d7","#65c7d7","#63c5d6","#61c3d6","#5fc1d5","#5ebfd4","#5cbed4","#5abcd3","#59bad2","#58b8d2","#56b6d1","#55b4d0","#54b2d0","#53b0cf","#52afce","#50adcd","#4fabcd","#4ea9cc","#4da7cb","#4da5ca","#4ca4ca","#4ba2c9","#4aa0c8","#499ec7","#489cc7","#479ac6","#4799c5","#4697c4","#4595c3","#4493c3","#4492c2","#4390c1","#428ec0","#418cc0","#418abf","#4089be","#3f87bd","#3e85bd","#3e84bc","#3d82bb","#3c80bb","#3c7eba","#3b7db9","#3a7bb8","#3979b8","#3978b7","#3876b6","#3774b5","#3773b5","#3671b4","#356fb3","#356eb3","#346cb2","#336ab1","#3369b0","#3267b0","#3165af","#3164ae","#3062ae","#2f61ad","#2f5fac","#2e5dac","#2d5cab","#2d5aaa","#2c59a9","#2b57a9","#2b55a8","#2a54a7","#2952a7","#2951a6","#284fa5","#274da5","#274ca4","#264aa3","#2549a3","#2547a2","#2446a1","#2344a1","#2342a0","#22419f","#213f9f","#203e9e","#1f3c9d","#1f3b9c","#1e399c","#1d379b","#1c369a","#1b349a","#1a3399"]31:Ta22,oleron = d3.interpolateDiscrete(["#192659","#1b275b","#1d295c","#1e2a5e","#202c5f","#212d61","#232f62","#243064","#263265","#273367","#293568","#2a376a","#2c386b","#2d3a6d","#2f3b6f","#303d70","#323e72","#344073","#354275","#374376","#384578","#3a467a","#3b487b","#3d4a7d","#3f4b7e","#404d80","#424e82","#445083","#455285","#475387","#485588","#4a578a","#4c588c","#4d5a8d","#4f5c8f","#515d91","#525f92","#546194","#566296","#586497","#596699","#5b689b","#5d699d","#5e6b9e","#606da0","#626ea2","#6470a3","#6572a5","#6774a7","#6975a9","#6b77aa","#6c79ac","#6e7bae","#707cb0","#727eb2","#7380b3","#7582b5","#7784b7","#7985b9","#7a87ba","#7c89bc","#7e8bbe","#808dc0","#828ec2","#8390c3","#8592c5","#8794c7","#8996c9","#8b97cb","#8d99cd","#8e9bce","#909dd0","#929fd2","#94a1d4","#96a3d6","#98a4d7","#99a6d9","#9ba8db","#9daadd","#9facde","#a1aee0","#a3afe2","#a5b1e4","#a6b3e5","#a8b5e7","#aab7e8","#acb9ea","#aebaeb","#afbcec","#b1beed","#b3bfee","#b4c1f0","#b6c3f0","#b8c4f1","#b9c6f2","#bbc7f3","#bcc9f4","#becaf4","#bfccf5","#c0cdf5","#c2cff6","#c3d0f6","#c5d1f7","#c6d3f7","#c7d4f8","#c9d5f8","#cad7f8","#cbd8f9","#cdd9f9","#cedbf9","#cfdcfa","#d1ddfa","#d2dffb","#d3e0fb","#d5e1fb","#d6e3fc","#d7e4fc","#d9e5fc","#dae7fd","#dbe8fd","#dde9fd","#deebfe","#dfecfe","#e1edfe","#e2efff","#e3f0ff","#e5f1ff","#e6f3ff","#194c00","#1c4d00","#1f4e00","#224e00","#244f00","#275000","#295100","#2c5100","#2e5200","#315300","#335300","#355400","#375500","#395500","#3c5600","#3e5700","#405700","#425800","#445900","#465900","#485a00","#4a5b00","#4d5b01","#4f5c01","#515d01","#535e02","#555f03","#575f03","#5a6004","#5c6105","#5e6207","#606308","#63640a","#65650c","#67670e","#6a6810","#6c6912","#6e6a14","#716c16","#736d18","#756e1a","#78701c","#7a711e","#7c7221","#7e7423","#817525","#837627","#85782a","#87792c","#8a7b2e","#8c7c30","#8e7d33","#907f35","#928037","#948239","#97833c","#99843e","#9b8640","#9d8742","#9f8945","#a18a47","#a48c49","#a68d4c","#a88f4e","#aa9050","#ac9252","#af9455","#b19557","#b39759","#b5985c","#b89a5e","#ba9c60","#bc9e62","#bf9f65","#c1a167","#c3a369","#c5a56c","#c8a66e","#caa871","#ccaa73","#cfac75","#d1ae78","#d3af7a","#d5b17c","#d8b37f","#dab581","#dcb784","#deb986","#e0ba89","#e2bc8b","#e4be8e","#e6c090","#e8c293","#e9c495","#ebc698","#ecc89a","#eec99d","#efcb9f","#f0cda2","#f1cfa4","#f2d1a7","#f3d2a9","#f4d4ac","#f4d6ae","#f5d7b0","#f6d9b3","#f6dbb5","#f7dcb7","#f7deba","#f7e0bc","#f8e1be","#f8e3c0","#f9e4c3","#f9e6c5","#f9e8c7","#f9e9ca","#faebcc","#faecce","#faeed1","#fbf0d3","#fbf1d5","#fbf3d8","#fcf5da","#fcf6dc","#fcf8df","#fdfae1","#fdfbe4","#fdfde6"])32:[] 2e:{"title":"d3.interpolateDiscrete","cells":[{"id":6,"value":"# d3.interpolateDiscrete\n\n[d3.interpolateDiscrete](https://d3js.org/d3-interpolate/value#interpolateDiscrete) creates an interpolator from an array of *n* elements, by subdividing the [0,1] domain in *n* sections of equal lengths, and returning the corresponding element of the array for any 0 ≤ *t* ≤ 1. (If you want interpolation between those elements, see [d3.piecewise](https://observablehq.com/@d3/d3-piecewise).)","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"For example, suppose you have a 256 carefully chosen colors, such as Fabio Crameri’s [Roma scientific color ramp](http://www.fabiocrameri.ch/colourmaps.php), listed in an array:","pinned":false,"hidden":false,"mode":"md"},{"id":61,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"With d3.interpolateDiscrete, we get an interpolator, function of *t* that will return:\n- the first color (#7e1900) if ${tex`t < \\frac{1}{256}`}\n- the second color (#801c01) for ${tex`\\frac{1}{256} ≤ t < \\frac{2}{256}`}\n- …\n- the *i*th color (#8addda) for ${tex`\\frac{i-1}{256} ≤ t < \\frac{i}{256}`}\n- …\n- the last color (#1a3399) for ${tex`t > \\frac{255}{256}`}","pinned":false,"hidden":false,"mode":"md"},{"id":105,"value":"No [color interpolation]() is applied: the color that is returned is always an element of the original array. If the successive colors are close, this can give the impression of a continuous color scale.","pinned":false,"hidden":false,"mode":"md"},{"id":129,"value":"ramp(t => d3.interpolateDiscrete(roma)(t))","pinned":true,"hidden":false,"mode":"ojs"},{"id":124,"value":"ramp(t => d3.interpolateDiscrete(roma)(t), 10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":108,"value":"If, on the contrary, the sequence contains a large step between two successive values, the interpolator will never try to compute an intermediate color. This is desirable for instance in the case of another of Fabio Crameri’s color maps —Oleron—, which has a stark discontinuity at the center. It can be used to draw elevation maps, using the discontinuity to create the shore line separating positive values (land) and negative values (sea):","pinned":false,"hidden":false,"mode":"md"},{"id":110,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"ramp(oleron)","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"As mentioned in the introduction, the returned interpolator does *not* interpolate between its values. In the case of Oleron, this would cause an unpalatable grayish mix of light blue and deep green for values just below 0, instead of cleanly cutting between light blue and dark green.","pinned":false,"hidden":false,"mode":"md"},{"id":217,"value":"grayish = d3.interpolate(oleron(0.4999), oleron(0.50001))(0.5)","pinned":true,"hidden":false,"mode":"ojs"},{"id":226,"value":"In fact, the values returned by a discrete interpolator might even be of different types:","pinned":false,"hidden":false,"mode":"md"},{"id":23,"value":"{\n const bag_of_things = [\"String\", 2, [\"Array\"], { name: \"Object\" }],\n interpolator = d3.interpolateDiscrete(bag_of_things);\n return interpolator(Math.random());\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"(If you wish to use this mechanism to generate a random element from a list, you can use [d3-random’s distributions](https://observablehq.com/@d3/d3-random) to change the distribution of the results.)","pinned":false,"hidden":false,"mode":"md"},{"id":38,"value":"{\n const colors = [\"red\", \"blue\", \"green\"],\n interpolator = d3.interpolateDiscrete(colors),\n random = d3.randomBates(3);\n return interpolator(random());\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"**Special cases**\n\nInterpolators created by d3.interpolateDiscrete return undefined for NaN and undefined. For null, they return the same value as for 0. Arguments outside the [0,1] range are clamped to (respectively) the first and last element of the array; finally, the interpolator casts strings to numbers before computing the value:","pinned":false,"hidden":false,"mode":"md"},{"id":49,"value":"interpolator = d3.interpolateDiscrete([\"red\", \"blue\", \"green\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":257,"value":"interpolator(NaN)","pinned":true,"hidden":false,"mode":"ojs"},{"id":259,"value":"interpolator(undefined)","pinned":true,"hidden":false,"mode":"ojs"},{"id":269,"value":"[interpolator(-1), interpolator(2)] // clamping","pinned":true,"hidden":false,"mode":"ojs"},{"id":271,"value":"interpolator(\"0.5\") // casts a string as number","pinned":true,"hidden":false,"mode":"ojs"},{"id":261,"value":"interpolator(null) // null is taken as 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"---\n\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":121,"value":"// https://observablehq.com/@mbostock/color-ramp\nfunction ramp(color, n = 512) {\n const canvas = DOM.canvas(n, 1);\n const context = canvas.getContext(\"2d\");\n canvas.style.margin = \"0 -14px\";\n canvas.style.width = \"calc(100% + 28px)\";\n canvas.style.height = \"40px\";\n canvas.style.imageRendering = \"pixelated\";\n for (let i = 0; i < n; ++i) {\n context.fillStyle = color(i / (n - 1));\n context.fillRect(i, 0, 1, 1);\n }\n return canvas;\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}