Search code examples
rcolorsecharts4r

Varying colors in echarts4r pictorials for R


I have a function that runs through a list of data frames, each one making into it's own infographic comparing male to female risk rates on various diseases. The display we are looking for is for example, if we have a risk rate of 3.5 females to every 1 male then it would display 1 male icon and 3 full female icons with a fourth female icon filled in half way.

Here is the code segment for the infographic that takes in a single data frame at a time with columns: gender, value, and path (genders for more than one of a gender are as such: fenale, female 2, female 3... to keep from the icons overlapping eachother)

  #save graphic as object to call
infograph <- new_df %>%
  #calling the genders into each graphic
  e_charts(gender) %>%
  
  e_x_axis(spliLine=list(show=FALSE),
           axisTick = list(show=FALSE),
           axisLine = list(show=FALSE),
           axisLabel = list(show=FALSE)) %>%
  
  e_y_axis(max = 100,
           splitLine=list(show=FALSE),
           axisTick=list(show=FALSE),
           axisLine=list(show=FALSE),
           axisLabel=list(show=FALSE)) %>%
  
  #colors of icon (fill and background)
  e_color(color=c('#69cce6', '#eee')) %>%
  
  #fill icon
  e_pictorial(value, symbol = path, z=10, name= 'realValue', 
              symbolBoundingData= 100, symbolClip= TRUE) %>% 
  #background icon
  e_pictorial(value, symbol = path, name= 'background', 
              symbolBoundingData= 100) %>%
  
  #currently show=FALSE, labels will hide
  e_labels(position='bottom', offset=c(0,10), show=FALSE,
           textStyle=list(fontSize=20, fontFamily = 'Arial',
                          fontWeight = 'bold',
                          color = '#69cce6'),
           formatter = "{@[1]}% {@[0]}") %>%
  #title of graph
  e_title(text = paste(unique(this$Disease), " Infographic", sep=""), left = "center") %>%
  #legend
  e_legend(show=FALSE) %>%
  #list exists online of themes to choose from
  e_theme("westeros")

The goal here is to make something like the male icons blue and the female icons pink for ease of readability. Right now it only takes in 2 colors, the background icon and the fill icon colors.

Note: the labels are hidden right now (show=FALSE) as I'm not worried atm, so ignore that.

I've tried using a fourth "colors" column to assign but the color argument doesn't read in the same way symbol just reads in the path of the current row and things like that. I've used more than 2 colors when assigning e_color but only the first 2 are used.

Edit: this function is made to iterate through a list of data frames but here is the one I test on. Sorry for the long 'path' column but that is necessary for the icon

            gender            value
1             Male              100
2         Female 1              100
3         Female 2              100
4         Female 3              100
5 Female portional 65.6652360515021
                                                                                                                                                                                                                                                                                                                                                                                          path
1                                                                                                                                   path://M20.822 18.096c-3.439-.794-6.64-1.49-5.09-4.418 4.72-8.912 1.251-13.678-3.732-13.678-5.082 0-8.464 4.949-3.732 13.678 1.597 2.945-1.725 3.641-5.09 4.418-3.073.71-3.188 2.236-3.178 4.904l.004 1h23.99l.004-.969c.012-2.688-.092-4.222-3.176-4.935z
2 path://M20.822 19.307c-2.967-.681-6.578-2.437-5.514-4.723.684 1.126 2.801 1.777 4.45.804-4.747-1.204 2.334-9.471-3.871-14.105-1.135-.853-2.526-1.283-3.912-1.283-1.378 0-2.751.425-3.862 1.283-6.206 4.634.876 12.901-3.872 14.105 1.649.974 3.77.293 4.451-.804 1.064 2.286-2.551 4.043-5.514 4.723-2.978.682-3.178 2.466-3.178 4.004l.005.689h23.99l.005-.691c0-1.537-.2-3.32-3.178-4.002z
3 path://M20.822 19.307c-2.967-.681-6.578-2.437-5.514-4.723.684 1.126 2.801 1.777 4.45.804-4.747-1.204 2.334-9.471-3.871-14.105-1.135-.853-2.526-1.283-3.912-1.283-1.378 0-2.751.425-3.862 1.283-6.206 4.634.876 12.901-3.872 14.105 1.649.974 3.77.293 4.451-.804 1.064 2.286-2.551 4.043-5.514 4.723-2.978.682-3.178 2.466-3.178 4.004l.005.689h23.99l.005-.691c0-1.537-.2-3.32-3.178-4.002z
4 path://M20.822 19.307c-2.967-.681-6.578-2.437-5.514-4.723.684 1.126 2.801 1.777 4.45.804-4.747-1.204 2.334-9.471-3.871-14.105-1.135-.853-2.526-1.283-3.912-1.283-1.378 0-2.751.425-3.862 1.283-6.206 4.634.876 12.901-3.872 14.105 1.649.974 3.77.293 4.451-.804 1.064 2.286-2.551 4.043-5.514 4.723-2.978.682-3.178 2.466-3.178 4.004l.005.689h23.99l.005-.691c0-1.537-.2-3.32-3.178-4.002z
5 path://M20.822 19.307c-2.967-.681-6.578-2.437-5.514-4.723.684 1.126 2.801 1.777 4.45.804-4.747-1.204 2.334-9.471-3.871-14.105-1.135-.853-2.526-1.283-3.912-1.283-1.378 0-2.751.425-3.862 1.283-6.206 4.634.876 12.901-3.872 14.105 1.649.974 3.77.293 4.451-.804 1.064 2.286-2.551 4.043-5.514 4.723-2.978.682-3.178 2.466-3.178 4.004l.005.689h23.99l.005-.691c0-1.537-.2-3.32-3.178-4.002z
    fills
