30:T4b0,This creates an interesting “map” of the species in the space of petal length _vs._ sepal length. If you read the background color as the possible distribution of species in the different regions, you begin to get a feel for what each interpolation method does. In this case the _random-walk_ method is clearly the best: where there are enough samples of the same color, the interpolated color is almost solid. In other words, we can be pretty sure that a new iris whose measurements are in the ${iriscolor("versicolor")} region would indeed be versicolor. Where there is more doubt—either because we’re in a region that has both ${iriscolor("versicolor")} and ${iriscolor("virginica")}, or because we’re far from any existing sample—there is more noise. In that case, the local mixing of colors corresponds (more or less) to the relative probabilities of each species. (This map of probabilities is what a machine-learning algorithm tries to figure.) And, if you find that the dithering is not to your taste, you can also add some blurring. Note that in this case we blur the resulting _image_, instead of the data—this is the only possibility, since the data cannot be interpolated.31:[{"id":"87573477ec7d96197b46e331d2c50f81155c9b7bc99ab7e8e34a16f4fe8b1420d274ec81aaf6a54a3e831f0935027cbbb0f6ed2bf9f82f5a9f47ce36aeacba8e","href":"https://static.observableusercontent.com/files/87573477ec7d96197b46e331d2c50f81155c9b7bc99ab7e8e34a16f4fe8b1420d274ec81aaf6a54a3e831f0935027cbbb0f6ed2bf9f82f5a9f47ce36aeacba8e","name":"ca55-south.csv","type":"text/csv","lastModified":1673523396072.637,"size":369633},{"id":"91977ec3644d23a1d71148a27fad4877b23d329bf14a1b0a58a654837b7a8cb019f91381b2173bbd8fff42668ea8de0737c269384166fea1101d86805931ffc5","href":"https://static.observableusercontent.com/files/91977ec3644d23a1d71148a27fad4877b23d329bf14a1b0a58a654837b7a8cb019f91381b2173bbd8fff42668ea8de0737c269384166fea1101d86805931ffc5","name":"iris.csv","type":"text/csv","lastModified":1673991131552.077,"size":3711},{"id":"ba5f62c99f0cb2c9af4edfebe3001d3ffc54ab2e515dbd7ae31aa2b17626308c37aa85ad61b2c36ec73c68ec857dd204394753267dcd42b7a0be1f090c2489c4","href":"https://static.observableusercontent.com/files/ba5f62c99f0cb2c9af4edfebe3001d3ffc54ab2e515dbd7ae31aa2b17626308c37aa85ad61b2c36ec73c68ec857dd204394753267dcd42b7a0be1f090c2489c4","name":"volcano.json","type":"application/json","lastModified":1673989759695.803,"size":20846}] 2e:{"title":"Raster Mark / Observable Plot","cells":[{"id":0,"value":"

Raster Mark / Observable Plot

Observable Plot › Marks › Raster · API

\n\n# Plot: Raster\n\nThe **raster** mark paints a raster image from spatial samples. In contrast with the [image](/@observablehq/plot-image) mark, which shows an existing image, the raster mark _creates_ an image from abstract data. (For contours from spatial samples, see the [contour mark](/@observablehq/plot-contour).)","pinned":false,"hidden":false,"mode":"md"},{"id":452,"value":"Whereas a vector image represents lines, rectangles, circles as geometrical paths, a raster image (or _bitmap_) is a rectangular grid of colored pixels organized in rows and columns. The colors are usually given in levels of red, green, and blue (RGB), and often opacity (A).","pinned":false,"hidden":false,"mode":"md"},{"id":806,"value":"Consider the following grid of numbers with ${volcano.height} rows and ${volcano.width} columns. Each number represents the elevation in meters of the [Maungawhau](https://en.wikipedia.org/wiki/Maungawhau) volcano at a given location.","pinned":false,"hidden":false,"mode":"md"},{"id":814,"value":"volcano = FileAttachment(\"volcano.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":822,"value":"Printing the numbers directly gives the following chart—unreadable at this scale:","pinned":false,"hidden":false,"mode":"md"},{"id":807,"value":"Plot.plot({\n x: { label: \"column →\" },\n y: { reverse: true, label: \"↓ row\" },\n marks: [\n Plot.text(volcano.values, {\n text: Plot.identity,\n x: (d, i) => i % volcano.width,\n y: (d, i) => Math.floor(i / volcano.width),\n fontSize: 3\n }),\n Plot.rect([{}], {\n x1: 10.5,\n x2: 29.5,\n y1: 10.5,\n y2: 29.5,\n stroke: \"currentColor\"\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":808,"value":"Now, let’s focus on the outlined region:","pinned":false,"hidden":false,"mode":"md"},{"id":809,"value":"Plot.plot({\n x: { domain: [9.5, 30.5] },\n y: { domain: [30.5, 9.5] },\n marks: [\n Plot.text(volcano.values, {\n text: Plot.identity,\n x: (d, i) => i % volcano.width,\n y: (d, i) => Math.floor(i / volcano.width),\n fontWeight: 460,\n clip: true\n }),\n Plot.rect([{}], { x1: 10.5, x2: 29.5, y1: 10.5, y2: 29.5, stroke: \"black\" })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":810,"value":"… and color every number with a suitable color scale:","pinned":false,"hidden":false,"mode":"md"},{"id":811,"value":"Plot.plot({\n x: { domain: [9.5, 30.5] },\n y: { domain: [30.5, 9.5] },\n marks: [\n Plot.dot(volcano.values, {\n x: (d, i) => i % volcano.width,\n y: (d, i) => Math.floor(i / volcano.width),\n fill: Plot.identity,\n r: 16,\n dy: -12,\n symbol: \"square\",\n clip: true\n }),\n Plot.text(volcano.values, {\n text: Plot.identity,\n x: (d, i) => i % volcano.width,\n y: (d, i) => Math.floor(i / volcano.width),\n fontWeight: 460,\n clip: true\n }),\n Plot.rect([{}], { x1: 10.5, x2: 29.5, y1: 10.5, y2: 29.5, stroke: \"black\" })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":812,"value":"… finally, we can forget the numbers, and zoom back out:","pinned":false,"hidden":false,"mode":"md"},{"id":813,"value":"Plot.raster(volcano.values, {width: volcano.width, height: volcano.height}).plot()","pinned":true,"hidden":false,"mode":"ojs"},{"id":500,"value":"_Voilà!_ This is the raster mark in a nutshell.\n\nBut that is not all: most of the time, the data you want to draw isn’t already laid out on a convenient rectangular grid, as the volcano dataset above. For instance, an image can be described by triplets of ⟨_x_, _y_, _value_⟩. These triplets live on a plane, but _x_ and _y_ are not necessarily integers, and not necessarily inside the raster frame; furthermore, they are not given in a specific order.\n\nThe raster mark also covers with this type of data; however, it needs a different way to specify the information.","pinned":false,"hidden":false,"mode":"md"},{"id":523,"value":"The dataset below was acquired in the 1960s by the [Great Britain aeromagnetic survey](https://www.bgs.ac.uk/datasets/gb-aeromagnetic-survey/), and describes the IGRF (International Geomagnetic Reference Field) measured by plane fly-overs in 1955.","pinned":false,"hidden":false,"mode":"md"},{"id":530,"value":"ca55 = FileAttachment(\"ca55-south.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":534,"value":"Plot.raster(ca55, {x: \"LONGITUDE\", y: \"LATITUDE\", fill: \"MAG_IGRF90\"}).plot()","pinned":true,"hidden":false,"mode":"ojs"},{"id":993,"value":"The raster mark above draws a point (a single pixel) for each datum, at its *x* and *y* coordinates (rounded to the closest pixel), and the value with which to color that point. The returned chart image is still composed of a single raster image.","pinned":false,"hidden":false,"mode":"md"},{"id":526,"value":"This preliminary image has issues: there are not enough points to fill the whole raster, and each pixel is too small. Many pixels remain white (or rather, transparent), where no value has been determined. The data’s location is given with longitudes and latitudes, and should use a [projection](/@observablehq/plot-projection). And, as always, a proper color scale needs to be specified.","pinned":false,"hidden":false,"mode":"md"},{"id":996,"value":"Let’s start by addressing the easiest: projection, and color. We’ll also use the pixelSize option to make the pixels larger (this option is specified as the width in screen pixels of a raster pixel). And a line mark will display the paths of the plane that took the samples during the measurement campaign.","pinned":false,"hidden":false,"mode":"md"},{"id":636,"value":"projection = ({\n type: \"mercator\",\n domain: {\n type: \"MultiPoint\",\n coordinates: ca55.map((d) => [d.LONGITUDE, d.LATITUDE])\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":547,"value":"Plot.plot({\n projection,\n inset: 10,\n height: 500,\n color: { type: \"diverging\" },\n marks: [\n Plot.line(ca55, {\n x: \"LONGITUDE\",\n y: \"LATITUDE\",\n z: \"LINE_NUMB-SEG\",\n markerEnd: \"arrow\",\n strokeOpacity: 0.3,\n strokeWidth: 1\n }),\n Plot.raster(ca55, {\n x: \"LONGITUDE\",\n y: \"LATITUDE\",\n fill: \"MAG_IGRF90\",\n pixelSize: 5,\n imageRendering: \"pixelated\"\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":165,"value":"*Note: unfortunately Safari does not respect the image-rendering: pixelated property for images in SVG. Until this is fixed, if you want to draw “big pixels” on the Web, it is recommended to use [rect](/@observablehq/plot-rect) or [dot](/@observablehq/plot-dot) instead, and switch to the raster mark for higher-density images only.*","pinned":false,"hidden":false,"mode":"md"},{"id":615,"value":"## Spatial interpolation\n\nThe image above starts to be readable, but it would be frustrating not to do more with this dataset. It contains many measurements, painstakingly sampled across England, and we should try and extend them to create a complete map. This is the role of the **interpolate** methods of the raster mark. Methods, plural, because there is more than one way to do spatial interpolation.","pinned":false,"hidden":false,"mode":"md"},{"id":624,"value":"The first interpolation method (and easiest to think about) is *nearest*: to color a given location ⟨*x*, *y*⟩ on the raster, it finds the nearest sample in the dataset. Note that, in this method and others, the position of a pixel is defined at its center—the first pixel at the top-left is not ⟨0, 0⟩, but ⟨0.5, 0.5⟩. The _nearest_ interpolation method fills the map with Voronoi cells—called Thiessen polygons in the cartographic lingo.","pinned":false,"hidden":false,"mode":"md"},{"id":1035,"value":"plotca.legend(\"color\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":627,"value":"plotca = Plot.plot({\n projection,\n inset: 10,\n height: 500,\n marginBottom: 2,\n color: { type: \"diverging\" },\n marks: [\n Plot.raster(ca55, {\n x: \"LONGITUDE\",\n y: \"LATITUDE\",\n fill: \"MAG_IGRF90\",\n interpolate: \"nearest\"\n }),\n Plot.frame()\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":642,"value":"If we make the hypothesis that the phenomenon that we observe is actually continuous, it might be better to use the _barycentric_ interpolation, which first covers the region with triangles whose vertices are data points, then interpolates values inside each triangle with a linear gradient between the three values. (Points outside the convex hull are extrapolated with a specific heuristic.)","pinned":false,"hidden":false,"mode":"md"},{"id":644,"value":"Plot.plot({\n projection,\n inset: 10,\n height: 500,\n marginBottom: 2,\n color: { type: \"diverging\" },\n marks: [\n Plot.raster(ca55, {\n x: \"LONGITUDE\",\n y: \"LATITUDE\",\n fill: \"MAG_IGRF90\",\n interpolate: \"barycentric\"\n }),\n Plot.frame()\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":646,"value":"Finally, you can use the _random-walk_ method. It is based on the following idea: to estimate the value at a given location ⟨*x*, *y*⟩, we first check if that location is touching one of the data points (_i.e._, is at a distance lesser than 0.5 pixel). If that is the case, we use the value at that point, and stop. Otherwise, we make a small step in a random direction, and repeat the process. To make this reasonably performant, this intuition is implemented with the [walk on spheres](https://observablehq.com/@fil/walk-on-spheres) algorithm, limited to 2 consecutive jumps.","pinned":false,"hidden":false,"mode":"md"},{"id":650,"value":"Plot.plot({\n projection,\n inset: 10,\n height: 500,\n marginBottom: 2,\n color: { type: \"diverging\" },\n marks: [\n Plot.raster(ca55, {\n x: \"LONGITUDE\",\n y: \"LATITUDE\",\n fill: \"MAG_IGRF90\",\n interpolate: \"random-walk\"\n }),\n Plot.frame()\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":652,"value":"With the _random-walk_ method, the image is grainy (and the grain reflects the uncertainty). We can use the _blur_ parameter to make it smoother:","pinned":false,"hidden":false,"mode":"md"},{"id":656,"value":"Plot.plot({\n projection,\n inset: 10,\n height: 500,\n marginBottom: 2,\n color: { type: \"diverging\" },\n marks: [\n Plot.raster(ca55, {\n x: \"LONGITUDE\",\n y: \"LATITUDE\",\n fill: \"MAG_IGRF90\",\n interpolate: \"random-walk\",\n blur: 5\n }),\n Plot.frame()\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":658,"value":"All these interpolation methods are also exposed as functions so you can use them outside of Plot, or configure them more precisely. If none of them covers your needs, it is even possible to define your own as a function that receives an array of indices into the data, the associated channels x, y, and value, and facet information. See the [API documentation](https://github.com/observablehq/plot/blob/main/README.md#spatial-interpolation) for details.","pinned":false,"hidden":false,"mode":"md"},{"id":919,"value":"Choosing the best spatial interpolation method strongly depends on the use case, and on what the values represent. Both examples above—the volcano elevation and the geomagnetic reference field—are numeric values that reflect a continuous quantitative dimension. But we can use spatial interpolation on discrete, categorical values too. The methods included in Plot have all been implemented in such a way that they can be applied both to quantitative or categorical dimensions. Our next example features the [iris dataset](https://archive.ics.uci.edu/ml/datasets/iris), which encodes the lengths of petals and sepals of different irises, together with their species.","pinned":false,"hidden":false,"mode":"md"},{"id":672,"value":"iris = FileAttachment(\"iris.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":678,"value":"irisChart = Plot.plot({\n inset: 30,\n color: { scheme: \"category10\", legend: true },\n marks: [\n Plot.raster(iris, {\n interpolate: interpolateIris,\n x: \"petalLength\",\n y: \"sepalLength\",\n fill: \"species\",\n fillOpacity: 0.8,\n blur: blurIris\n }),\n Plot.dot(iris, {\n x: \"petalLength\",\n y: \"sepalLength\",\n fill: \"species\",\n stroke: \"white\"\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":680,"value":"viewof interpolateIris = Inputs.radio(\n [null, \"nearest\", \"random-walk\", \"barycentric\"],\n {\n value: \"random-walk\",\n label: \"interpolate\",\n format: (d) => d ?? \"null\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":683,"value":"viewof blurIris = Inputs.range([0, 10], { value: 0, label: \"blur radius\", step: 1 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":669,"value":"For ordinal values, such as the species of an iris, there is no way to represent the “weighted mean” of ${iriscolor(\"setosa\")}, ${iriscolor(\"versicolor\")} and ${iriscolor(\"virginica\")}—so the spatial interpolation switches to a different strategy. In the categorical case, the spatial interpolators mix the different values with a dice roll: when a point represent setosa with a probability of 1/2, versicolor 1/3 and virginica 1/6, we take a random number between 0 and 1 and decide on setosa if it’s less that 0.5, versicolor if less than 5/6, and virginica otherwise.","pinned":false,"hidden":false,"mode":"md"},{"id":693,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":699,"value":"## Working with opacity\n\nThe examples above have been colorful, demonstrating the **fill** output of the raster mark. Another possibility is to set a constant fill and a variable **fillOpacity** channel. Everything works the same, but the generated image is now a mask with a variable opacity. For example, the image below adds a blue tint to the map, with a density that corresponds to the data. ","pinned":false,"hidden":false,"mode":"md"},{"id":703,"value":"Plot.plot({\n projection,\n inset: 10,\n height: 500,\n opacity: { transform: Math.abs },\n marks: [\n Plot.line(ca55, {\n x: \"LONGITUDE\",\n y: \"LATITUDE\",\n z: \"LINE_NUMB-SEG\",\n strokeWidth: 1,\n markerEnd: \"arrow\"\n }),\n Plot.raster(ca55, {\n x: \"LONGITUDE\",\n y: \"LATITUDE\",\n fill: \"steelblue\",\n fillOpacity: \"MAG_IGRF90\",\n interpolate: \"nearest\"\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":745,"value":"## Function sampling\n\nBut that is not all! Sometimes you want to color every pixel in a rectangle with a function that depends on the location ⟨*x*, *y*⟩, similar to a WebGL fragment shader. This case is also supported by the raster mark: when the **fill** channel is defined as a function and there is no data, that function is called repeatedly, for each pixel, with the coordinates (in data space) where the value should be computed. This is useful in mathematics, for example to draw the fractal defined by [Mandelbrot](https://en.wikipedia.org/wiki/Mandelbrot_set)’s function, which tells us whether a certain recursive sequence diverges, and how fast, given two parameters *x* and *y*:","pinned":false,"hidden":false,"mode":"md"},{"id":756,"value":"function mandelbrot(x, y) {\n for (let n = 0, zr = 0, zi = 0; n < 80; ++n) {\n [zr, zi] = [zr * zr - zi * zi + x, 2 * zr * zi + y];\n if (zr * zr + zi * zi > 4) return n;\n }\n // undefined if it has converged, for a transparent pixel\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":746,"value":"Plot.plot({\n height: 500,\n marks: [\n Plot.raster({\n fill: mandelbrot,\n pixelSize: 1 / devicePixelRatio,\n x1: -2,\n x2: 1,\n y1: -1.164,\n y2: 1.164\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":761,"value":"## Faceting\n\nThe raster mark works with faceting, allowing to select different samples on different facets (say, by time). In the case of the function fill, however, since there is no data, the method for faceting is a bit different than usual: facets are passed to the function as the third argument.","pinned":false,"hidden":false,"mode":"md"},{"id":762,"value":"{\n const lin = (x) => x / (4 * Math.PI);\n const { sin, cos } = Math;\n return Plot.plot({\n width: 450,\n height: 420,\n color: { type: \"diverging\" },\n fx: { tickFormat: (f) => f?.name },\n fy: { tickFormat: (f) => f?.name },\n marks: [\n Plot.raster({\n fill: (x, y, { fx, fy }) => fx(x) * fy(y),\n fx: [sin, sin, lin, lin],\n fy: [cos, lin, lin, cos],\n x1: 0,\n y1: 0,\n x2: 4 * Math.PI,\n y2: 4 * Math.PI,\n interval: 0.2\n }),\n Plot.frame()\n ]\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1104,"value":"Next \nAPI Reference","pinned":false,"hidden":false,"mode":"md"},{"id":1071,"value":"---\n\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":1089,"value":"iriscolor = {\n const color = irisChart.scale(\"color\");\n return (species) => textcolor(species, color.apply(species));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":690,"value":"function textcolor(content, style = {}) {\n const {\n background,\n color = d3.lab(background).l >= 60 ? \"#111\" : \"white\", \n padding = \"0 5px\",\n borderRadius = \"4px\",\n fontWeight = 800,\n ...rest\n } = typeof style === \"string\" ? {background: style} : style;\n return htl.html`${content}`;\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}