### Index
---
# https://vitepress.dev/reference/default-theme-home-page
layout: home
titleTemplate: "The JavaScript library for exploratory data visualization"
head:
- - link
- rel: canonical
href: https://observablehq.com/plot/
- - meta
- name: title
content: Observable Plot
- - meta
- name: description
content: The JavaScript library for exploratory data visualization
- - meta
- name: twitter:card
content: summary_large_image
- - meta
- name: twitter:site
content: "@observablehq"
- - meta
- property: og:description
content: The JavaScript library for exploratory data visualization
- - meta
- property: og:image
content: https://static.observableusercontent.com/thumbnail/64f414fef8a91248865f5759641b0cf537bc87c0aaf57dc368ffe673013eccaa.jpg
- - meta
- property: og:site_name
content: Observable
- - meta
- property: og:title
content: Observable Plot
- - meta
- property: og:type
content: article
- - meta
- property: og:url
content: https://observablehq.com/plot/
hero:
name: "Observable Plot"
text: "The JavaScript library for exploratory data visualization"
tagline: "Create expressive charts with concise code"
image:
src: /plot.svg
alt: Observable Plot
actions:
- theme: brand
text: Get started
link: /getting-started
- theme: alt
text: What is Plot?
link: /what-is-plot
- theme: alt
text: Examples
link: https://observablehq.com/@observablehq/plot-gallery
features:
- title: Marks
details: "Plot doesn’t have chart types. Instead, it has layered geometric shapes such as bars, dots, and lines."
link: /features/marks
- title: Scales
details: "Scales map an abstract value such as time or temperature to a visual value such as position or color."
link: /features/scales
- title: Transforms
details: "Derive data on-the-fly while plotting, say to bin quantitative values or compute a rolling average."
link: /features/transforms
- title: Facets
details: "Small multiples facilitate comparison by repeating a plot across partitions of data."
link: /features/facets
- title: Projections
details: "Plot supports GeoJSON and D3’s spherical projection system for geographic maps."
link: /features/projections
- title: Built with D3
details: "Plot is built by the same team as D3. If you know some D3, you’ll be right at home with Plot."
link: https://d3js.org
linkText: Visit D3
- title: Plot without code
details: With Observable’s chart cell, quickly create plots with a GUI, then eject to code to customize.
link: https://observablehq.com/@observablehq/chart-cell
linkText: Try chart cell
- title: Built by Observable
details: Plot is developed by Observable, the platform for collaborative data analysis.
link: https://observablehq.com
linkText: Visit Observable
---
](https://observablehq.com/@observablehq/plot-world-airports)
```js
Plot.plot({
projection: {type: "orthographic", rotate: [110, -50]},
marks: [
Plot.dot(airports, {x: "longitude", y: "latitude", fill: "red", r: 1}),
Plot.voronoiMesh(airports, {x: "longitude", y: "latitude", clip: land}),
Plot.sphere(),
Plot.geo(land)
]
})
```
The GeoJSON object passed to the **clip** option is rendered as a [`clipPath` element](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath) using the same path data that a [geo mark](https://observablehq.com/plot/marks/geo) would produce, respecting the plot’s top-level **projection** option, if any. For performance, `clipPath` elements are shared by marks clipped with the same GeoJSON object. For example, the [raster mark](https://observablehq.com/plot/marks/raster) and [contour mark](https://observablehq.com/plot/marks/contour) below show atmospheric water vapor measurements across the United States from [NASA Earth Observations](https://neo.gsfc.nasa.gov/view.php?datasetId=MYDAL2_M_SKY_WV); both marks are clipped to the nation’s boundary, censoring the (absurd) values that would otherwise be interpolated between Alaska, Southern California, and Hawai’i.
[
](https://observablehq.com/@observablehq/plot-us-water-vapor)
```js
Plot.raster(vapor, {
fill: Plot.identity,
width: 360,
height: 180,
x1: -180, y1: 90, x2: 180, y2: -90,
interpolate: "barycentric",
blur: 10,
clip: nation
}).plot()
```
[The code for the map above is too long to reproduce here in its entirety; click the image above for the complete code.]
The **clip** mark option can also be used to clip against arbitrary polygons, not just geographic boundaries. For example, to show the value of [Math.atan2](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atan2) over the unit circle:
[
](https://observablehq.com/@observablehq/plot-color-angle)
```js
Plot.raster({
x1: -1, x2: 1, y1: -1, y2: 1,
fill: (x, y) => Math.atan2(y, x),
clip: {
type: "Polygon",
coordinates: [
d3.range(0, 2 * Math.PI, 0.1).map((angle) => [Math.cos(angle), Math.sin(angle)])
]
}
}).plot({width: 300, aspectRatio: 1})
```
The interactive **tip** associated with a [waffle mark](https://observablehq.com/plot/marks/waffle) is now anchored to the “center” of the visual representation of the associated datum. That center depends on the shape that is referenced. For fun, here’s a chart from our unit tests showing these anchoring points for various amounts of waffling. Baffling!
---
For earlier changes, continue to the [2024 CHANGELOG](./CHANGELOG-2024.md).
---