2c:null 2d:["$","title",null,{"children":"Contour Mark / Observable Plot | Observable | Observable"}] 32: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._33:[{"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}] 30:{"id":"84e7476e811a0ecb","slug":"plot-contour","title":"Contour Mark / Observable Plot","thumbnail":"49cd7536ea0fac9334f3cd1b0b5b7bd60b7c93e6f920e3c6359817261c2c241a","access_level":"public","create_time":"$D2023-01-12T14:12:19.693Z","update_time":"$D2023-03-06T18:33:49.139Z","view_time":null,"first_public_time":"$D2023-01-18T21:33:30.849Z","has_unpublished_edits":null,"fork":false,"stars":11,"starred":false,"owner":{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024"},"version":311,"publish_version":null,"role":null,"authored":false,"authors":[],"members":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null,"role":"editor"},{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null,"role":"editor"},{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"febc26eef760de7c","slug":"plot","title":"Observable Plot","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"titling":"auto","title":"Contour Mark / Observable Plot","cells":[{"id":0,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"volcano = FileAttachment(\"volcano.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"Plot.contour(volcano.values, {width: volcano.width, height: volcano.height}).plot()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"Next \nAPI Reference","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"