### Shiny App Integration with e_mark_p

Source: https://github.com/johncoene/echarts4r/blob/master/docs/reference/e_mark_p.html

Shows how to integrate e_mark_p within a Shiny application. This example assumes a UI and server setup are defined.

```r
if (interactive()) {
  shinyApp(ui, server)
}
```

--------------------------------

### Example: Create a Basic Liquid Fill Chart

Source: https://github.com/johncoene/echarts4r/blob/master/docs/reference/e_liquid.md

This example demonstrates how to create a basic liquid fill chart using `e_charts` and `e_liquid`. A dark theme is applied.

```r
df <- data.frame(val = c(0.6, 0.5, 0.4))

df |>
  e_charts() |>
  e_liquid(val) |>
  e_theme("dark")
```

```json
{"x":{"theme":"dark","tl":false,"draw":true,"renderer":"canvas","events":[],"buttons":[],"opts":{"series":[{"type":"liquidFill","data":[0.6,0.5,0.4]}]},"dispose":true},"evals":[],"jsHooks":[]}
```

--------------------------------

### Violin Chart Example

Source: https://github.com/johncoene/echarts4r/blob/master/docs/reference/e_violin.md

An example demonstrating how to create a violin chart using the `e_violin` function in conjunction with `e_charts` and `e_scatter`.

```APIDOC
## Example

```r
PlantGrowth |> 
  e_charts(group) |> 
  e_scatter(weight) |> 
  e_violin(binCount = 200)
```
```

--------------------------------

### Tree Chart Example

Source: https://github.com/johncoene/echarts4r/blob/master/docs/reference/e_tree.md

An example demonstrating how to create a tree chart from a nested tibble structure.

```APIDOC
## Tree Chart Example

### Description
This example shows how to construct a tree chart using `e_charts` and `e_tree` with a nested tibble data structure.

### Code
```r
library(dplyr)
df <- tibble(
  name = "earth",
  # 1st level
  children = list(
    tibble(
      name = c("land", "ocean"),
      # 2nd level
      children = list(
        tibble(name = c("forest", "river")),
        # 3rd level
        tibble(
          name = c("fish", "kelp"),
          children = list(
            tibble(
              name = c("shark", "tuna")
            ),
            # 4th level
            NULL # kelp
          )
        )
      )
    )
  )
)

df |>
  e_charts() |>
  e_tree(initialTreeDepth = 3, label = list(offset = c(0, -11)))
```
```

--------------------------------

### Sample Datasets

Source: https://github.com/johncoene/echarts4r/blob/master/docs/reference/index.html

Information about example datasets included with the package.

```APIDOC
## Datasets: airports, buildings_sample, buildings_sample_json, flights, population

### Description
Provides access to several example datasets for use with echarts4r, including airport data, building samples, flight paths, and world population data.

### Method
N/A (Data access)

### Endpoint
N/A (Data access)

### Parameters
N/A (Data access)

### Request Example
N/A

### Response
N/A (Data access)
```

--------------------------------

### Example: Line Chart with Confidence Bands

Source: https://github.com/johncoene/echarts4r/blob/master/docs/reference/band.md

This example demonstrates creating a line chart with confidence bands. It first generates sample data with lower and upper bounds, then plots the main line and adds the confidence band.

```r
df <- data.frame(
  x = 1:10,
  y = runif(10, 5, 10)
) |> 
  dplyr::mutate(
    lwr = y - runif(10, 1, 3),
    upr = y + runif(10, 2, 4)
  )

df |> 
  e_charts(x) |> 
  e_line(y) |> 
  e_band(lwr, upr)
```

