Multi-Panel Quarto Example

πŸ§ͺ Multi-Panel Layouts in Quarto

πŸ”Ή Columns Layout

πŸ“Š Number of Studies

πŸ—ΊοΈ Study Locations

πŸ”Ή Tabs Layout

πŸ‘©β€πŸ”¬ Top Scientists

🌍 Study Map

πŸ”Ή HTML Grid Layout

<h3>πŸ“Š Chart Panel</h3>


::: {.cell}
::: {.cell-output .cell-output-stderr}

```
No scatter mode specifed:
  Setting the mode to markers
  Read more about this attribute -> https://plotly.com/r/reference/#scatter-mode
```


:::

::: {.cell-output-display}


```{=html}
<div class="plotly html-widget html-fill-item-overflow-hidden html-fill-item" id="htmlwidget-b235297bf32cd18966dc" style="width:100%;height:464px;"></div>
<script type="application/json" data-for="htmlwidget-b235297bf32cd18966dc">{"x":{"visdat":{"11c0f42e9298f":["function () ","plotlyVisDat"]},"cur_data":"11c0f42e9298f","attrs":{"11c0f42e9298f":{"x":{},"y":{},"alpha_stroke":1,"sizes":[10,100],"spans":[1,20],"type":"scatter"}},"layout":{"margin":{"b":40,"l":60,"t":25,"r":10},"xaxis":{"domain":[0,1],"automargin":true,"title":"Year"},"yaxis":{"domain":[0,1],"automargin":true,"title":"Studies"},"hovermode":"closest","showlegend":false},"source":"A","config":{"modeBarButtonsToAdd":["hoverclosest","hovercompare"],"showSendToCloud":false},"data":[{"x":[2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,2017,2018,2019,2020,2021,2022,2023,2024],"y":[12,8,19,5,7,25,20,27,27,22,11,22,28,7,30,8,23,17,9,14,9,18,30,7,24],"type":"scatter","mode":"markers","marker":{"color":"rgba(31,119,180,1)","line":{"color":"rgba(31,119,180,1)"}},"error_y":{"color":"rgba(31,119,180,1)"},"error_x":{"color":"rgba(31,119,180,1)"},"line":{"color":"rgba(31,119,180,1)"},"xaxis":"x","yaxis":"y","frame":null}],"highlight":{"on":"plotly_click","persistent":false,"dynamic":false,"selectize":false,"opacityDim":0.2,"selected":{"opacity":1},"debounce":0},"shinyEvents":["plotly_hover","plotly_click","plotly_selected","plotly_relayout","plotly_brushed","plotly_brushing","plotly_clickannotation","plotly_doubleclick","plotly_deselect","plotly_afterplot","plotly_sunburstclick"],"base_url":"https://plot.ly"},"evals":[],"jsHooks":[]}</script>
```


:::
:::
<h3>🌐 Map Panel</h3>


::: {.cell}
::: {.cell-output-display}


```{=html}
<div class="leaflet html-widget html-fill-item-overflow-hidden html-fill-item" id="htmlwidget-12b650202b7a40aca074" style="width:100%;height:464px;"></div>
<script type="application/json" data-for="htmlwidget-12b650202b7a40aca074">{"x":{"options":{"crs":{"crsClass":"L.CRS.EPSG3857","code":null,"proj4def":null,"projectedBounds":null,"options":{}}},"calls":[{"method":"addTiles","args":["https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",null,null,{"minZoom":0,"maxZoom":18,"tileSize":256,"subdomains":"abc","errorTileUrl":"","tms":false,"noWrap":false,"zoomOffset":0,"zoomReverse":false,"opacity":1,"zIndex":1,"detectRetina":false,"attribution":"&copy; <a href=\"https://openstreetmap.org/copyright/\">OpenStreetMap<\/a>,  <a href=\"https://opendatacommons.org/licenses/odbl/\">ODbL<\/a>"}]},{"method":"addCircles","args":[[9.8,10.8,7.1],[118.7,124.8,125.6],10,null,null,{"interactive":true,"className":"","stroke":true,"color":"#03F","weight":5,"opacity":0.5,"fill":true,"fillColor":"#03F","fillOpacity":0.2},["Palawan","Leyte","Davao"],null,null,{"interactive":false,"permanent":false,"direction":"auto","opacity":1,"offset":[0,0],"textsize":"10px","textOnly":false,"className":"","sticky":true},null,null]}],"limits":{"lat":[7.1,10.8],"lng":[118.7,125.6]}},"evals":[],"jsHooks":[]}</script>
```


:::
:::