The line above will create a subsection within the first column. Now we just need to decide what to put in it. In keeping with our recent weeks on GIS, let’s put a map!
## Column 2 {data-width=450}
### Epidemic curve by age
This line above creates the first subsection within the second column. Let's put a chart here:
<div class="knitr-options" data-fig-width="576" data-fig-height="460"></div>
```{=html}
<div class="plotly html-widget html-fill-item-overflow-hidden html-fill-item" id="htmlwidget-8838bfa8f6132280c155" style="width:576px;height:460.8px;"></div>
<script type="application/json" data-for="htmlwidget-8838bfa8f6132280c155">{"x":{"data":[{"orientation":"v","width":[15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15],"base":[1,5,19,29,44,47,76,108,157,254,355,499,468,400,359,278,245,189,169,161,127,127,123,99,87,73,12],"x":[16170,16185,16200,16215,16230,16245,16260,16275,16290,16305,16320,16335,16350,16365,16380,16395,16410,16425,16440,16455,16470,16485,16500,16515,16530,16545,16560],"y":[1,2,8,6,5,7,9,25,37,57,83,105,95,101,98,59,49,56,38,45,41,28,36,19,14,16,0],"text":"Age Category: 0-4","type":"bar","marker":{"autocolorscale":false,"color":"rgba(253,231,37,0.75)","line":{"width":null,"color":"rgba(253,231,37,1)"}},"name":"0-4","legendgroup":"0-4","showlegend":true,"xaxis":"x","yaxis":"y","hoverinfo":"text","frame":null},{"orientation":"v","width":[15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15],"base":[0,3,17,25,30,39,61,84,118,197,266,379,372,311,271,220,191,138,128,124,97,100,89,72,70,51,8],"x":[16170,16185,16200,16215,16230,16245,16260,16275,16290,16305,16320,16335,16350,16365,16380,16395,16410,16425,16440,16455,16470,16485,16500,16515,16530,16545,16560],"y":[1,2,2,4,14,8,15,24,39,57,89,120,96,89,88,58,54,51,41,37,30,27,34,27,17,22,4],"text":"Age Category: 5-9","type":"bar","marker":{"autocolorscale":false,"color":"rgba(181,222,43,0.75)","line":{"width":null,"color":"rgba(181,222,43,1)"}},"name":"5-9","legendgroup":"5-9","showlegend":true,"xaxis":"x","yaxis":"y","hoverinfo":"text","frame":null},{"orientation":"v","width":[15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15],"base":[0,2,12,20,21,28,44,48,92,153,195,288,256,212,208,153,150,109,98,88,75,80,67,59,51,36,7],"x":[16170,16185,16200,16215,16230,16245,16260,16275,16290,16305,16320,16335,16350,16365,16380,16395,16410,16425,16440,16455,16470,16485,16500,16515,16530,16545,16560],"y":[0,1,5,5,9,11,17,36,26,44,71,91,116,99,63,67,41,29,30,36,22,20,22,13,19,15,1],"text":"Age Category: 10-14","type":"bar","marker":{"autocolorscale":false,"color":"rgba(110,206,88,0.75)","line":{"width":null,"color":"rgba(110,206,88,1)"}},"name":"10-14","legendgroup":"10-14","showlegend":true,"xaxis":"x","yaxis":"y","hoverinfo":"text","frame":null},{"orientation":"v","width":[15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15],"base":[0,2,8,14,14,21,33,35,66,111,135,213,193,146,144,119,110,77,75,61,50,55,44,45,35,23,4],"x":[16170,16185,16200,16215,16230,16245,16260,16275,16290,16305,16320,16335,16350,16365,16380,16395,16410,16425,16440,16455,16470,16485,16500,16515,16530,16545,16560],"y":[0,0,4,6,7,7,11,13,26,42,60,75,63,66,64,34,40,32,23,27,25,25,23,14,16,13,3],"text":"Age Category: 15-19","type":"bar","marker":{"autocolorscale":false,"color":"rgba(53,183,121,0.75)","line":{"width":null,"color":"rgba(53,183,121,1)"}},"name":"15-19","legendgroup":"15-19","showlegend":true,"xaxis":"x","yaxis":"y","hoverinfo":"text","frame":null},{"orientation":"v","width":[15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15],"base":[0,0,6,5,4,9,17,10,28,59,63,85,95,68,70,41,46,35,27,30,20,27,13,18,18,11,2],"x":[16170,16185,16200,16215,16230,16245,16260,16275,16290,16305,16320,16335,16350,16365,16380,16395,16410,16425,16440,16455,16470,16485,16500,16515,16530,16545,16560],"y":[0,2,2,9,10,12,16,25,38,52,72,128,98,78,74,78,64,42,48,31,30,28,31,27,17,12,2],"text":"Age Category: 20-29","type":"bar","marker":{"autocolorscale":false,"color":"rgba(31,158,137,0.75)","line":{"width":null,"color":"rgba(31,158,137,1)"}},"name":"20-29","legendgroup":"20-29","showlegend":true,"xaxis":"x","yaxis":"y","hoverinfo":"text","frame":null},{"orientation":"v","width":[15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15],"base":[0,0,1,0,1,2,5,3,7,7,8,13,9,6,8,6,5,2,1,4,4,0,1,1,1,0,0],"x":[16170,16185,16200,16215,16230,16245,16260,16275,16290,16305,16320,16335,16350,16365,16380,16395,16410,16425,16440,16455,16470,16485,16500,16515,16530,16545,16560],"y":[0,0,5,5,3,7,12,7,21,52,55,72,86,62,62,35,41,33,26,26,16,27,12,17,17,11,2],"text":"Age Category: 30-49","type":"bar","marker":{"autocolorscale":false,"color":"rgba(38,130,142,0.75)","line":{"width":null,"color":"rgba(38,130,142,1)"}},"name":"30-49","legendgroup":"30-49","showlegend":true,"xaxis":"x","yaxis":"y","hoverinfo":"text","frame":null},{"orientation":"v","width":[15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15],"base":[0,0,0,0,0,0,0,0,0,1,1,0,1,0,0,0,0,0,0,2,0,0,0,0,0,0,0],"x":[16170,16185,16200,16215,16230,16245,16260,16275,16290,16305,16320,16335,16350,16365,16380,16395,16410,16425,16440,16455,16470,16485,16500,16515,16530,16545,16560],"y":[0,0,1,0,1,2,5,3,7,6,7,13,8,6,8,6,5,2,1,2,4,0,1,1,1,0,0],"text":"Age Category: 50-69","type":"bar","marker":{"autocolorscale":false,"color":"rgba(49,104,142,0.75)","line":{"width":null,"color":"rgba(49,104,142,1)"}},"name":"50-69","legendgroup":"50-69","showlegend":true,"xaxis":"x","yaxis":"y","hoverinfo":"text","frame":null},{"orientation":"v","width":[15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15],"base":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"x":[16170,16185,16200,16215,16230,16245,16260,16275,16290,16305,16320,16335,16350,16365,16380,16395,16410,16425,16440,16455,16470,16485,16500,16515,16530,16545,16560],"y":[0,0,0,0,0,0,0,0,0,1,1,0,1,0,0,0,0,0,0,2,0,0,0,0,0,0,0],"text":"Age Category: 70+","type":"bar","marker":{"autocolorscale":false,"color":"rgba(62,73,137,0.75)","line":{"width":null,"color":"rgba(62,73,137,1)"}},"name":"70+","legendgroup":"70+","showlegend":true,"xaxis":"x","yaxis":"y","hoverinfo":"text","frame":null}],"layout":{"margin":{"t":25.148302561048247,"r":7.3059360730593621,"b":39.102640460591637,"l":43.105022831050235},"plot_bgcolor":"transparent","paper_bgcolor":"rgba(255,255,255,1)","font":{"color":"rgba(0,0,0,1)","family":"","size":14.611872146118724},"xaxis":{"domain":[0,1],"automargin":true,"type":"linear","autorange":false,"range":[16142.25,16587.75],"tickmode":"array","ticktext":["Apr 2014","Jul 2014","Oct 2014","Jan 2015","Apr 2015"],"tickvals":[16161,16252,16344,16436,16526],"categoryorder":"array","categoryarray":["Apr 2014","Jul 2014","Oct 2014","Jan 2015","Apr 2015"],"nticks":null,"ticks":"outside","tickcolor":"rgba(51,51,51,1)","ticklen":3.6529680365296811,"tickwidth":0,"showticklabels":true,"tickfont":{"color":"rgba(77,77,77,1)","family":"","size":11.689497716894984},"tickangle":-0,"showline":false,"linecolor":null,"linewidth":0,"showgrid":true,"gridcolor":"rgba(229,229,229,1)","gridwidth":0,"zeroline":false,"anchor":"y","title":{"text":"<br />Date of onset","font":{"color":"rgba(0,0,0,1)","family":"","size":14.611872146118724}},"hoverformat":".2f"},"yaxis":{"domain":[0,1],"automargin":true,"type":"linear","autorange":false,"range":[-30.200000000000003,634.20000000000005],"tickmode":"array","ticktext":["0","200","400","600"],"tickvals":[3.5527136788005009e-15,200,400,600],"categoryorder":"array","categoryarray":["0","200","400","600"],"nticks":null,"ticks":"outside","tickcolor":"rgba(51,51,51,1)","ticklen":3.6529680365296811,"tickwidth":0,"showticklabels":true,"tickfont":{"color":"rgba(77,77,77,1)","family":"","size":11.68949771689498},"tickangle":-0,"showline":false,"linecolor":null,"linewidth":0,"showgrid":true,"gridcolor":"rgba(229,229,229,1)","gridwidth":0,"zeroline":false,"anchor":"x","title":{"text":"Count<br />","font":{"color":"rgba(0,0,0,1)","family":"","size":14.611872146118724}},"hoverformat":".2f"},"shapes":[{"type":"rect","fillcolor":null,"line":{"color":null,"width":0,"linetype":[]},"yref":"paper","xref":"paper","x0":0,"x1":1,"y0":0,"y1":1}],"showlegend":true,"legend":{"bgcolor":"rgba(255,255,255,1)","bordercolor":"transparent","borderwidth":0,"font":{"color":"rgba(0,0,0,1)","family":"","size":11.689497716894984},"y":0.90961999315302977},"annotations":[{"text":"Age Category<br />","x":1.02,"y":1,"showarrow":false,"ax":0,"ay":0,"font":{"color":"rgba(0,0,0,1)","family":"","size":14.611872146118724},"xref":"paper","yref":"paper","textangle":-0,"xanchor":"left","yanchor":"bottom","legendTitle":true}],"hovermode":"closest","barmode":"relative"},"config":{"doubleClick":"reset","showSendToCloud":false},"source":"A","attrs":{"1211f3e93ae":{"x":{},"fill":{},"colour":{},"text":{},"type":"bar"}},"cur_data":"1211f3e93ae","visdat":{"1211f3e93ae":["function (y) ","x"]},"highlight":{"on":"plotly_click","persistent":false,"dynamic":false,"selectize":false,"opacityDim":0.20000000000000001,"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>
Here is another subsection for the second column! We can add whatever content we desire for our dashboard: in this case, a table summarizing the number of cases by hospital.
| Hospital | Cases |
|---|---|
| Port Hospital | 1762 |
| Missing | 1469 |
| Military Hospital | 896 |
| Other | 885 |
| Central Hospital | 454 |
| St. Mark’s Maternity Hospital (SMMH) | 422 |
The line above adds a second page under a new tab! Let’s visualize the dataset as an interactive table for viewers to explore:
And that’s the end of this module – in essence, it’s just a new way to organize and use an RMD to output a different product. And there are many more customizations and additional arguments that can further enhance your dashboard product, so be sure to take a look at the assigned chapter to learn about the possibilities! The final step is to click “Knit to flex_dashboard”. This will give you an HTML document that you can share with others.