2c:null 2d:["$","title",null,{"children":"Displaying multiple plots of the whole dataset - a collection of Plot examples | ee2dev | Observable"}] 32:[] 30:{"id":"5c11db2d0dc9b3f5","slug":"displaying-multiple-plots-of-the-whole-dataset-a-collectio","title":"Displaying multiple plots of the whole dataset - a collection of Plot examples","thumbnail":"aad2a1a6c3fff88e4562eb8b1723e50bdb6caf03027c5d746b06df6b9d96d07a","access_level":"public","create_time":"$D2022-02-17T23:48:36.745Z","update_time":"$D2024-04-16T23:49:48.014Z","view_time":null,"first_public_time":"$D2022-02-18T00:22:41.083Z","fork":{"id":"37e93cbb45aeeda3","slug":"the-function-mark-a-collection-of-plot-examples","title":"The function mark - a collection of Plot examples","owner":{"id":"e6e1e2a0da500bb6","login":"ee2dev","name":""}},"stars":1,"starred":false,"owner":{"type":"team","id":"e6e1e2a0da500bb6","login":"ee2dev","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c41b514d64cff7415ffc87106c620e16cefe80b6d853fb3a05e19a000c3612c0","tier":"starter_2024"},"version":416,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9ba5e0b68d3e7972","login":"ee2dev","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c41b514d64cff7415ffc87106c620e16cefe80b6d853fb3a05e19a000c3612c0","tier":null}],"members":[{"type":"individual","id":"9ba5e0b68d3e7972","login":"ee2dev","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c41b514d64cff7415ffc87106c620e16cefe80b6d853fb3a05e19a000c3612c0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":4,"collection":{"id":"a77077bc9385c1d7","slug":"plot","title":"Plot","owner":{"id":"e6e1e2a0da500bb6","login":"ee2dev","name":""}},"type":"notebook","body":{"title":"Displaying multiple plots of the whole dataset - a collection of Plot examples","cells":[{"id":0,"value":"# Displaying multiple plots of the whole dataset - a collection of Plot examples \n\nYou can display multiple plots with the facet option, but that allows only to plot disjunct subsets of the data split by values of a categorical column. Here is how you do multiple plots of the whole dataset:\n\nYou create an array of plots with:\n```js\nhtml`\\${[array of Plots]}`\n```\nTo have the plots arranged horizontally you can use ```style=\"display:flex\"```, e.g.:\n```html\nhtml`

\\${plot1()} \\${plot2()}

`\n``` \n\nTo have the plots arranged horizontally you can also use ```style=\"display:grid\"```, e.g.: \n```html\nhtml`

\n \\${plot1()} \\${plot2()} \\${plot3()}\n

`\n```\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":17,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"### Vertical arrangement of multiple plots of the whole dataset","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":269,"value":"{\n return html`${Object.keys(countries[0]).map((dimension) =>\n Plot.plot({\n height: 300,\n x: {\n line: true\n },\n y: {\n line: true\n },\n facet: {\n data: countries,\n y: \"region\"\n },\n\n marks: [\n Plot.tickX(countries, { x: dimension, stroke: \"region\", tip: true })\n ]\n })\n )}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":407,"value":"### Vertical arrangement of multiple plots of the whole dataset with different y axis","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":400,"value":"groupedCountries = d3.groups(countries, (d) => d.region)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":386,"value":"{\n return html`${groupedCountries.map((countries) =>\n Plot.plot({\n marginLeft: 200,\n height: 1000,\n inset: 5,\n marks: [\n Plot.frame(),\n Plot.dot(countries[1], {\n x: \"area\",\n y: \"country\",\n stroke: \"region\",\n tip: true\n })\n ]\n })\n )}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":392,"value":"countries","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":338,"value":"### Horizontal arrangement of multiple plots of the whole dataset","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":325,"value":"viewof orientation = Inputs.radio([\"vertical\", \"horizontal\"], {\n label: \"Select one\",\n value: \"horizontal\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":319,"value":"orientation === \"vertical\"\n ? html`

${plot1()}${plot2()}

`\n : html`

${plot1()}${plot2()}

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":321,"value":"function plot1() {\n return Plot.plot({\n width: 200,\n height: 150,\n marks: [Plot.areaY(aapl, { x: \"Date\", y: \"Close\" }), Plot.ruleY([0])]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":323,"value":"function plot2() {\n return Plot.plot({\n width: 200,\n height: 150,\n marks: [\n Plot.dot(cars, {\n x: \"power (hp)\",\n y: \"economy (mpg)\",\n strokeOpacity: 0.2\n })\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":200,"value":"### Horizontal arrangement of multiple plots with grid layout","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":355,"value":"function plot3() {\n return Plot.plot({\n width: 200,\n height: 150,\n x: {\n type: \"log\"\n },\n marks: [\n Plot.arrow(citywages, {\n x1: \"POP_1980\",\n y1: \"R90_10_1980\",\n x2: \"POP_2015\",\n y2: \"R90_10_2015\",\n bend: true\n })\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":361,"value":"

\n ${plot1()}\n ${plot2()}\n ${plot3()}\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":25,"value":"import { countries } from \"@ee2dev/plot-party\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"#### Misc","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":13,"value":"import { toc } from \"@mbostock/toc\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 31:"$30:body"