```json
{"x":{"theme":"","tl":false,"draw":true,"renderer":"canvas","events":[],"buttons":[],"opts":{"yAxis":[{"show":true}],"xAxis":[{"type":"category"}],"legend":{"data":["y"]},"series":[{"data":[{"value":[1,9.712029489455745]},{"value":[2,8.273902086075395]},{"value":[3,9.718653876334429]},{"value":[4,5.35084204049781]},{"value":[5,5.359867089428008]},{"value":[6,6.731293258490041]},{"value":[7,9.176327877212316]},{"value":[8,7.240026692161337]},{"value":[9,9.337397053604946]},{"value":[10,5.113887310726568]}],"yAxisIndex":0,"xAxisIndex":0,"name":"y","type":"line","coordinateSystem":"cartesian2d"},{"data":[{"value":[1,6.720879852538928]},{"value":[2,6.954618339426816]},{"value":[3,8.641919273883104]},{"value":[4,3.025244214572012]},{"value":[5,4.35866085300222]},{"value":[6,4.781416568206623]},{"value":[7,6.935168103780597]},{"value":[8,5.303894304903224]},{"value":[9,7.475740438560024]},{"value":[10,3.139641279121861]}],"yAxisIndex":0,"xAxisIndex":0,"name":"lwr","type":"line","coordinateSystem":"cartesian2d","lineStyle":{"normal":{"opacity":0}},"symbol":"none","areaStyle":{"color":"rgba(0,0,0,0)"},"stack":"confidence-band"},{"data":[{"value":[1,6.480287220794708]},{"value":[2,3.791436417028308]},{"value":[3,4.069688166491687]},{"value":[4,4.589779764879495]},{"value":[5,4.328062675427645]},{"value":[6,4.385108711197972]},{"value":[7,5.725471286568791]},{"value":[8,4.011707448400557]},{"value":[9,5.165251004043967]},{"value":[10,4.643017379101366]}],"yAxisIndex":0,"xAxisIndex":0,"name":"upr","type":"line","coordinateSystem":"cartesian2d","lineStyle":{"normal":{"opacity":0}},"symbol":"none","areaStyle":[],"stack":"confidence-band"}]},"dispose":true},"evals":[],"jsHooks":[]}
```

--------------------------------

### Example of Building a Manual Color Range

Source: https://github.com/johncoene/echarts4r/blob/master/docs/reference/e_color_range.md

This example demonstrates how to use `e_color_range` to create a color range based on a data frame. The `colors` argument specifies the gradient.

```r
df <- data.frame(val = 1:10)

e_color_range(df, val, colors)
#>    val  colors
#> 1    1 #BF444C
#> 2    2 #C55354
#> 3    3 #CB615D
#> 4    4 #D06E66
#> 5    5 #D57B6F
#> 6    6 #DC8E79
#> 7    7 #E4A784
#> 8    8 #EBBF8F
#> 9    9 #F1D79A
#> 10  10 #F6EFA6
```

--------------------------------

### Basic Scatter Matrix Example

Source: https://github.com/johncoene/echarts4r/blob/master/docs/reference/e_scatter_matrix.md

This example demonstrates how to create a scatter plot within a matrix coordinate system using `e_scatter_matrix`. It requires setting up the matrix axes and then adding the scatter series.

```r
df <- data.frame("Class" = rep(c("Class1", "Class2", "Class3"),each = 3),
                   "Grade" = c("Grade1","Grade2", "Grade3"),
                  "A" = sample(1:10, 9))

df |> e_chart() |>
 e_matrix(xAxis = "Class", yAxis = "Grade") |>
 e_matrix_parent(value = "Primary", children = c("Class1", "Class2")) |>
 e_matrix_parent(value = "High", children = "Class3") |>
 e_matrix_corner(value = "All School",
   label = list(fontSize = 24, color = "#555", position = "inside")) |>
 e_scatter(A, coord_system = "matrix", symbolSize = 0) |>
 e_labels(position = "inside",
          formatter = htmlwidgets::JS(
           'function(params){return(params.value[2])}'),
          color = "#555",
          fontWeight = "bold")
```

```json
{"x":{"theme":"","tl":false,"draw":true,"renderer":"canvas","events":[],"buttons":[],"opts":{"matrix":{"x":{"data":[{"value":"Primary","children":["Class1","Class2"]},{"value":"High","children":["Class3"]}],"name":"Class"},"y":{"data":["Grade1","Grade2","Grade3"],"name":"Grade"},"corner":{"data":[{"coord":[-1,-1],"value":"All School","mergeCells":true,"coordClamp":false}],"label":{"fontSize":24,"color":"#555","position":"inside"}}},"series":[{"type":"scatter","coordinateSystem":"matrix","data":[["Class1","Grade1",2],["Class1","Grade2",1],["Class1","Grade3",10],["Class2","Grade1",9],["Class2","Grade2",4],["Class2","Grade3",8],["Class3","Grade1",5],["Class3","Grade2",3],["Class3","Grade3",6]],"symbolSize":0,"label":{"show":true,"position":"inside","formatter":"function(params){return(params.value[2])}","color":"#555","fontWeight":"bold"}}]},"dispose":true},"evals":["opts.series.0.label.formatter"],"jsHooks":[]}
```

--------------------------------

### Create a Step Chart with 'start' step type

