30:[] 2e:{"title":"Delaunay Mark / Observable Plot","cells":[{"id":103,"value":"

Delaunay Mark / Observable Plot

Observable Plot › Marks › Delaunay · API

\n\n# Plot: Delaunay\n\nThe Delaunay marks compute the [Delaunay triangulation](https://en.wikipedia.org/wiki/Delaunay_triangulation), [Voronoi tessellation](https://en.wikipedia.org/wiki/Voronoi_diagram) (the dual of the Delaunay), and the [convex hull](https://en.wikipedia.org/wiki/Convex_hull) of a given set of two-dimensional points.","pinned":false,"hidden":false,"mode":"md"},{"id":205,"value":"Given a set of points in **x** and **y**, the Voronoi diagram computes the region closest to each point, known as the point’s _Voronoi cell_ (or _Thiessen polygon_). The cell can be empty if another point shares the exact same coordinates. Together, the cells cover the entire plot. Voronoi diagrams can group related points with color, or for interaction, give a larger target for a **title** tooltip with details about the closest penguin to the pointer.","pinned":false,"hidden":false,"mode":"md"},{"id":54,"value":"Plot.plot({\n marks: [\n Plot.voronoi(penguins, {\n x: \"culmen_depth_mm\",\n y: \"culmen_length_mm\",\n fill: \"species\",\n title: \"species\",\n fillOpacity: 0.2,\n stroke: \"white\"\n }),\n Plot.dot(penguins, {\n x: \"culmen_depth_mm\",\n y: \"culmen_length_mm\",\n fill: \"species\",\n pointerEvents: \"none\"\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":234,"value":"Each Voronoi cell is associated with a particular data point, and channels such as **stroke**, **fill**, **fillOpacity**, **strokeOpacity**, **href**, _etc._, work as they do on other marks, such as [dots](/@observablehq/plot-dot).","pinned":false,"hidden":false,"mode":"md"},{"id":108,"value":"The Voronoi diagram is clipped to the frame. To show the local density of a scatterplot, one can draw the whole boundary at once with the Plot.voronoiMesh mark. Given a constant **stroke**, the mesh mark will only draw the boundaries of the Voronoi cells once, whereas the default voronoi mark will draw shared boundaries twice. The mesh defaults to a **strokeWidth** of 1 and a **strokeOpacity** of 0.2.","pinned":false,"hidden":false,"mode":"md"},{"id":74,"value":"Plot.plot({\n marks: [\n Plot.voronoiMesh(penguins, {x: \"culmen_depth_mm\", y: \"culmen_length_mm\"}),\n Plot.dot(penguins, {x: \"culmen_depth_mm\", y: \"culmen_length_mm\", fill: \"species\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":122,"value":"The boundary between two neighboring Voronoi cells is a line segment defined by equal distance from their two respective points. The construction of the Voronoi diagram involves the computation of the Delaunay graph, which defines these neighbors. Use the Plot.delaunayMesh mark to draw the graph. As the following drawing illustrates, the Delaunay graph is computed separately for each color (specifying **z**, **stroke**, or **fill** creates independent series).","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"Plot.plot({\n marks: [\n Plot.delaunayMesh(penguins, {\n x: \"culmen_depth_mm\",\n y: \"culmen_length_mm\",\n z: \"species\",\n stroke: \"species\"\n }),\n Plot.dot(penguins, {\n x: \"culmen_depth_mm\",\n y: \"culmen_length_mm\",\n fill: \"species\"\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":132,"value":"Another derivative of the Delaunay graph is the convex hull of a set of points: the polygon with the minimum perimeter that contains all the points. The Plot.hull mark will draw this hull, again using **z**, **stroke**, or **fill** to specify each series.","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"Plot.plot({\n marks: [\n Plot.hull(penguins, {\n x: \"culmen_depth_mm\",\n y: \"culmen_length_mm\",\n fill: \"species\",\n fillOpacity: 0.2\n }),\n Plot.dot(penguins, {\n x: \"culmen_depth_mm\",\n y: \"culmen_length_mm\",\n stroke: \"species\"\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":135,"value":"In all cases, specifying an explicit **z** computes the mark with independent series. This is not recommended in the case of the voronoi and voronoiMesh marks (as it will result in an unreadable chart due to overlapping Voronoi diagrams), but it can be useful to color the links of the Delaunay graph based on some property, such as the body mass of penguins below. (Note however that the color is driven only by one arbitrary extremity of each edge; this might change in the future.)","pinned":false,"hidden":false,"mode":"md"},{"id":139,"value":"Plot.plot({\n color: {\n legend: true\n },\n marks: [\n Plot.delaunayLink(penguins, {\n x: \"culmen_depth_mm\",\n y: \"culmen_length_mm\",\n stroke: \"body_mass_g\",\n strokeWidth: 1.5\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":156,"value":"These marks all work with one-dimensional charts:\n","pinned":false,"hidden":false,"mode":"md"},{"id":159,"value":"Plot.plot({\n marks: [\n Plot.voronoi(penguins, {\n x: \"body_mass_g\",\n fill: \"species\"\n }),\n Plot.voronoiMesh(penguins, {\n x: \"body_mass_g\",\n stroke: \"white\",\n strokeOpacity: 1\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":272,"value":"Next \nAPI Reference","pinned":false,"hidden":false,"mode":"md"}],"files":"$W30","stdlib":"1","titling":"auto"}