30:T491,

Observable Plot › Marks › Contour · API

# Plot: Contour The **contour** mark generates smooth contours from spatial samples. It is closely related to the [raster mark](/@observablehq/plot-raster), employing the same spatial interpolation techniques to transform samples {*x*, *y*, *value*} into a raster grid; but instead of returning that grid as an image, it then derives contour polygons via [marching squares](https://github.com/d3/d3-contour). These polygons are drawn as SVG paths, and can receive fill and stroke properties as well as any other common options such as opacity, title, _etc._ _Note: this notebook only presents the specificities of the contour mark; please see the [raster mark](/@observablehq/plot-raster) for details on options that are shared between the two marks._31:[{"id":"ba5f62c99f0cb2c9af4edfebe3001d3ffc54ab2e515dbd7ae31aa2b17626308c37aa85ad61b2c36ec73c68ec857dd204394753267dcd42b7a0be1f090c2489c4","href":"https://static.observableusercontent.com/files/ba5f62c99f0cb2c9af4edfebe3001d3ffc54ab2e515dbd7ae31aa2b17626308c37aa85ad61b2c36ec73c68ec857dd204394753267dcd42b7a0be1f090c2489c4","name":"volcano.json","type":"application/json","lastModified":1673533219959.143,"size":20846},{"id":"7264a7b96ffed8faf4c5c5a4422701cd8a27adc01f09f3bc6d2e7cc63a2bc5afe9c1467c73016cd974e8ca3e8230b5f83477add3f900dc509c1e4cb1eac9bcca","href":"https://static.observableusercontent.com/files/7264a7b96ffed8faf4c5c5a4422701cd8a27adc01f09f3bc6d2e7cc63a2bc5afe9c1467c73016cd974e8ca3e8230b5f83477add3f900dc509c1e4cb1eac9bcca","name":"MYDAL2_M_SKY_WV_2022-11-01_rgb_360x180.csv","type":"text/csv","lastModified":1673874731342.64,"size":322488}] 2e:{"title":"Contour Mark / Observable Plot","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":14,"value":"## Gridded data\n\nContours can be derived for data that is already organized on a grid. For example, this [classic](/@d3/volcano-contours) digital elevation model of the [Maungawhau](https://en.wikipedia.org/wiki/Maungawhau) volcano is presented without longitude or latitude coordinates, but as a rectangular grid:","pinned":false,"hidden":false,"mode":"md"},{"id":18,"value":"volcano = FileAttachment(\"volcano.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"Plot.contour(volcano.values, {width: volcano.width, height: volcano.height}).plot()","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"By default, each contour is rendered with a stroke of _currentColor_ and a stroke width of 1px. For filled contours instead, use the fill channel. And reverse the *y*-axis to place the first value in the top-left.","pinned":false,"hidden":false,"mode":"md"},{"id":35,"value":"Plot.contour(volcano.values, {\n width: volcano.width,\n height: volcano.height,\n fill: Plot.identity,\n stroke: \"currentColor\",\n thresholds: 20\n}).plot({\n y: { reverse: true }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":119,"value":"Similar to the [bin transform](/@observablehq/plot-bin), the levels for which contours are computed can be specified either with the **interval** option (_e.g._, interval: 10 on the volcano elevation data means one contour every 10 meters); or with the **thresholds** option, which, if specified as a number, indicates an approximate number of contours. (See the [API documentation](https://github.com/observablehq/plot/blob/main/README.md#bin) for more details.) ","pinned":false,"hidden":false,"mode":"md"},{"id":65,"value":"## Sampled data\n\nWhen the data is not on a grid, or when that grid is not rectangular (for example through the use of a [projection](/@observablehq/plot-projection)), a spatial interpolation strategy can be specified; it defaults to _nearest_. The cell below reads the water vapor data for November 2022, downloaded from [NASA’s Earth Observations website](https://neo.gsfc.nasa.gov/view.php?datasetId=MYDAL2_M_SKY_WV) as a CSV grid with a coarse resolution of 360×180 values. The values are in centimeters.","pinned":false,"hidden":false,"mode":"md"},{"id":150,"value":"vapor = (await FileAttachment(\"MYDAL2_M_SKY_WV_2022-11-01_rgb_360x180.csv\").csv({array: true}))\n .flat().map((x) => (x === \"99999.0\" ? NaN : +x))","pinned":true,"hidden":false,"mode":"ojs"},{"id":157,"value":"Plot.plot({\n width: 960,\n projection: \"equal-earth\",\n color: { scheme: \"blues\", legend: true, ticks: 6, nice: true, label: \"Water vapor (cm)\" },\n marks: [\n Plot.contour(vapor, {\n fill: Plot.identity,\n width: 360,\n height: 180,\n x1: -180,\n y1: 90,\n x2: 180,\n y2: -90,\n interval: 0.25,\n blur: 0.5,\n interpolate: \"barycentric\",\n stroke: \"currentColor\",\n strokeWidth: 0.5,\n clip: \"sphere\"\n }),\n Plot.sphere()\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":290,"value":"## Function sampling\n\nLike the raster mark, the contour mark can sample values with a function of _x_ and _y_.","pinned":false,"hidden":false,"mode":"md"},{"id":292,"value":"Plot.plot({\n aspectRatio: 1,\n color: { type: \"diverging\", legend: true, label: \"sin(x) cos(y)\" },\n marks: [\n Plot.contour({\n fill: (x, y) => Math.sin(x) * Math.cos(y),\n x1: 0,\n y1: 0,\n x2: 4 * Math.PI,\n y2: 4 * Math.PI\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":128,"value":"If the chart uses facets, the facet values are passed as the third argument of the function. Note that the levels are shared between the facets, ensuring consistency.","pinned":false,"hidden":false,"mode":"md"},{"id":67,"value":"{\n const lin = (x) => x / (4 * Math.PI);\n const { sin, cos } = Math;\n return Plot.plot({\n aspectRatio: 1,\n color: { type: \"diverging\" },\n fx: { tickFormat: (f) => f.name },\n fy: { tickFormat: (f) => f.name, reverse: true },\n marks: [\n Plot.contour({\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":285,"value":"Next \nAPI Reference","pinned":false,"hidden":false,"mode":"md"}],"files":"$W31","stdlib":"1","titling":"auto"}