Source: https://github.com/johncoene/echarts4r/blob/master/docs/reference/e_step.html

Use `e_step('start')` to create a step chart where the step occurs at the beginning of the interval. This is suitable for data that represents a value held constant until the next change.

```r
iris |> 
  group_by(Species) |>
  e_charts(Sepal.Length, timeline = TRUE) |>
  e_step(Sepal.Width) |>
  e_tooltip(trigger = "axis")
```

--------------------------------

### Create a Scatter GL Chart

Source: https://github.com/johncoene/echarts4r/blob/master/docs/articles/gl.html

Use scatterGL for large datasets. This example demonstrates creating a scatter plot with GL rendering.

```r
e_charts() |> 
  e_scatter_gl(x, y, z, coord_system = "geo") |> 
  e_visual_map() |> 
  e_text_style(font_family = "Raleway")
```

--------------------------------

### Basic annotation example

Source: https://github.com/johncoene/echarts4r/blob/master/docs/reference/e_annotations.md

This example demonstrates how to add a simple annotation to a chart. Ensure annotations are in a list with x, y, and text properties. Note that HTML tags may not render correctly in the RStudio viewer.

```r
# May not work render HTML correctly in RStudio viewer

library(echarts4r)

# Create a basic chart
e <- echarts4r() %>%
  e_charts(x_axis)

# Add annotations
e %>%
  e_annotations(
    annotations = list(
      list(x = "2017-01-01", y = 10, text = "Hello")
    )
  )

```

--------------------------------

### Format Matrix Axis Example

Source: https://github.com/johncoene/echarts4r/blob/master/docs/reference/e_format_matrix_axis.html

This example demonstrates how to format the x-axis labels of a matrix chart to be red. Ensure you have the echarts4r library installed and loaded.

```r
df <- data.frame("Class" = rep(c("Class1", "Class2", "Class3"),each = 3),
"Grade" = c("Grade1","Grade2", "Grade3"),
"A" = sample(1:10, 9),
"B" = sample(1:10,9))

df |> e_charts() |> e_matrix(xAxis = "Class", yAxis = "Grade") |>
e_format_matrix_axis(axis = "x", label = list(color = "red"))
```

--------------------------------

### Informative error for missing leaflet package

Source: https://github.com/johncoene/echarts4r/blob/master/tests/testthat/_snaps/leaflet.md

When the `leaflet` package is not installed, calling `e_leaflet_tile()` will result in an informative error message, guiding the user to install the necessary dependency.

```R
e_leaflet_tile(e)
# Condition
# Error:
# ! Requires the `leaflet` package installed
```

--------------------------------

### Initialize and Build a Basic Graph

Source: https://github.com/johncoene/echarts4r/blob/master/docs/articles/graph.html

Use `e_charts` to initialize a graph, then `e_graph_nodes` and `e_graph_edges` to add data. Includes basic tooltip functionality.

```r
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()
```

--------------------------------

### Initialize Basic Graph

Source: https://github.com/johncoene/echarts4r/blob/master/docs/articles/graph.md

Use `e_charts` to initialize a graph and `e_graph` to set up the graph structure. Then add nodes and edges using `e_graph_nodes` and `e_graph_edges` respectively. `e_tooltip` adds interactive tooltips.

```r
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()
```

--------------------------------

### Visualize Flight Paths on a World Map

Source: https://github.com/johncoene/echarts4r/blob/master/docs/reference/e_geo.md

This example shows how to plot flight paths between specified start and end coordinates on a world map. It requires a data frame with start and end longitude and latitude columns. The `lineStyle` option can be used to adjust the curvature of the lines.

```r
flights |>
  e_charts() |>
  e_geo() |>
  e_lines(
    start_lon,
    start_lat,
    end_lon,
    end_lat,
    name = "flights",
    lineStyle = list(normal = list(curveness = 0.3))
  )
```

