Overview (First Page)

Column 1

Distribution of outcomes per hospital location

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>

Cases by Hospital

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

Data Explorer (Second Page)

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.