2e:null 2f:["$","title",null,{"children":"Hello Plot layout with HTML and CSS | Jo Wood | Observable"}] 34:[] 32:{"id":"0d19fb81b20e1826","slug":"hello-plot-layout-with-html-and-css","title":"Hello Plot layout with HTML and CSS","thumbnail":"e1daa81a71284be42476cac72e34a810c9c773c009391ed4e23e2496378d0838","access_level":"public","create_time":"$D2024-10-28T09:48:00.419Z","update_time":"$D2026-09-10T13:52:38.744Z","view_time":null,"first_public_time":"$D2024-10-28T13:45:51.193Z","has_unpublished_edits":null,"fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"9461f58b209074d5","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":"starter_2024"},"version":437,"publish_version":437,"role":null,"authored":false,"authors":[{"type":"individual","id":"e2432cc13dc447d3","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":null}],"members":[{"type":"team","id":"9461f58b209074d5","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":"starter_2024","role":"editor"},{"type":"individual","id":"e2432cc13dc447d3","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"ae8896a1274d5f06","slug":"hello","title":"Hello","owner":{"id":"9461f58b209074d5","login":"jwolondon","name":"Jo Wood"}},"type":"notebook","body":{"title":"Hello Plot layout with HTML and CSS","cells":[{"id":0,"value":"# Hello Plot layout with HTML and CSS","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"For most visualizations, marks can be arranged within a single [Plot](https://observablehq.com/plot/) using its `x` and `y`, `fx` and `fy` channels and `projection` settings. Sometimes, however, we need to arrange entirely independent Plot outputs. Below are some options for doing this depending on desired layout and its response to browser window size.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"## 1. Vertical juxtaposition with standard notebook layout\n\nThe most straightforward is simply to display one visualization after the other in the notebook, resulting in the standard vertical _juxtaposition_ ${bib.citep(\"gleicher_visual_2011\")}.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"display(vis1())\ndisplay(vis2())","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"## 2. Horizontal juxtaposition with Flexbox and grid\n\nFlexbox provides a simple responsive layout when the visualizations form a single row. Allowing the items to wrap also gives a sensible layout when less horizontal space is available.\n\nFlexbox provides a simple horizontal layout when the visualizations form a single row. By default, each item retains its intrinsic width when space permits and shrinks if necessary to fit the available width. The dashed outline indicates the containing region.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":46,"value":"

\n ${vis1()} ${vis2()}\n

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"To give items an explicit equal width even if their sizes vary, we can use `grid` rather than `flexbox` layout and specify their display widths with `1fr` per item.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"

\n ${vis1()} ${vis2()}\n

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"Grid tracks can be assigned different proportions. Below, the second column receives twice as much of the available width as the first:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"

\n ${vis1()} ${vis2()}\n

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"## 3. Juxtaposition in a two-dimenional grid\n\nWhen there are more items than explicitly defined columns, The `grid` layout automatically creates additional rows. The grid can be given a preferred `width`, while `max-width: 100%`` prevents it from overflowing on narrower displays.\n\nFor example, here are 6 items in a 3-column grid taking no more than 640px of width:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":196,"value":"

\n ${vis1()} \n ${vis2()} \n ${vis1()} \n ${vis2()} \n ${vis1()} \n ${vis2()} \n

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"## 4. Superposition","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":145,"value":"Multiple visualization outputs can occupy the same space (referred to as _superposition_ by ${bib.cite('gleicher_visual_2011')}).\n\nThis can be managed by assigning multiple items to the same `grid` area. The enclosing grid has a fixed width, while the visualization in normal layout flow determines its height. Items that may be smaller than the largest one in this container can be positioned in one of four corners via `place-self` and `start` and `end`. The `z-index` controls the drawing order in case of overlap.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":198,"value":"

${vis2()}

${vis1()}

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"For more precise control of relative position one or more item containers can be set with `position: absolute` and its offset from one or more containing region's edges set with `top`, `bottom`, `left` or `right`.\n\nIn the example below, the globe is positioned to be 9% of the way from the top and 5% from the right in order to place it touching one of the bars and 'behind' the bar to its left.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"

${vis2()}

${vis1()}

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"## References\n\n${bib.bibliography()}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"---\n\n## Appendices","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":180,"value":"_For reading external data sources:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"import { readData } from \"observable:@jwolondon/utilities-cdt-2026\"","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"const countryGeodata = topojson.feature(\n await readData(\n \"110m.json\",\n \"https://cdn.jsdelivr.net/npm/visionscarto-world-atlas/world/\"\n ),\n \"countries\"\n).features;","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"const penguinData = await readData(\"penguins.json\");","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"_For references:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":163,"value":"import { Refs } from \"observable:@gicentre/references-class\"","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"const bib = Refs.create(`@article{gleicher_visual_2011,\n title={Visual comparison for information visualization},\n author={Gleicher, Michael and Albers, Danielle and Walker, Rick and Jusufi, Ilir and Hansen, Charles D and Roberts, Jonathan C},\n journal={Information Visualization},\n volume={10},\n number={4},\n pages={289--309},\n year={2011},\n publisher={Sage Publications Sage UK: London, England},\n doi={10.1177/1473871611416549}\n}`);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"_Simple histogram:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"const vis2 = () =>\n Plot.plot({\n width: 640,\n subtitle: \"Distribution of penguin weights\",\n marks: [\n Plot.rectY(\n penguinData,\n Plot.binX(\n { y: \"count\" },\n { x: \"Body Mass (g)\", fill: \"oklch(74% 0.03 50)\" }\n )\n )\n ]\n })","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"_Simple world map:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"const vis1 = () =>\n Plot.plot({\n width: 250,\n projection: {type: \"orthographic\", rotate: [0, 70, 0]},\n marks: [\n Plot.sphere({fill: \"oklch(94% 0.02 200)\"}),\n Plot.geo(countryGeodata, {fill: \"oklch(74% 0.03 50)\"}),\n Plot.graticule({strokeOpacity: 0.1})\n ]\n });","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"_For page style and layout:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"import {defaultStyle} from \"observable:@jwolondon/utilities-cdt-2026\"","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"defaultStyle()","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"2","titling":"auto"}} 33:"$32:body"