```json
{"x":{"theme":"","tl":false,"draw":true,"renderer":"canvas","events":[],"buttons":[],"opts":{"geo":{"map":"world"},"series":[{"data":[{"coords":[[-97.0372,32.89595056],[-106.6091944,35.04022222]]},{"coords":[[-87.90446417,41.979595],[-97.66987193999999,30.19453278]]},{"coords":[[-97.0372,32.89595056],[-72.68322833000001,41.93887417]]},{"coords":[[-66.00183333,18.43941667],[-72.68322833000001,41.93887417]]},{"coords":[[-97.0372,32.89595056],[-86.75354972,33.56294306]]},{"coords":[[-80.29055556,25.79325],[-86.67818222,36.12447667]]},{"coords":[[-97.0372,32.89595056],[-71.00517917000001,42.3643475]]},{"coords":[[-80.29055556,25.79325],[-71.00517917000001,42.3643475]]},{"coords":[[-87.90446417,41.979595],[-71.00517917000001,42.3643475]]},{"coords":[[-66.00183333,18.43941667],[-71.00517917000001,42.3643475]]},{"coords":[[-64.97336111,18.33730556],[-71.00517917000001,42.3643475]]},{"coords":[[-80.29055556,25.79325],[-76.66819833,39.17540167]]},{"coords":[[-66.00183333,18.43941667],[-76.66819833,39.17540167]]},{"coords":[[-97.0372,32.89595056],[-80.94312583,35.21401111]]},{"coords":[[-97.0372,32.89595056],[-104.70025,38.80580556]]},{"coords":[[-97.0372,32.89595056],[-84.219375,39.90237583]]},{"coords":[[-97.0372,32.89595056],[-77.03772222000001,38.85208333]]},{"coords":[[-80.29055556,25.79325],[-104.6670019,39.85840806]]},{"coords":[[-87.90446417,41.979595],[-104.6670019,39.85840806]]},{"coords":[[-84.42694444,33.64044444],[-97.0372,32.89595056]]},{"coords":[[-97.66987193999999,30.19453278],[-97.0372,32.89595056]]},{"coords":[[-86.67818222,36.12447667],[-97.0372,32.89595056]]},{"coords":[[-118.3584969,34.20061917],[-97.0372,32.89595056]]},{"coords":[[-76.66819833,39.17540167],[-97.0372,32.89595056]]},{"coords":[[-82.89188278,39.99798528],[-97.0372,32.89595056]]},{"coords":[[-104.6670019,39.85840806],[-97.0372,32.89595056]]},{"coords":[[-83.34883583,42.21205889],[-97.0372,32.89595056]]},{"coords":[[-106.9176953,39.64256778],[-97.0372,32.89595056]]},{"coords":[[-74.16866056000001,40.69249722],[-97.0372,32.89595056]]},{"coords":[[-119.7181389,36.77619444],[-97.0372,32.89595056]]},{"coords":[[-80.15275,26.07258333],[-97.0372,32.89595056]]},{"coords":[[-86.77310944,34.6404475],[-97.0372,32.89595056]]},{"coords":[[-95.33972222,29.98047222],[-97.0372,32.89595056]]},{"coords":[[-118.4080744,33.94253611],[-97.0372,32.89595056]]},{"coords":[[-94.71390556,39.29760528],[-97.0372,32.89595056]]},{"coords":[[-81.31602778,28.42888889],[-97.0372,32.89595056]]},{"coords":[[-89.97666667,35.04241667],[-97.0372,32.89595056]]},{"coords":[[-98.23861110999999,26.17583333],[-97.0372,32.89595056]]},{"coords":[[-80.29055556,25.79325],[-97.0372,32.89595056]]},{"coords":[[-93.2169225,44.88054694],[-97.0372,32.89595056]]},{"coords":[[-107.8938333,38.50886722],[-97.0372,32.89595056]]},{"coords":[[-156.4304578,20.89864972],[-97.0372,32.89595056]]},{"coords":[[-97.60073389,35.39308833],[-97.0372,32.89595056]]},{"coords":[[-95.89417306,41.30251861],[-97.0372,32.89595056]]},{"coords":[[-87.90446417,41.979595],[-97.0372,32.89595056]]},{"coords":[[-75.24114083000001,39.87195278],[-97.0372,32.89595056]]},{"coords":[[-112.0080556,33.43416667],[-97.0372,32.89595056]]},{"coords":[[-77.31966667,37.50516667],[-97.0372,32.89595056]]},{"coords":[[-119.7680647,39.49857611],[-97.0372,32.89595056]]},{"coords":[[-117.1896567,32.73355611],[-97.0372,32.89595056]]},{"coords":[[-98.46977778,29.53369444],[-97.0372,32.89595056]]},{"coords":[[-85.736,38.17438889],[-97.0372,32.89595056]]},{"coords":[[-122.3748433,37.61900194],[-97.0372,32.89595056]]},{"coords":[[-121.9290089,37.36186194],[-97.0372,32.89595056]]},{"coords":[[-111.9777731,40.78838778],[-97.0372,32.89595056]]},{"coords":[[-90.35998972,38.74768694],[-97.0372,32.89595056]]},{"coords":[[-94.30681111,36.28186944],[-97.0372,32.89595056]]},{"coords":[[-80.29055556,25.79325],[-83.34883583,42.21205889]]},{"coords":[[-73.87260917,40.77724306],[-106.9176953,39.64256778]]},{"coords":[[-87.90446417,41.979595],[-106.9176953,39.64256778]]},{"coords":[[-97.0372,32.89595056],[-106.3778056,31.80666667]]},{"coords":[[-118.4080744,33.94253611],[-74.16866056000001,40.69249722]]},{"coords":[[-80.29055556,25.79325],[-74.16866056000001,40.69249722]]},{"coords":[[-73.77892556,40.63975111],[-80.15275,26.07258333]]},{"coords":[[-97.0372,32.89595056],[-107.2176597,40.48118028]]},{"coords":[[-97.0372,32.89595056],[-157.9224072,21.31869111]]},{"coords":[[-118.4080744,33.94253611],[-157.9224072,21.31869111]]},{"coords":[[-97.0372,32.89595056],[-77.45580972,38.94453194]]},{"coords":[[-118.4080744,33.94253611],[-77.45580972,38.94453194]]},{"coords":[[-80.29055556,25.79325],[-77.45580972,38.94453194]]},{"coords":[[-80.29055556,25.79325],[-95.33972222,29.98047222]]},{"coords":[[-97.0372,32.89595056],[-97.4330458]]}]}]}}
```

