29:null 2a:["$","title",null,{"children":"Colour spectrum (rainbow) | Christophe Yamahata | Observable"}] 2f:[{"id":"4109c891bac26009a1dcb4faebc6921851506089577ba46e65867ae651d4745be36fbe9ef490e1dcc25f41aaca969d8ac3056fbfac8cddfa42e29c844de72724","href":"https://static.observableusercontent.com/files/4109c891bac26009a1dcb4faebc6921851506089577ba46e65867ae651d4745be36fbe9ef490e1dcc25f41aaca969d8ac3056fbfac8cddfa42e29c844de72724","name":"RGB_to_spectrum_Octave.PNG","type":"image/png","lastModified":1711141444533.304,"size":66937},{"id":"26d435ba81cda82f407b7332a72b94961fc8d961d9cc6594daa9aac52f8b8a8f52ee92faeeb71ff7531cbfa3797c294c4ce05c0329e53a6ddb250eb885a28fe7","href":"https://static.observableusercontent.com/files/26d435ba81cda82f407b7332a72b94961fc8d961d9cc6594daa9aac52f8b8a8f52ee92faeeb71ff7531cbfa3797c294c4ce05c0329e53a6ddb250eb885a28fe7","name":"RGB_spectrum.mp4","type":"video/mp4","lastModified":1711405136279.123,"size":2084565}] 2d:{"id":"74fca46b12e15752","slug":"colour-spectrum","title":"Colour spectrum (rainbow)","thumbnail":"37395ab5e00c6056db48083ba8e6441c4f5075db7ab47a912e6833b301ce7017","access_level":"public","create_time":"$D2022-06-20T22:23:54.750Z","update_time":"$D2026-09-05T16:26:00.260Z","view_time":null,"first_public_time":"$D2022-06-20T22:45:58.714Z","has_unpublished_edits":null,"fork":{"id":"a74bed39ca167565","slug":"cosine-color-schemes","title":"Cosine Color Schemes","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":3,"starred":false,"owner":{"type":"team","id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":"starter_2024"},"version":410,"publish_version":410,"role":null,"authored":false,"authors":[{"type":"individual","id":"06f083eba60f5a76","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":null}],"members":[{"type":"individual","id":"06f083eba60f5a76","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"79a85315e6323ef2","slug":"colour","title":"Colour","owner":{"id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata"}},"type":"notebook","body":{"title":"Colour spectrum (rainbow)","cells":[{"id":310,"value":"# Colour spectrum (rainbow)\n## RGB rendering of visible spectrum","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":122,"value":"

\n Realistic colour spectrum inspired by this Matlab blog:\n
\n Making Color Spectrum Plots – Part 2 (by Steve Eddins, July 20, 2020).\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":34,"value":"ramp(interpolateGaussian([0.32248, 0.983969, 0.888655], [0.171236, 0.411535, 0.277087], [0.053899, 0.091507, 0.129301], [1.11747, 0.689374, 0.299762], [0.653043, 0.561673, 0.739602], [0.114658, 0.055772, 0.053218]));\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"

\n This colour ramp is intended to realistically reproduce the visible spectrum in the sRGB colour space.\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":210,"value":"Legend(d3.scaleSequential([380, 730], color_spectrum), {\n title: \"Wavelength (nm)\",\n width:500,\n height:66,\n tickSize:8,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"

\n For the average human eye, the visible colour range extends over the wavelengths\n
λ = 380 … 730 nm.\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":112,"value":"
\n

Appendix

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":145,"value":"

The non-linear sRGB values used to generate the colour ramp have been approximated with Gaussian functions (and subsequently truncated).

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":30,"value":"function interpolateGaussian([A_r1, A_g1, A_b1], [lambda_r1, lambda_g1, lambda_b1], [sigma_r1, sigma_g1, sigma_b1], [A_r2, A_g2, A_b2], [lambda_r2, lambda_g2, lambda_b2], [sigma_r2, sigma_g2, sigma_b2]) {\n return t => `rgb(${[\n A_r1*Math.exp(-0.5*Math.pow((t-lambda_r1)/sigma_r1,2)) + A_r2*Math.exp(-0.5*Math.pow((t-lambda_r2)/sigma_r2,2)) ,\n A_g1*Math.exp(-0.5*Math.pow((t-lambda_g1)/sigma_g1,2)) + A_g2*Math.exp(-0.5*Math.pow((t-lambda_g2)/sigma_g2,2)) ,\n A_b1*Math.exp(-0.5*Math.pow((t-lambda_b1)/sigma_b1,2)) + A_b2*Math.exp(-0.5*Math.pow((t-lambda_b2)/sigma_b2,2))\n ].map(v => Math.floor(Math.max(0, Math.min(1, v)) * 255))})`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"color_spectrum = interpolateGaussian([0.32248, 0.983969, 0.888655], [0.171236, 0.411535, 0.277087], [0.053899, 0.091507, 0.129301], [1.11747, 0.689374, 0.299762], [0.653043, 0.561673, 0.739602], [0.114658, 0.055772, 0.053218]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"
\n\nThe colour ramp was copied from \"@mbostock/ramp\":\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":98,"value":"// import {ramp} from \"@mbostock/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 = \"-moz-crisp-edges\";\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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"
For the legend, use:","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":207,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"
\n

Useful references

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":315,"value":"[Making Color Spectrum Plots – Part 2](https://blogs.mathworks.com/steve/2020/07/20/making-color-spectrum-plots-part-2/), Steve Eddins, July 2020. ★★★\n\nTechnical note: [Human vision and the CIE chromaticity diagram](http://dx.doi.org/10.13140/RG.2.2.31371.30242), idonus Sàrl, March 2024.\n[DOI: 10.13140/RG.2.2.31371.30242](http://dx.doi.org/10.13140/RG.2.2.31371.30242) ★★ \n*Document written by C. Yamahata.*\n\n[Approximate RGB values for Visible Wavelengths](https://web.archive.org/web/20230302095030/http://www.physics.sfasu.edu/astro/color/spectra.html), Dan Bruton, 1996. ★★ \n[Retrieved from archive.org]\n\n[Rendering Spectra](https://web.archive.org/web/20240109121357/https://aty.sdsu.edu/explain/optics/rendering.html), Andrew T. Young, 2012. \n[Retrieved from archive.org]\n\n[A Beginner’s Guide to (CIE) Colorimetry](https://medium.com/hipster-color-science/a-beginners-guide-to-colorimetry-401f1830b65a), Chandler Abraham, September 2016.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":349,"value":"

Equivalent result obtained with Octave / Matlab.\n
[ Source: Human vision and the CIE chromaticity diagram ]

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":376,"value":"
\n

Rendered spectrum vs. CIE chromaticity diagram.\n
[ Video: RGB_spectrum.mp4 ]

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W2f","stdlib":"2","titling":"auto"}} 2e:"$2d:body"