https://github.com/appsilon/ui-styleguide
Styleguide for Apps, reports and charts
https://github.com/appsilon/ui-styleguide
Last synced: 5 months ago
JSON representation
Styleguide for Apps, reports and charts
- Host: GitHub
- URL: https://github.com/appsilon/ui-styleguide
- Owner: Appsilon
- Created: 2018-03-06T14:12:18.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2023-12-15T05:23:40.000Z (about 2 years ago)
- Last Synced: 2025-06-05T13:48:13.658Z (7 months ago)
- Homepage:
- Size: 12.4 MB
- Stars: 0
- Watchers: 4
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.Rmd
Awesome Lists containing this project
README
---
output: rmarkdown::github_document
---
```{r, echo = FALSE, message=FALSE}
library(ggplot2)
library(hrbrthemes)
library(dplyr)
```
# UI Style Guide
The goal of this document is to create beautiful and coherent style guide for Shiny apps, R markdown report and charts made by Appsilon.
Minimum plan is to have:
* color palettss
* functions styling ggplots and plotly
Nice to have:
* ggplot theme
## What we need?
Color palletss - 2 color paletss: 1 continuous data, 2 categorical data
Charts theme - ggplot and plotly
### Theme
Since we use Maven Pro as your font, the Maven Pro theme was added to hrbrthemes(). You can download the package with the theme from [Appsilon hrbrthemes fork](https://github.com/Appsilon/hrbrthemes):
`devtools::install_github("Appsilon\hrbrthemes")`
and access theme `theme_ipsum_mp()`
### Maven Pro
```{r fig.retina=2}
ggplot(mtcars, aes(mpg, wt)) +
geom_point() +
labs(x = "Fuel effiiency (mpg)", y = "Weight (tons)",
title = "Seminal ggplot2 scatterplot example",
subtitle = "A plot that is only useful for demonstration purposes",
caption = "Brought to you by the letter 'g'") +
theme_ipsum_mp()
```
### Continous Palettes
#### Appsilon viridis
```{r echo = FALSE, fig.height=0.5}
par(mar=c(0,0,0,0))
appsilon_viridis <- colorRampPalette(c("#15354a", "#0099F9", "#fcd73d"))
plot(rep(1, 50), col = (appsilon_viridis(50)), pch = 15, cex = 10, axes = 0, ann=FALSE, ylim = c(0,1), main = "a")
```
#### Appsilon cividis
```{r echo = FALSE, fig.height=0.5}
par(mar=c(0,0,0,0))
appsilon_cividis <- colorRampPalette(c('#15354A','#163A52','#173E5A','#184362','#19476A','#194C72','#1A517A','#1A5683','#1A5B8C','#1A6094','#1A659D','#1A6AA6','#196FAF','#1874B8','#1779C1','#157ECA','#1384D3','#1089DD','#0C8EE6','#0694EF','#0099F9','#419CF1','#5C9EE9','#6FA1E0','#7EA4D8','#8BA7D0','#97A9C7','#A2ACBF','#ABAFB7','#B4B3AE','#BCB6A5','#C4B99D','#CBBC94','#D2BF8B','#D9C382','#DFC678','#E5C96E','#EBCD63','#F1D058','#F7D44B','#FCD73D'))
plot(rep(1,50), col = (appsilon_cividis(50)), pch = 15, cex = 10, axes = 0, ann=FALSE, ylim = c(0,1))
```
#### Appsilon plasma
```{r echo = FALSE, fig.height=0.5}
par(mar=c(0,0,0,0))
appsilon_plasma <- colorRampPalette(c('#1424C6','#2E26C3','#3E27C0','#4A29BD','#542BBA','#5D2DB7','#6530B4','#6D32B1','#7334AE','#7A37AB','#8039A8','#863CA5','#8B3EA2','#91419F','#96449C','#9B4699','#9F4996','#A44C93','#A84E90','#AD518D','#B15489','#B55786','#B95A83','#BD5D80','#C1607D','#C56379','#C96676','#CD6873','#D16B6F','#D46E6C','#D87168','#DB7465','#DF7761','#E27A5D','#E67E59','#E98155','#ED8451','#F0874D','#F38A48','#F78D43','#FA903E'))
plot(rep(1,50), col = (appsilon_plasma(50)), pch = 15, cex = 10, axes = 0, ann=FALSE, ylim = c(0.99,1))
```
#### Plot examples
Goal: check how viridis examples are represented using propose continuous scale.
```{r fig.retina=2, echo = FALSE}
## Scatter plot example
dat <- data.frame(x = rnorm(1000), y = rnorm(1000), z = sample(-20:20, 1000, TRUE))
ggplot(dat, aes(x, y, colour = z)) + geom_point() + theme_ipsum_mp() -> scatter_default
scatter_default +
scale_colour_gradientn(colours = appsilon_viridis(100))
scatter_default +
scale_colour_gradientn(colours = appsilon_cividis(100))
scatter_default +
scale_colour_gradientn(colours = appsilon_plasma(100))
## Hex example
ggplot(data.frame(x = rnorm(10000), y = rnorm(10000)), aes(x = x, y = y)) +
geom_hex() + coord_fixed() +
theme_ipsum_mp() -> default_hex
default_hex +
scale_fill_gradientn(colours = appsilon_viridis(100))
default_hex +
scale_fill_gradientn(colours = appsilon_cividis(100))
default_hex +
scale_fill_gradientn(colours = appsilon_plasma(100))
```
```{r fig.retina=2, echo = FALSE}
unemp <- read.csv("http://datasets.flowingdata.com/unemployment09.csv",
header = FALSE, stringsAsFactors = FALSE)
names(unemp) <- c("id", "state_fips", "county_fips", "name", "year",
"?", "?", "?", "rate")
unemp$county <- tolower(gsub(" County, [A-Z]{2}", "", unemp$name))
unemp$county <- gsub("^(.*) parish, ..$","\\1", unemp$county)
unemp$state <- gsub("^.*([A-Z]{2}).*$", "\\1", unemp$name)
county_df <- map_data("county", projection = "albers", parameters = c(39, 45))
names(county_df) <- c("long", "lat", "group", "order", "state_name", "county")
county_df$state <- state.abb[match(county_df$state_name, tolower(state.name))]
county_df$state_name <- NULL
state_df <- map_data("state", projection = "albers", parameters = c(39, 45))
choropleth <- merge(county_df, unemp, by = c("state", "county"))
choropleth <- choropleth[order(choropleth$order), ]
ggplot(choropleth, aes(long, lat, group = group)) +
geom_polygon(aes(fill = rate), colour = alpha("white", 1 / 2), size = 0.2) +
geom_polygon(data = state_df, colour = "white", fill = NA) +
coord_fixed() +
theme_minimal() +
ggtitle("US unemployment rate by county") +
theme_ipsum_mp() +
theme(axis.line = element_blank(), axis.text = element_blank(),
axis.ticks = element_blank(), axis.title = element_blank()) -> map_default
map_default +
scale_fill_gradientn(colours = appsilon_viridis(100))
map_default +
scale_fill_gradientn(colours = appsilon_cividis(100))
map_default +
scale_fill_gradientn(colours = appsilon_plasma(100))
```
### Categorical
```{r, fig.retina=2, echo = FALSE}
ggplot(mpg, aes(class)) +
geom_bar(aes(fill = factor(trans))) +
theme_ipsum_mp() +
scale_fill_manual(values = c(appsilon_cividis(5), appsilon_plasma(5)), limits = unique(mpg$trans))
df2 <- data.frame(week = c(1:10, 1:10),
value = c(c(4,5,6,3,5,7,9,6,3,4), c(10, 18, 12, 7, 12, 9, 9, 7, 14, 16)),
label = rep(c("label1", "label2"), each = 10))
colors_cividis <- appsilon_viridis(2)
ggplot(data = df2, aes(x = week, y = value, group = label, colour = label)) +
geom_line(linetype = "dashed", size = 1.2)+
geom_point(size = 3) +
theme_ipsum_mp() -> base_line
base_line +
scale_colour_manual(values = colors_cividis)
base_line +
scale_colour_manual(values = appsilon_plasma(2))
```
## What we considered?
* Coherent with Appsilon branding
* Print friendly
* Robust to colorblindness
* Pretty
## What we chose?