3e:null 3f:["$","title",null,{"children":"Popover Plot | Christian Klettner | Observable"}] 45:[] 43:{"id":"ae49754333047791","slug":null,"title":"Popover Plot","thumbnail":"8fcb12b0ae1d24601dc2ae34d7b51c7f935ff77258a8f0e03b34476587945473","access_level":"public","create_time":"$D2026-01-03T21:05:15.357Z","update_time":"$D2026-01-03T21:58:02.513Z","view_time":null,"first_public_time":"$D2026-01-03T21:44:42.375Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"1e6bbbc1fea19b9b","login":"klettsch","name":"Christian Klettner","avatar_url":"https://avatars-next.observableusercontent.com/a2034439cf44a563da383de835ee021f6b6b0fe384e6da3aac36176d6f7b8a0a","tier":"starter_2024","bio":"Risk, finance, economic modelling, forecasting and stress testing","following":false},"version":142,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9c99afc3bb345c32","login":"klettsch","name":"Christian Klettner","avatar_url":"https://avatars-next.observableusercontent.com/0d0f4aae093b36282a186ea737feb66dc7f5bb69d65e30cc5a159c34f0a77f47","tier":null,"bio":"Risk, finance, economic modelling, forecasting and stress testing","following":false}],"members":[{"type":"team","id":"1e6bbbc1fea19b9b","login":"klettsch","name":"Christian Klettner","avatar_url":"https://avatars-next.observableusercontent.com/a2034439cf44a563da383de835ee021f6b6b0fe384e6da3aac36176d6f7b8a0a","tier":"starter_2024","role":"editor"},{"type":"individual","id":"9c99afc3bb345c32","login":"klettsch","name":"Christian Klettner","avatar_url":"https://avatars-next.observableusercontent.com/0d0f4aae093b36282a186ea737feb66dc7f5bb69d65e30cc5a159c34f0a77f47","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Popover Plot","cells":[{"id":0,"value":"# Popover Plot \n\nPopover works with any HTML content including a SVG generated by Plot, just wrap the plot output in a div and associate the div with the button using `id` and `popovertarget`. \n\nPopover mechanics are determined by `popover='auto'`, [see]([popover=\"auto\"](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/popover), which determines how the popover appears and how it is dismissed. \n\nUse the CSS styling `position-anchor` to determine where on the page the popover should appear, the anchor is a CSS variable name and must start with a double hyphen (--). Use the CSS `position-area` [see](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/position-area) to determine where relative to the anchor the popover should appear. Position area is relatively new, and not supported by older web browsers, but its coverage is universal on the latest versions of all browsers. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":112,"value":"Plot anchor here, labeled as --pltanchor","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":33,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":54,"value":"plt = Plot.plot({ \n width: 250, \n height: 180, \n marginBottom: 20, \n inset: 2, \n marginTop: 10,\n y: { label: null, type: \"log\" }, \n marks: [ \n Plot.frame({ fill: \"#f9f9f9\" }), \n Plot.ruleY([d3.min(stocks, d => d.Close)]),\n Plot.lineY(stocks, {x: \"Date\", y: \"Close\", stroke: \"Symbol\" }) \n ]}); ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"The plot is inserted in a div with an id `pltpop` which is also associated with the `popovertarget` attribute of the button. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":37,"value":"

\n ${plt}\n

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"import {stocks} from \"558c4eae846df71f\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W45","stdlib":"1"}} 44:"$43:body"