1  69cce6
2 hotpink
3 hotpink
4 hotpink
5 hotpink

Unfortunately because of HIPAA laws I cannot post the source data frame but I am just taking the data from that one and turning it into this new_df used here in the code.


Solution

  • Okay, I put your data in a data frame to make your example reproducible.

    Take a look at the changes I made. Does the output of this script look like what you intented?

    library(echarts4r)
    library(dplyr)
    
    new_df <- data.frame(
    gender = c("Male", "Female 1", "Female 2", "Female 3", "Female proportional"),
    value = c(100, 100, 100, 100, 65.6652360515021),
    path = c("path://M20.822 18.096c-3.439-.794-6.64-1.49-5.09-4.418 4.72-8.912 1.251-13.678-3.732-13.678-5.082 0-8.464 4.949-3.732 13.678 1.597 2.945-1.725 3.641-5.09 4.418-3.073.71-3.188 2.236-3.178 4.904l.004 1h23.99l.004-.969c.012-2.688-.092-4.222-3.176-4.935z",
      "path://M20.822 19.307c-2.967-.681-6.578-2.437-5.514-4.723.684 1.126 2.801 1.777 4.45.804-4.747-1.204 2.334-9.471-3.871-14.105-1.135-.853-2.526-1.283-3.912-1.283-1.378 0-2.751.425-3.862 1.283-6.206 4.634.876 12.901-3.872 14.105 1.649.974 3.77.293 4.451-.804 1.064 2.286-2.551 4.043-5.514 4.723-2.978.682-3.178 2.466-3.178 4.004l.005.689h23.99l.005-.691c0-1.537-.2-3.32-3.178-4.002z",
      "path://M20.822 19.307c-2.967-.681-6.578-2.437-5.514-4.723.684 1.126 2.801 1.777 4.45.804-4.747-1.204 2.334-9.471-3.871-14.105-1.135-.853-2.526-1.283-3.912-1.283-1.378 0-2.751.425-3.862 1.283-6.206 4.634.876 12.901-3.872 14.105 1.649.974 3.77.293 4.451-.804 1.064 2.286-2.551 4.043-5.514 4.723-2.978.682-3.178 2.466-3.178 4.004l.005.689h23.99l.005-.691c0-1.537-.2-3.32-3.178-4.002z",
      "path://M20.822 19.307c-2.967-.681-6.578-2.437-5.514-4.723.684 1.126 2.801 1.777 4.45.804-4.747-1.204 2.334-9.471-3.871-14.105-1.135-.853-2.526-1.283-3.912-1.283-1.378 0-2.751.425-3.862 1.283-6.206 4.634.876 12.901-3.872 14.105 1.649.974 3.77.293 4.451-.804 1.064 2.286-2.551 4.043-5.514 4.723-2.978.682-3.178 2.466-3.178 4.004l.005.689h23.99l.005-.691c0-1.537-.2-3.32-3.178-4.002z",
      "path://M20.822 19.307c-2.967-.681-6.578-2.437-5.514-4.723.684 1.126 2.801 1.777 4.45.804-4.747-1.204 2.334-9.471-3.871-14.105-1.135-.853-2.526-1.283-3.912-1.283-1.378 0-2.751.425-3.862 1.283-6.206 4.634.876 12.901-3.872 14.105 1.649.974 3.77.293 4.451-.804 1.064 2.286-2.551 4.043-5.514 4.723-2.978.682-3.178 2.466-3.178 4.004l.005.689h23.99l.005-.691c0-1.537-.2-3.32-3.178-4.002z"),
    fills = c("69cce6", "hotpink", "hotpink", "hotpink", "hotpink"))
    
    infograph <- new_df %>%
      #calling the genders into each graphic
      e_charts(gender) %>%
      
      e_x_axis(spliLine=list(show=FALSE),
               axisTick = list(show=FALSE),
               axisLine = list(show=FALSE),
               axisLabel = list(show=FALSE)) %>%
      
      e_y_axis(max = 100,
               splitLine=list(show=FALSE),
               axisTick=list(show=FALSE),
               axisLine=list(show=FALSE),
               axisLabel=list(show=FALSE)) %>%
      
      #colors of icon (fill and background)
      #e_color(color=c('#69cce6', '#eee')) %>%
      
      #fill icon
      e_pictorial(value, symbol = path, z=10, name= 'realValue', 
                  symbolBoundingData= 100, symbolClip= TRUE) %>% 
      #background icon
      e_pictorial(value, symbol = path, name= 'background', 
                  symbolBoundingData= 100) %>%
      
      #currently show=FALSE, labels will hide
      e_labels(position='bottom', offset=c(0,10), show=FALSE,
               textStyle=list(fontSize=20, fontFamily = 'Arial',
                              fontWeight = 'bold',
                              color = '#69cce6'),
               formatter = "{@[1]}% {@[0]}") %>%
      #title of graph
      e_title(text = "title", left = "center") %>%
      #legend
      e_legend(show=FALSE) %>%
      #list exists online of themes to choose from
      e_theme("westeros") %>% 
      e_add_nested("itemStyle", color = fills)