31:[] 2f:{"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"},{"id":17,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"### Vertical arrangement of multiple plots of the whole dataset","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":407,"value":"### Vertical arrangement of multiple plots of the whole dataset with different y axis","pinned":false,"hidden":false,"mode":"md"},{"id":400,"value":"groupedCountries = d3.groups(countries, (d) => d.region)","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":392,"value":"countries","pinned":true,"hidden":false,"mode":"ojs"},{"id":338,"value":"### Horizontal arrangement of multiple plots of the whole dataset","pinned":false,"hidden":false,"mode":"md"},{"id":325,"value":"viewof orientation = Inputs.radio([\"vertical\", \"horizontal\"], {\n label: \"Select one\",\n value: \"horizontal\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"orientation === \"vertical\"\n ? html`

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

`\n : html`

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

`","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":200,"value":"### Horizontal arrangement of multiple plots with grid layout","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":361,"value":"

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

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