--------------------------------

### Custom theme configuration

Source: https://github.com/johncoene/echarts4r/blob/master/docs/articles/themes.html

Demonstrates a custom theme configuration applied via `e_theme`. This example shows how to set a specific font family and other chart options.

```json
{"value":\["Missouri","-28.2"\],"Montana","-16.4"\],"Nebraska","-16.5"\],"Nevada","-46.0"\],"New Hampshire"," -9.5"\],"New Jersey","-18.8"\],"New Mexico","-32.1"\],"New York","-26.1"\],"North Carolina","-16.1"\],"North Dakota"," -7.3"\],"Ohio","-21.4"\],"Oklahoma","-20.0"\],"Oregon","-29.3"\],"Pennsylvania","-14.9"\],"Rhode Island"," -8.3"\],"South Carolina","-22.5"\],"South Dakota","-12.8"\],"Tennessee","-26.9"\],"Texas","-25.5"\],"Utah","-22.9"\],"Vermont","-11.2"\],"Virginia","-20.7"\],"Washington","-26.2"\],"West Virginia"," -9.3"\],"Wisconsin","-10.8"\],"Wyoming","-15.6"\]
},{"value":\["Missouri","-28.2"\],"Montana","-16.4"\],"Nebraska","-16.5"\],"Nevada","-46.0"\],"New Hampshire"," -9.5"\],"New Jersey","-18.8"\],"New Mexico","-32.1"\],"New York","-26.1"\],"North Carolina","-16.1"\],"North Dakota"," -7.3"\],"Ohio","-21.4"\],"Oklahoma","-20.0"\],"Oregon","-29.3"\],"Pennsylvania","-14.9"\],"Rhode Island"," -8.3"\],"South Carolina","-22.5"\],"South Dakota","-12.8"\],"Tennessee","-26.9"\],"Texas","-25.5"\],"Utah","-22.9"\],"Vermont","-11.2"\],"Virginia","-20.7"\],"Washington","-26.2"\],"West Virginia"," -9.3"\],"Wisconsin","-10.8"\],"Wyoming","-15.6"\]
],"yAxisIndex":0,"xAxisIndex":1,"name":"Sick basterd","type":"line","coordinateSystem":"cartesian2d","areaStyle":\[\]}
],"title":\[{"text":"Your plot","subtext":"Subtext","sublink":"https://john-coene.com"}
],"tooltip":{"trigger":"axis"},"textStyle":{"fontFamily":"Raleway"}},"dispose":true},"evals":\[\]}
```

--------------------------------

### Stage Chart with echarts4r

Source: https://github.com/johncoene/echarts4r/blob/master/docs/articles/chart_types.html

This example demonstrates the 'e_stage' function for visualizing stages over time. It requires start and end timestamps, along with a stage identifier for each data point.

