index.Rmd

---
title: "OxShef: Charts"
output:
  html_document:
    toc_float: false
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(
	echo = FALSE,
	message = FALSE,
	warning = FALSE
)
```

<!-- ```{js} -->
<!-- $("#rStudioHeader").removeClass("alwaysShrunk"); -->
<!-- $("#pageContent").removeClass("standardPadding"); -->
<!-- ``` -->


<h2>**OxShef: Charts** provides advice on how to select the most appropriate charts for your data and how to avoid common mistakes when visualising data.</h2>

charts.oxshef.io is exclusively dedicated to providing you advice on which chart to use based on your data. Visit [tools.oxshef.io](http://oxshef.io) for advice on which software/programming languages can be used for creating specific dataviz. In general, we redirect you to what experts have already written about dataviz selection and design but intend to structure this information for folks who don't have a background in dataviz.

To help you get started we've split charts into five basic types; charts, maps, networks (graph), time series and *other*.

<div class="row align-items-center">

<div class="col-sm-6 align-self-center">

<h4>[Charts](charts.html) are the most general purpose type of visualisation and include barcharts, linecharts, scatter plots, histograms...</h4>

<center>
```{r}
library("highcharter")
library("tidyverse")
my_data <- tribble(
  ~category, ~subcategory, ~value,
  "Mammal", "human", 3,
  "Mammal", "non-human", 4,
  "Reptile", "snake", 6,
  "Reptile", "iguana", 8
)
my_data %>%
  hchart(
    type = "bar",
    hcaes(
      x = category,
      y = value
    )
  ) %>%
  hc_size(width = "300px", height = "200px")
```
</center>

</div>

<div class="col-sm-6 align-self-center">

<h4>[Maps and geographic visualisations](geoviz_maps.html) require specially formatted data and include scatter geo plots, choropleth, weather maps...</h4>
<center>
```{r, echo=FALSE, message=FALSE, warning=FALSE, paged.print=FALSE}
library("tidyverse")
library("leaflet")
library("sf")
library("gapminder")

geojson_worldmap <- st_read("https://raw.githubusercontent.com/johan/world.geo.json/master/countries.geo.json",
                            quiet = TRUE)
geojson_worldmap <- invisible(geojson_worldmap %>%
  left_join(gapminder %>%
               filter(year == max(year)) , by = c("name" = "country")) %>%
  filter(name != "Antarctica"))
palette_pop <- colorNumeric("YlOrBr" , geojson_worldmap$pop, na.color = "#c0c1c4")
geojson_worldmap %>%
  leaflet(width = "300px",
          height = "200px") %>%
  addPolygons(fillColor = ~palette_pop(pop),
              fillOpacity = 0.8,
              color = "#000",
              weight = 1,
              label = ~name)
```
</center>
</div>

</div>

<div class="row align-items-center">

<div class="col-sm-6 align-self-center">

<h4>[Network visualisations](networks.html) (or graph) are used where your data describes the connectiveness of something, for instance; a social network, a computer network or shared characteristics between individuals.</h4>

<center>
```{r message=FALSE, warning=FALSE, paged.print=FALSE}
library("tidyverse")
library("visNetwork")
library("igraph")

my_nodes <- tribble(
  ~id, ~label, ~color, ~size,
  1, "Character A", "purple", 10,
  2, "Character B", "purple", 13,
  3, "Character C", "orange", 17,
  4, "Character D", "orange", 12,
  5, "Character E", "purple", 17,
  6, "Character Z", "green", 10
)

my_edges <- tribble(
  ~from, ~to, ~width,
  1, 2, 5,
  # 2, 1, 5,
  3, 1, 1,
  # 1, 3, 1,
  4, 1, 6,
  # 1, 4, 6,
  4, 2, 3,
  # 2, 4, 3,
  5, 2, 2,
  # 2, 5, 2,
  5, 3, 5,
  # 3, 5, 5,
  5, 6, 5
  # 6, 5, 5
)
visNetwork(my_nodes,
           my_edges,
           width = "200px",
           height = "200px") %>%
  visOptions(highlightNearest = list(enabled = TRUE, degree = 1)) %>%
  visInteraction(zoomView = FALSE)
```
</center>
</div>

<div class="col-sm-6 align-self-center">

<h4>[Time series](timeseries.html) are specialised charts for displaying data that varies over time, for instance; stock price fluctuations, population changes, or resource allocation charts like Gantt diagrams.</h4>

<center>

```{r, echo=FALSE, message=FALSE, warning=FALSE, paged.print=FALSE}
library("quantmod")

usdjpy <- getSymbols("USD/JPY", src = "oanda", auto.assign = FALSE)
eurjpy <- getSymbols("EUR/JPY", src = "oanda", auto.assign = FALSE)

highchart(type = "stock") %>%
  hc_add_series(usdjpy, id = "usdjpy") %>%
  hc_add_series(eurjpy, id = "eurjpy") %>%
  hc_size(width = "350px", height = "200px") %>%
  hc_rangeSelector(enabled = FALSE)
```

</center>
</div>

</div>

<hr>