31:[] 2f:{"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"},{"id":7,"value":"For much of the time, you can specify the layout of a visualization directly from within [Plot](https://observablehq.com/plot/). Typically by specifying `x`, `y`, `fx`, `fy` and `projection` variables. But sometimes there is a need to combine entirely separate Plot outputs. Below are some options for doing this with varying degrees of sophistication.","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"## 1. Juxtaposition: Standard notebook vertical layout\n\nThe most straightforward is simply to order one vis after the other in the Observable notebook, resulting in the standard vertical _juxtaposition_ ${bib.citep(\"gleicher_visual_2011\")}.","pinned":false,"hidden":false,"mode":"md"},{"id":21,"value":"vis1()","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"vis2()","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"## 2. Juxtaposition: Embed in a markdown table\n\nFor horizontal juxtaposition, Plot output can be placed in the cells of a markdown table:","pinned":false,"hidden":false,"mode":"md"},{"id":46,"value":"|First vis | Second vis |\n| --------- | ---------- |\n| ${vis1()} | ${vis2()} |","pinned":true,"hidden":false,"mode":"md"},{"id":54,"value":"This is quite simple to implement but will size the table to the standard markdown width in Observable documents (640 pixels wide) and then size the content in each cell to fit. Will also insert a 'header row' with line below it at the top of the table.","pinned":false,"hidden":false,"mode":"md"},{"id":56,"value":"## 3. Juxtaposition: Embed in a CSS grid layout\n\nWe can use CSS to create a more flexible layout for both horizontal juxtaposition and gridded layouts by embedding within an HTML cell. Items are added to the grid from top-left in row-prime order:","pinned":false,"hidden":false,"mode":"md"},{"id":61,"value":"

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

","pinned":true,"hidden":false,"mode":"html"},{"id":64,"value":"By default the grid will expand to the maximum container width of an Observable page (1170px) and space the contents to use the full space, shrinking the contents if less space than this is available.\n\nMore control over gridded layout including the width of the entire space and gaps between cells is easy to set via CSS styles. The gridded layout below just uses the two vis examples, but obviously, for real use, each vis can be different:","pinned":false,"hidden":false,"mode":"md"},{"id":66,"value":"

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

","pinned":true,"hidden":false,"mode":"html"},{"id":84,"value":"## 4. Superposition via CSS","pinned":false,"hidden":false,"mode":"md"},{"id":145,"value":"For more precise placement, we can use the older style of CSS arrangement by creating a container of fixed pixel dimensions and then within it placing vis content inside `div` elements with absolute positioning (but relative to the enclosing container). This allows multiple vis outputs to occupy the same, or partially overlapping space via _superposition_ ${bib.citep('gleicher_visual_2011')}\n\nTo keep tings flexible, size and top-left of the vis containers are best expressed as percentages so they adapt if the containing region changes dimensions.","pinned":false,"hidden":false,"mode":"md"},{"id":88,"value":"

${vis1()}

${vis2()}

","pinned":true,"hidden":false,"mode":"html"},{"id":169,"value":"## References","pinned":false,"hidden":false,"mode":"md"},{"id":175,"value":"bib.bibliography()","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"---\n\n## Appendices","pinned":false,"hidden":false,"mode":"md"},{"id":180,"value":"_For reading external data sources:_","pinned":false,"hidden":false,"mode":"md"},{"id":18,"value":"import { readData } from \"@jwolondon/teaching-utilities\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"countryGeodata = {\n const topoData = await readData(\n \"110m.json\",\n \"https://cdn.jsdelivr.net/npm/visionscarto-world-atlas/world/\"\n );\n return topojson.feature(topoData, \"countries\").features;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"penguinData = await readData(\"penguins.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"_For references:_","pinned":false,"hidden":false,"mode":"md"},{"id":163,"value":"import { Refs } from \"@gicentre/references-class\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"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":"ojs"},{"id":38,"value":"_Simple histogram:_","pinned":false,"hidden":false,"mode":"md"},{"id":26,"value":"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":"ojs"},{"id":36,"value":"_Simple world map:_","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"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":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}