Graph

John Coene

2024-02-16

There are two core functions that let you build graphs in echarts4r; e_graph and e_graph_gl. The latter is the webGL “version.”

Basic

Initialise your graph with e_charts then add nodes and edges with e_graph_nodes and e_graph_edges respectively.

value <- rnorm(10, 10, 2)

nodes <- data.frame(
  name = sample(LETTERS, 10),
  value = value,
  size = value,
  stringsAsFactors = FALSE
)

edges <- data.frame(
  source = sample(nodes$name, 20, replace = TRUE),
  target = sample(nodes$name, 20, replace = TRUE),
  stringsAsFactors = FALSE
)

e_charts() |> 
  e_graph() |> 
  e_graph_nodes(nodes, name, value, size) |> 
  e_graph_edges(edges, source, target) |> 
  e_tooltip()

Groups

The same but with groups.

value <- rnorm(10, 10, 2)

nodes <- data.frame(
  name = sample(LETTERS, 10),
  value = value,
  size = value,
  grp = rep(c("grp1", "grp2"), 5),
  stringsAsFactors = FALSE
)

edges <- data.frame(
  source = sample(nodes$name, 20, replace = TRUE),
  target = sample(nodes$name, 20, replace = TRUE),
  stringsAsFactors = FALSE
)

e_charts() |> 
  e_graph() |> 
  e_graph_nodes(nodes, name, value, size, grp) |> 
  e_graph_edges(edges, source, target) |> 
  e_tooltip()

Groups

The same but with groups and symbols.

value <- rnorm(10, 10, 2)

nodes <- data.frame(
  name = sample(LETTERS, 10),
  value = value,
  size = value,
  grp = rep(c("grp1", "grp2"), 5),
  symbol = sample(c("circle", "rect", "triangle"), 10, replace = TRUE),
  stringsAsFactors = FALSE
)

edges <- data.frame(
  source = sample(nodes$name, 20, replace = TRUE),
  target = sample(nodes$name, 20, replace = TRUE),
  stringsAsFactors = FALSE
)

e_charts() |> 
  e_graph() |> 
  e_graph_nodes(nodes, name, value, size, grp, symbol) |> 
  e_graph_edges(edges, source, target) |> 
  e_tooltip()

Graph GL

Simply use e_graph_gl instead of e_graph.

flights <- read.csv(
  paste0("https://raw.githubusercontent.com/plotly/datasets/",
         "master/2011_february_aa_flight_paths.csv")
) |> 
  dplyr::select(airport1, airport2)

airports <- read.csv(
  paste0("https://raw.githubusercontent.com/plotly/datasets/",
         "master/2011_february_us_airport_traffic.csv")
) |> 
  dplyr::select(iata, cnt)

# remove airports with no flights
airp <- unique(c(as.character(flights$airport1), as.character(flights$airport2)))
airports <- airports |> 
  dplyr::filter(iata %in% airp)

e_charts() |> 
    e_graph_gl() |> 
    e_graph_nodes(airports, iata, cnt) |> 
    e_graph_edges(flights, airport1, airport2) |> 
    e_modularity() |> 
    e_tooltip()

Les Miserables

The Les Miserables dataset is a popular visualization that demonstrates network graphs. An example of this graph is provided below.

library(echarts4r)

les <- jsonlite::fromJSON("https://gist.githubusercontent.com/tylerlittlefield/0d7a53f2a1f55cb3c6ffe22c67618267/raw/0684a839c3e49dac1157721ddd906eff8f9491d4/les-miserables.json")


e_charts() |> 
  e_graph(
    layout = "circular", 
    circular = list(
      rotateLabel = TRUE
    ),
    roam = TRUE,
    lineStyle = list(
      color = "source",
      curveness = 0.3
    ),
    label = list(
      position = "right",
      formatter = "{b}"
    )
  ) |>
  e_graph_nodes(
    nodes = les$nodes, 
    names = name, 
    value = value, 
    size = size, 
    category = grp
  ) |> 
  e_graph_edges(
    edges = les$edges, 
    source = from,
    target = to
  ) |>
  e_tooltip()