```r
df <- data.frame(
  start = as.POSIXct(c(
    "2024-09-07 06:12", "2024-09-07 06:15", "2024-09-07 05:45",
    "2024-09-07 04:57", "2024-09-07 06:12", "2024-09-07 06:18"
  )),

  end = as.POSIXct(c(
    "2024-09-07 06:12", "2024-09-07 06:18", "2024-09-07 06:12",
    "2024-09-07 05:45", "2024-09-07 06:15", "2024-09-07 07:37"
  )),

  stage = c(
    "Awake", "Awake",  "REM",
    "Core", "Core", "Deep"
  ),
  stringsAsFactors = FALSE
 )
stage_order <- c( "Deep", "Core","REM", "Awake")

df |>
  e_charts() |>
  e_stage(start = start,
          end = end,
          stage = stage) |> 
          e_x_axis(type = 'time') |>
          e_y_axis(type = 'category', data = stage_order)
```

--------------------------------

### Access Buildings Sample JSON Data

Source: https://github.com/johncoene/echarts4r/blob/master/docs/reference/buildings_sample_json.md

This R code snippet shows how to access the `buildings_sample_json` object. No specific setup or imports are required beyond having the echarts4r package installed.

```r
buildings_sample_json
```

--------------------------------

### Create Scatter Matrix with Visual Mapping

Source: https://github.com/johncoene/echarts4r/blob/master/docs/reference/e_scatter_matrix.html

This example shows how to create a scatter matrix and then apply a visual map to control the symbol size based on a data variable. It utilizes `e_matrix`, `e_scatter_matrix`, `e_labels`, and `e_visual_map`.

```r
df |> e_chart() |>
     e_matrix(xAxis = "Class", yAxis = "Grade") |>
     e_scatter_matrix("A") |>
     e_labels(position = "inside",
              formatter = htmlwidgets::JS('function(params){return(params.value[2])}'),
              color = "#555",
              fontWeight = "bold") |>
     e_visual_map(A, inRange = list(symbolSize = c(1,50)))
```

--------------------------------

### Create Globe Lines 3D Chart

Source: https://github.com/johncoene/echarts4r/blob/master/docs/articles/globe.md

Visualize flight paths on a 3D globe using lines. This example uses `e_lines_3d` to draw paths between specified start and end longitudes and latitudes on the globe.

```r
flights <- read.csv(
  paste0("https://raw.githubusercontent.com/plotly/datasets/",
         "2011_february_aa_flight_paths.csv")
)

flights |> 
  e_charts() |> 
  e_globe(
    environment = ea_asset("starfield"),
    base_texture = ea_asset("world topo"), 
    height_texture = ea_asset("world topo"),
    displacementScale = 0.05
  ) |> 
  e_lines_3d(
    start_lon, 
    start_lat, 
    end_lon, 
    end_lat,
    name = "flights",
    effect = list(show = TRUE)
  ) |> 
  e_legend(FALSE)
```

--------------------------------

### Customize 3D X-Axis with echarts4r

Source: https://github.com/johncoene/echarts4r/blob/master/docs/reference/axis3d.html

This example demonstrates how to customize the appearance of the 3D x-axis, specifically setting the line color to blue. It assumes prior setup of a 3D bar chart with stacked series.

```r
trans <- list(opacity = 0.4) # transparency
emphasis <- list(itemStyle = list(color = "#313695"))

matrix |>
  e_charts(x) |
  e_bar_3d(y, z1, stack = "stack", name = "Serie 1", itemStyle = trans, emphasis = emphasis) |
  e_bar_3d(y, z2, stack = "stack", name = "Serie 2", itemStyle = trans, emphasis = emphasis) |
  e_x_axis_3d(axisLine = list(lineStyle = list(color = "blue")))
```

--------------------------------

### Initialize Graph GL (WebGL)

Source: https://github.com/johncoene/echarts4r/blob/master/docs/articles/graph.md

Utilize `e_graph_gl` for a WebGL-accelerated graph, which can offer better performance for large datasets. This example visualizes flight paths and airport traffic.

```r
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()
```

--------------------------------

### Create a World Map with Flight Paths using echarts4r

Source: https://github.com/johncoene/echarts4r/blob/master/docs/articles/map.html

Visualize flight paths on a world map. Ensure the 'echarts4r' library is installed and loaded. The data should contain columns for start and end longitude and latitude.

```r
library(echarts4r)

# Load flight data
flights <- read.csv(
  paste0("https://raw.githubusercontent.com/plotly/datasets/",
         "master/2011_february_aa_flight_paths.csv")
)

# Create the map visualization
flights |> 
  e_charts() |> 
  e_geo() |> 
  e_lines(
    start_lon,
    start_lat,
    end_lon,
    end_lat,
    name = "flights",
    lineStyle = list(normal = list(curveness = 0.3))
   )
```

