30:[{"id":"715db1223e067f00500780077febc6cebbdd90c151d3d78317c802732252052ab0e367039872ab9c77d6ef99e5f55a0724b35ddc898a1c99cb14c31a379af80a","href":"https://static.observableusercontent.com/files/715db1223e067f00500780077febc6cebbdd90c151d3d78317c802732252052ab0e367039872ab9c77d6ef99e5f55a0724b35ddc898a1c99cb14c31a379af80a","name":"penguins.csv","type":"text/csv","lastModified":1613503170201.764,"size":13506}] 2e:{"title":"Frame Mark / Observable Plot","cells":[{"id":0,"value":"

Frame Mark / Observable Plot

Observable Plot › Marks › Frame · API

\n\n# Plot: Frame\n\nA frame draws a box around the plot area.","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"Plot.plot({\n grid: true,\n x: {domain: [0, 1]},\n marks: [Plot.frame()]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"Frames are most commonly used in conjunction with facets to provide better separation (Gestalt grouping) of faceted marks. Without a frame, it can be hard to tell where one facet ends and the next begins.","pinned":false,"hidden":false,"mode":"md"},{"id":88,"value":"viewof framed = Inputs.toggle({label: \"Show frame\", value: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"Plot.plot({\n grid: true,\n inset: 10,\n marks: [\n framed ? Plot.frame() : [],\n Plot.dot(penguins, {x: \"culmen_length_mm\", y: \"culmen_depth_mm\", fill: \"#eee\"}),\n Plot.dot(penguins, {x: \"culmen_length_mm\", y: \"culmen_depth_mm\", fx: \"species\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"penguins = FileAttachment(\"penguins.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"Unlike other marks, a frame never takes data; the first argument to Plot.frame is the *options* object. (For a similar data-driven mark, see [Plot.rect](/@observablehq/plot-rect?collection=@observablehq/plot).)","pinned":false,"hidden":false,"mode":"md"},{"id":13,"value":"Plot.plot({\n grid: true,\n x: {domain: [0, 1]},\n marks: [Plot.frame({stroke: \"red\"})]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":158,"value":"The **anchor** option, if specified to a value of *left*, *right*, *top* or *bottom*, draws only that side of the frame. In that case, the *fill* and *rx*, *ry* options are ignored:","pinned":false,"hidden":false,"mode":"md"},{"id":160,"value":"Plot.plot({\n width: 300,\n height: 100,\n margin: 2,\n marks: [\n Plot.frame({ anchor: \"left\", stroke: \"red\", strokeWidth: 4 }),\n Plot.frame({ anchor: \"right\", stroke: \"green\", strokeWidth: 4 }),\n Plot.frame({ anchor: \"top\", stroke: \"blue\", strokeWidth: 4 }),\n Plot.frame({ anchor: \"bottom\", stroke: \"black\", strokeWidth: 4 })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":132,"value":"Next \nAPI Reference","pinned":false,"hidden":false,"mode":"md"}],"files":"$W30","stdlib":"1","titling":"auto"}