Utilizing visual representations for "symbol" within eCharts4r

I have been exploring the use of the "image" option for the symbol parameter in a tree chart with eCharts4r. Despite trying multiple methods, I am struggling to assign a unique image to each node in the tree instead of using a universal one.

However, my attempts have resulted in a strange white overlay covering the rendering of the tree (I can provide images if needed).

Code Chunk 1: Required Libraries

Code Chunk 2: Sample Data

Code Chunk 3: Function Used to Transform Data into Nested Structure

Code Chunk 4: The function in echarts4r for rendering the symbol. Using "image://" as a prefix seems necessary according to documentation. However, most of the time, instead of an image, a light-blue rectangle is rendered.

library(tidyverse)
library(echarts4r)
library(flexdashboard)

tree_data <- data.frame(
      name = c("John Jay", "John Rutledge", "William Cushing", "James Wilson", "John Blair", "James Iredell", "Thomas Johnson", "William Paterson", "Samuel Chase", "Oliver Ellsworth", "Bushrod Washington", "Alfred Moore", "John Marshall", "William Johnson", "John McLean", "Levi Woodbery", "William Strong"),
      big = c(NA, "John Jay", "John Jay", "William Cushing", "William Cushing", "John Rutledge", "John Rutledge", "John Rutledge", "John Jay", "Samuel Chase", "James Iredell", "William Cushing", "John Blair", "Bushrod Washington", "Bushrod Washington", "John McLean", "William Johnson"),
      pledgeClass = c("Founder","A", "A", "B", "B", "B", "B", "B", "B", "C", "C", "C", "C", "D", "D", "E", "E"),
      alumniStatus = c(TRUE, TRUE, TRUE, TRUE, FALSE, TRUE, FALSE, TRUE, TRUE, TRUE, FALSE, TRUE, TRUE, TRUE, TRUE, TRUE, TRUE),
      symbolIcon = c("image://https://upload.wikimedia.org/wikipedia/commons/7/72/John_Jay_%28Gilbert_Stuart_portrait%29.jpg",
                     "image://https://images.squarespace-cdn.com/content/v1/57d1312f29687f39bf5fcd74/50bc8b0c-67f6-4e2d-83f5-e56f255e2a7e/blank_profile_icon.png?format=1500w",
                     "image://https://images.squarespace-cdn.com/content/v1/57d1312f29687f39bf5fcd74/50bc8b0c-67f6-4e2d-83f5-e56f255e2a7e/blank_profile_icon.png?format=1500w",
                     "image://https://images.squarespace-cdn.com/content/v1/57d1312f29687f39bf5fcd74/50bc8b0c-67f6-4e2d-83f5-e56f255e2a7e/blank_profile_icon.png?format=1500w",
                     "image://https://images.squarespace-cdn.com/content/v1/57d1312f29687f39bf5fcd74/50bc8b0c-67f6-4e2d-83f5-e56f255e2a7e/blank_profile_icon.png?format=1500w",
                     "image://https://images.squarespace-cdn.com/content/v1/57d1312f29687f39bf5fcd74/50bc8b0c-67f6-4e2d-83f5-e56f255e2a7e/blank_profile_icon.png?format=1500w",
                     "image://https://images.squarespace-cdn.com/content/v1/57d1312f29687f39bf5fcd74/50bc8b0c-67f6-4e2d-83f5-e56f255e2a7e/blank_profile_icon.png?format=1500w",
                     "image://https://images.squarespace-cdn.com/content/v1/57d1312f29687f39bf5fcd74/50bc8b0c-67f6-4e2d-83f5-e56f255e2a7e/blank_profile_icon.png?format=1500w",
                     "image://https://images.squarespace-cdn.com/content/v1/57d1312f29687f39bf5fcd74/50bc8b0c-67f6-4e2d-83f5-e56f255e2a7e/blank_profile_icon.png?format=1500w",
                     "image://https://images.squarespace-cdn.com/content/v1/57d1312f29687f39bf5fcd74/50bc8b0c-67f6-4e2d-83f5-e56f255e2a7e/blank_profile_icon.png?format=1500w",
                     "image://https://images.squarespace-cdn.com/content/v1/57d1312f29687f39bf5fcd74/50bc8b0c-67f6-4e2d-83f5-e56f255e2a7e/blank_profile_icon.png?format=1500w",
                     "image://https://images.squarespace-cdn.com/content/v1/57d1312f29687f39bf5fcd74/50bc8b0c-67f6-4e2d-83f5-e56f255e2a7e/blank_profile_icon.png?format=1500w",
                     "image://https://images.squarespace-cdn.com/content/v1/57d1312f29687f39bf5fcd74/50bc8b0c-67f6-4e2d-83f5-e56f255e2a7e/blank_profile_icon.png?format=1500w",
                     "image://https://images.squarespace-cdn.com/content/v1/57d1312f29687f39bf5fcd74/50bc8b0c-67f6-4e2d-83f5-e56f255e2a7e/blank_profile_icon.png?format=1500w",
                     "image://https://images.squarespace-cdn.com/content/v1/57d1312f29687f39bf5fcd74/50bc8b0c-67f6-4e2d-83f5-e56f255e2a7e/blank_profile_icon.png?format=1500w",
                     "image://https://images.squarespace-cdn.com/content/v1/57d1312f29687f39bf5fcd74/50bc8b0c-67f6-4e2d-83f5-e56f255e2a7e/blank_profile_icon.png?format=1500w",
                     "image://https://images.squarespace-cdn.com/content/v1/57d1312f29687f39bf5fcd74/50bc8b0c-67f6-4e2d-83f5-e56f255e2a7e/blank_profile_icon.png?format=1500w")

create_nested_structure <- function(data, big_boy) {
  data %>% 
    filter(big %in% big_boy) -> d
  if (nrow(d) == 0) {
    return(NA)
  } else {
    return(mutate(d, children = map(name, ~create_nested_structure(data, .x))))
  }
}

tree_data_final <- create_nested_structure(tree_data, NA)

tree_data_final %>%
  e_charts() %>% 
  e_tree(initialTreeDepth = -1, #Expands all nodes by default
         layout = "orthogonal",
         orient = "TB",
         symbolSize = 9, #Default is 7
         symbol = tree_data_final$symbolIcon,
         roam = TRUE) %>% #Enables user interaction like moving and zooming
  e_add_nested("tooltip",big) %>%
  e_tooltip(trigger = "item",
            formatter = htmlwidgets::JS("
      function(params){
        return('<strong>' + params.name + '</strong>' + '<br />' + 'Pledge Class: ' + params.data.pledgeClass + '<br />' + 'Alumni: ' + params.data.alumniStatus)
      }
    ")
javascriptrecharts4r

Answer №1

The echarts documentation suggests that you can customize symbols using a callback function:

function(value, params) {
  return(params.data.symbolIcon)
}

Please note that I have increased the symbol size for better visibility and made some tweaks to your sample data by utilizing a unique profile icon for the final leaf node.

library(echarts4r)

tree_data_final |> 
  e_charts() |> 
  e_tree(
    initialTreeDepth = -1, # Expands all nodes by default
    layout = "orthogonal",
    orient = "TB",
    symbolSize = 40,
    symbol = htmlwidgets::JS(
      "function(value, params) {
        return(params.data.symbolIcon)
      }"
    ),
    roam = TRUE
  ) |> 
  e_add_nested("tooltip", big) %>%
  e_tooltip(
    trigger = "item",
    formatter = htmlwidgets::JS("
      function(params){
        return('<strong>' + params.name + '</strong>' + '<br />Pledge Class: ' + params.data.pledgeClass + '<br />Alumni: ' + params.data.alumniStatus)
      }
    ")
  )

https://i.sstatic.net/54DZ0.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a type definition for the createSelector function based on the useQuery result

Struggling to find the correct typings for the createSelector res parameter from redux-js, especially in TypeScript where there are no examples or explanations available. The only guidance is provided in JS. const selectFacts = React.useMemo(() => { ...

javascripttypescriptreduxreact-reduxrtk-query

In Lightning Web Components, there seems to be an issue with the splice method not functioning correctly when used with an @api

When checking the console, I noticed that this.unselectedPlayerList.length is not displayed until after using the splice method. This has raised some doubts in my mind about how the splice method works. export default class MakeYourTeamChild extends Ligh ...

javascriptsalesforcelwcsalesforce-developer

Changing the variable within a promise in Angular 1

There seems to be an issue with updating a variable within the callback function of a promise, as shown in the code snippet below: $scope.showSelected= function (node){ var promise = $http.get("http://127.0.0.1:5000/getResource?ldpr="+nod ...

javascriptangularjsangular1.6

Inject data into an Angular 2 template

Does anybody know of a method to pass variables to templates in Angular2? Suppose I have the following code snippet: <div *ngFor="foo in foos"> <ng-container *ngTemplateOutlet="inner"</ng-container> </div> --------------- <n ...

javascriptangular

Generating a map collection from a dataset in R

I have a dataset structured like this: https://i.sstatic.net/ccUxk.png My goal is to convert this dataset into a list of maps. Here's the current code I'm using: list_tot <- list() list_tot[[1]] <- list() list_tot[[1]][['arId']] ...

rjsonlistdata-manipulation

Issue with bouncing dropdown menu

I am in the process of enhancing a Wordpress website by implementing a jQuery menu with sub-menus. Below is the jQuery code snippet: $(document).ready(function(){ $('.menu > li').hover(function(){ var position = $(this).position(); ...

javascriptjqueryhtmlcsswordpress

Content will not render when JavaScript generates SVGs

As I delve into the world of JavaScript and SVG to create interactive graphics for a website, I've run into a puzzling issue with programmatically generated SVG paths not being drawn. Below is a sample code that highlights this problem: <!DOCTYPE ...

javascripthtmlsvg

problems with hovering over radio buttons in Internet Explorer 9

Encountering a curious issue in IE9: When hovering over my top level wrapper div, the first radio button seems to be triggered as though it's being hovered over. This means that even if the last radio input is selected, clicking anywhere within the wr ...

javascripthtmlcss

Is it possible to assign a deconstructed array to a variable and then further deconstruct it?

Is there a way to deconstruct an array, assign it to a variable, and then pass the value to another deconstructed variable all in one line of code? Take a look at what I want to achieve below: const { prop } = [a] = chips.filter(x => x.id == 1); Typic ...

javascript

Dilemma arises from conflicting javascript codes

Currently, I am developing a web application where the main page features a timeline that needs to update its content automatically. To achieve this, I am utilizing the setTimeOut function of JQuery to refresh the timeline every x seconds. In addition, th ...

javascriptjqueryhtmlcssajax

Looping the jQuery Ajax success function

Utilizing Ajax to input an array of data into a database. At the moment, when clicking on "#bookingbutton," it triggers a return block of HTML containing the ".select-room-button" button. I have incorporated the code for ".select-room-button" within the ...

javascriptjqueryajax

Retrieving AIC from a FitARMA model in R

After applying the FitARMA function from package FitARMA to a specific time series, I obtained the following result: > model <- FitARMA(ts, c(1,0,1)) > model ARIMA(1,0,1) length of series = 1593 , number of parameters = 3 loglikelihood = 5113 , ...

r

Is there a way to create optional sections within a reusable component's template in a Vue 3 application?

Recently, I've been immersed in developing a Single Page Application (SPA) using the powerful combination of Vue 3, TypeScript, and integrating The Movie Database (TMDB) API. One interesting challenge I encountered was with my versatile movie card co ...

javascriptvue.jsvuejs3

Display search results in Rails without needing to refresh the entire tab

I have a search functionality incorporated within a Bootstrap tab, and I aim to display the search results dynamically without reloading the entire page, specifically within the tab itself. Despite adding 'remote: true' to the form_tag and incor ...

javascriptjqueryruby-on-railsruby

Updating a form submit does not retain the value of the JQueryUI Progress Bar

I am currently working on setting up a JQuery Progress Bar that updates when the user submits a form. The code I am debugging is basic and consists of: <body> <form id="form1" method="GET" runat="server"> <div> <h1>Test</h1& ...

javascriptformsjquery-uisubmitjquery-ui-progressbar

Finding the row index in an Angular material table

How can I retrieve the row index in an Angular material table? <td mat-cell *matCellDef="let row"> <mat-checkbox (click)="$event.stopPropagation()&quo ...

javascriptangulartypescriptcheckboxmaterial-table

Having trouble retrieving coordinates from AJAX request to Google Maps API?

I am currently developing a weather application and one of the initial steps is to retrieve the longitude and latitude coordinates for a specific city based on its name. To achieve this, I am utilizing Google Maps API to gather the necessary information. ...

javascriptajaxangularjsgoogle-maps

Access data from a procedure in SAP HANA through a R view

In SAP HANA, I have a schema called "HYZ_ProcurementToSales" and a view called "V_HYZ_P25_Market_Market_Orders" that is created from a stored procedure. I am attempting to extract this view in R server version 1.0.153 using the following code: library(RJD ...

rjdbchanar-dbirjdbc

Mastering the correct application of both Express's res.render() and res.redirect()

After implementing a res.redirect('page.ejs');, my browser is displaying the following message: Cannot GET /page.ejs In my routes file, I have not included the following code structure: app.get('/page', function(req, res) { ...

javascriptnode.jsexpressrender

The method of utilizing React with Redux to display component properties

I am currently trying to include my common component in my main.js file Successfully implemented this However, when attempting to print my Redux data values in the common component, I created a method called handleClickForRedux to handle this task. Even af ...

javascripthtmlcssreactjsredux