--------------------------------

### Create a Matrix Chart with Pie Series

Source: https://github.com/johncoene/echarts4r/blob/master/docs/reference/e_pie_matrix.html

This example demonstrates how to initialize a chart with a matrix coordinate system and then add pie series to each cell. It configures tooltips and legends for better interactivity.

```r
df |> 
  e_chart() |>
  e_matrix(xAxis = "Class", yAxis = "Grade") |>
  e_pie_(serie = c("A","B","C"),
   coord_system = "matrix",
     label = list(show = FALSE)) |>
  e_tooltip(trigger = "item") |>
  e_legend()
```

--------------------------------

### Initialize Geo Chart and Add Lines

Source: https://github.com/johncoene/echarts4r/blob/master/docs/reference/e_geo.html

Use `e_geo()` to initialize a geo chart. This example demonstrates adding flight paths using `e_lines`, specifying start and end coordinates, and setting line style with curveness.

```r
flights |> 
  e_charts() |> 
  e_geo() |> 
  e_lines(
    start_lon,
    start_lat,
    end_lon,
    end_lat,
    name = "flights",
    lineStyle = list(normal = list(curveness = 0.3))
  )
```

--------------------------------

### Create a Step Chart with Timeline

Source: https://github.com/johncoene/echarts4r/blob/master/docs/reference/e_step.md

This example demonstrates how to create a step chart using the e_step function with a timeline enabled. It groups data by 'Species' and visualizes 'Sepal.Length' and 'Sepal.Width'.

```r
iris |>
  group_by(Species) |>
  e_charts(Sepal.Length, timeline = TRUE) |>
  e_step(Sepal.Width) |>
  e_tooltip(trigger = "axis")
```

--------------------------------

### Zoom on a Chart Region with a Button

Source: https://github.com/johncoene/echarts4r/blob/master/docs/reference/e_zoom.html

This example demonstrates how to apply a zoom to a specific region of a scatter plot using the e_zoom function. A button is created to trigger this zoom action, with the zoom region defined by start and end percentages.

```r
cars |>
  e_charts(dist) |
  e_scatter(speed) |
  e_datazoom() |
  e_zoom(
    dataZoomIndex = 0,
    start = 20,
    end = 40,
    btn = "BUTTON"
  ) |>
  e_button("BUTTON", "Zoom in")
```

--------------------------------

### Dispatching a DataZoom Action

Source: https://github.com/johncoene/echarts4r/blob/master/docs/reference/e_dispatch_action_p.html

This example demonstrates how to use e_dispatch_action_p to programmatically control the data zoom behavior of an ECharts chart within a Shiny application. It requires an echarts4r proxy and specifies the 'dataZoom' action with start and end values.

```R
library(shiny)

ui <- fluidPage(
  fluidRow(
    column(8, echarts4rOutput("chart")),
    column(4, actionButton("zoom", "Zoom"))
  )
)

server <- function(input, output, session) {
  output$chart <- renderEcharts4r({
    cars |>
      e_charts(speed) |>
      e_scatter(dist) |>
      e_datazoom()
  })

  observe({
    req(input$zoom)

    echarts4rProxy("chart") |>
      e_dispatch_action_p("dataZoom", startValue = 1, endValue = 10)
  })
}

if (interactive()) {
  shinyApp(ui, server)
}
```

--------------------------------

### Draw Flight Paths on Geo Chart

Source: https://github.com/johncoene/echarts4r/blob/master/docs/articles/geo.md

Visualize flight paths between locations on a geo chart using e_lines. This requires data with start and end longitude and latitude. The lineStyle can be customized, for example, with curveness. Requires the 'echarts4r' library.

```r
flights <- read.csv(
  paste0("https://raw.githubusercontent.com/plotly/datasets/",
         "master/2011_february_aa_flight_paths.csv")
)

flights |> 
  e_charts() |> 
  e_geo() |> 
  e_lines(
    start_lon, 
    start_lat, 
    end_lon, 
    end_lat,
    name = "flights",
    lineStyle = list(normal = list(curveness = 0.3))
   )
```

--------------------------------

### Create 3D Lines on a Geo Map

Source: https://github.com/johncoene/echarts4r/blob/master/docs/reference/line3D.md

Use `e_lines_3d` to draw lines between specified start and end coordinates on a 3D geo map. Ensure the `coord_system` is set to 'geo3D'. This example groups data by a factor and plots lines for each group.

```r
flights$grp <- rep(LETTERS[1:2], 89)

flights |>
  group_by(grp) |>
  e_charts() |>
  e_geo_3d() |>
  e_lines_3d(
    start_lon,
    start_lat,
    end_lon,
    end_lat,
    coord_system = "geo3D"
  )
```

--------------------------------

### Basic Graph with Force Layout

Source: https://github.com/johncoene/echarts4r/blob/master/docs/reference/graph.html

This snippet demonstrates how to create a basic graph visualization using the 'force' layout. It defines categories, nodes with properties like name, value, size, and group, and links between nodes with specified line styles. Tooltip and legend are also configured.

```json
{"x":{"theme":"","tl":false,"draw":true,"renderer":"canvas","events":[],"buttons":[],"opts":{"series":[{"name":null,"type":"graph","layout":"force","categories":[{"name":"grp1"},{"name":"grp2"}],"data":[{"name":"P","value":"11.961940","symbolSize":"11.961940","category":"grp1","symbol":"rect"},{"name":"I","value":"12.178347","symbolSize":"12.178347","category":"grp2","symbol":"triangle"},{"name":"O","value":"10.733023","symbolSize":"10.733023","category":"grp1","symbol":"circle"},{"name":"T","value":"11.128840","symbolSize":"11.128840","category":"grp2","symbol":"circle"},{"name":"U","value":" 7.749714","symbolSize":" 7.749714","category":"grp1","symbol":"triangle"},{"name":"X","value":"11.444047","symbolSize":"11.444047","category":"grp2","symbol":"rect"},{"name":"R","value":" 6.457984","symbolSize":" 6.457984","category":"grp1","symbol":"circle"},{"name":"M","value":" 9.171080","symbolSize":" 9.171080","category":"grp2","symbol":"circle"},{"name":"W","value":"12.991650","symbolSize":"12.991650","category":"grp1","symbol":"triangle"},{"name":"Z","value":"11.339097","symbolSize":"11.339097","category":"grp2","symbol":"circle"}],"links":[{"source":"Z","target":"I","value":"11","symbolSize":[5,20],"lineStyle":{"width":"1"}},{"source":"I","target":"Z","value":"97","symbolSize":[5,20],"lineStyle":{"width":"5"}},{"source":"P","target":"M","value":"20","symbolSize":[5,20],"lineStyle":{"width":"1"}},{"source":"I","target":"P","value":"75","symbolSize":[5,20],"lineStyle":{"width":"4"}},{"source":"U","target":"P","value":"87","symbolSize":[5,20],"lineStyle":{"width":"5"}},{"source":"X","target":"U","value":"64","symbolSize":[5,20],"lineStyle":{"width":"4"}},{"source":"U","target":"I","value":"98","symbolSize":[5,20],"lineStyle":{"width":"5"}},{"source":"Z","target":"Z","value":"57","symbolSize":[5,20],"lineStyle":{"width":"3"}},{"source":"U","target":"I","value":"77","symbolSize":[5,20],"lineStyle":{"width":"4"}},{"source":"I","target":"T","value":"26","symbolSize":[5,20],"lineStyle":{"width":"2"}},{"source":"O","target":"I","value":"43","symbolSize":[5,20],"lineStyle":{"width":"3"}},{"source":"U","target":"W","value":"21","symbolSize":[5,20],"lineStyle":{"width":"2"}},{"source":"T","target":"O","value":"16","symbolSize":[5,20],"lineStyle":{"width":"1"}},{"source":"R","target":"R","value":"26","symbolSize":[5,20],"lineStyle":{"width":"2"}},{"source":"P","target":"P","value":"41","symbolSize":[5,20],"lineStyle":{"width":"3"}},{"source":"U","target":"X","value":"91","symbolSize":[5,20],"lineStyle":{"width":"5"}},{"source":"P","target":"X","value":"52","symbolSize":[5,20],"lineStyle":{"width":"3"}},{"source":"O","target":"Z","value":"41","symbolSize":[5,20],"lineStyle":{"width":"3"}},{"source":"X","target":"W","value":"91","symbolSize":[5,20],"lineStyle":{"width":"5"}},{"source":"Z","target":"P","value":"74","symbolSize":[5,20],"lineStyle":{"width":"4"}}]}],"legend":{"data":["grp1","grp2"]},"tooltip":{"trigger":"item"}},"dispose":true}
```