echarts4r

repository·master·Indexed 20 days ago

https://github.com/johncoene/echarts4r

An R interface for Apache ECharts (version 6) that provides a grammar-of-graphics style API for creating interactive, web-based visualizations. It supports a wide range of chart types, coordinate systems (cartesian2d, calendar, polar, globe, cartesian3d), and advanced features such as SVG-based annotations, custom scaling for scatter plots, and integration with dplyr::group_by(). The library also includes specialized tools for Shiny applications, including interactive boxes and the ability to capture annotation drag events.

Tokens
128K
Snippets
499
Records
628
Agent score
69%

What's inside echarts4r

  1. License information for echarts4r

    master

    The echarts4r project is licensed under the Apache License, Version 2.0.

    This license allows you to:

    • Reproduce, prepare derivative works of, publicly display, perform, sublicense, and distribute the work.
    • Use the work for commercial purposes.
    • Use the work royalty-free and without charge.

    When redistributing the work or derivative works, you must:

    1. Provide a copy of the license to recipients.
    2. Include prominent notices in modified files stating that you changed them.
    3. Retain all copyright, patent, trademark, and attribution notices from the source.
    4. If a NOTICE file exists in the distribution, you must include a readable copy of the attribution notices contained within it.
  2. Use Heatmap with a Calendar coordinate system

    master

    You can configure a heatmap to use a calendar coordinate system. This is particularly useful for visualizing temporal data (like daily activity) in a grid format representing a calendar.

    When using coordinateSystem = 'calendar', the data points should be formatted as [date, value] pairs. You can also specify a calendarIndex if multiple calendars are present in the chart configuration.

    # Data structure for calendar heatmap
    # Each value is a vector: c("YYYY-MM-DD", value)
    
    data <- data.frame(
      date = c("2017-11-15", "2017-11-16"),
      value = c(28.718359, 17.431442)
    )
    
    echarts4r() %>%
      e_heatmap(
        data,
        coordinate_system = "calendar"
      )
  3. How Crosstalk works in echarts4r

    master

    Crosstalk integration in echarts4r allows for interactive filtering and selection of data across multiple widgets (like charts and DataTables) without requiring a Shiny server. This is ideal for standalone HTML or Markdown documents.

    Requirements

    • SharedData Object: All charts and widgets participating in the crosstalk must use the same crosstalk::SharedData object.
    • Chart Types: Supported for cartesian2d, no coordinate system, and timeline chart types. Supported functions include e_area(), e_bar(), e_candle(), e_density(), e_effect_scatter(), e_funnel(), e_heatmap(), e_histogram(), e_line(), e_pictorial(), e_pie(), e_scatter(), and e_step().
    • Data Binding: Data requiring crosstalk must be passed directly into e_charts(). Note that functions that add data to an existing echart (like e_add()) are not supported.

    Interaction Mechanism

    To enable interaction, you must add the selectedMode argument to each trace (e.g., e_bar, e_line, e_scatter).

    library(echarts4r)
    library(crosstalk)
    
    # 1. Create SharedData
    sd <- SharedData$new(mtcars)
    
    # 2. Use in charts with selectedMode
    sd |> 
      e_charts(mpg) |> 
      e_bar(cyl, selectedMode = 'single')
  4. Use brush_link for cross-chart selection

    master

    When multiple charts are rendered in the same environment, setting brush_link = 'all' within the e_brush() function enables a global brushing mechanism. This allows a selection made on one chart to automatically highlight or filter corresponding data points across all other charts that have the brush component enabled.

    echarts4r() %> {
      e_brush(brush_link = 'all')
    }
  5. Use the low-level graphics API in echarts4r

    master

    The echarts4r package provides a low-level API for adding custom graphic elements to your charts. All graphic functions follow a naming convention where they end with the suffix _g.

    # Available graphic functions:
    # g_graphic_g (initialisation)
    # g_group_g
    # g_image_g
    # g_text_g
    # g_rect_g
    # g_circle_g
    # g_ring_g
    # g_sector_g
    # g_arc_g
    # g_polygon_g
    # g_polyline_g
    # g_line_g
    # g_bezier_curve_g
  6. Use Flow GL for flow visualization

    master

    e_flow_gl is used to create flow visualizations, typically representing movement or directionality across a geographic or coordinate space. It utilizes WebGL for performance, making it suitable for large datasets of flow vectors.

    To use it, you provide data points that define the flow, often including starting coordinates, ending coordinates, and potentially other attributes like color or magnitude.

  7. Use specialized tooltip formatters

    master

    To easily format numbers as decimals, percentages, or currency within tooltips, use the following helper functions. These are passed to the formatter argument of e_tooltip() or used in specific chart contexts.

    Available Formatters

    • e_tooltip_item_formatter(): A general-purpose helper for item and pointer formatters. Passed to the tooltip formatter option.
    • e_tooltip_pie_formatter(): A specialized helper specifically for e_pie charts.
    • e_tooltip_choro_formatter(): A specialized helper for choropleth maps.
    • e_tooltip_pointer_formatter(): A helper for the label parameter under axisPointer.

    Formatter Arguments

    All these helpers accept the following arguments:

    • style: The formatting style. Options: "decimal", "percent", or "currency".
    • digits: The number of decimal places to display.
    • locale: The locale for formatting (defaults to Sys.getlocale() if NULL).
    • currency: The currency code to display (e.g., "USD").
    e_tooltip_item_formatter(style = c("decimal", "percent", "currency"), digits = 0, locale = NULL, currency = "USD")
    
    e_tooltip_pie_formatter(style = c("decimal", "percent", "currency"), digits = 0, locale = NULL, currency = "USD", ...)
    
    e_tooltip_choro_formatter(style = c("decimal", "percent", "currency"), digits = 0, locale = NULL, currency = "USD")
    
    e_tooltip_pointer_formatter(style = c("decimal", "percent", "currency"), digits = 0, locale = NULL, currency = "USD")
  8. Configure a Calendar Heatmap

    master

    You can create a calendar-based heatmap by providing a calendar configuration within the heatmap options. This is particularly effective for visualizing time-series data where each cell represents a specific date.

    When using the calendar option, you can specify the range (e.g., a year like "2017") to define the temporal scope of the heatmap grid.

    # Conceptual structure for a calendar heatmap
    e_heatmap(data) |> 
      e_calendar(range = "2017")
  9. Use the e_globe family for 3D visualizations

    master

    The e_globe family provides 3D globe visualizations and is similar to e_geo_3d, e_map, or e_map_3d. To use assets like textures or environments, use the ea_asset() function from the echarts4r.assets package.

    Note on Deprecations: The following functions are deprecated and should no longer be used:

    • e_stars_texture
    • e_globe_texture
    • e_map_texture
  10. Use Geo and Map functions

    master

    echarts4r provides a wide range of geographical charting capabilities, including choropleth maps, 3D maps, and integration with Mapbox and Leaflet.

    Key functional groups include:

    • Registering Maps: Use e_map_register(), e_svg_register(), or e_map_register_ui() to register custom map data.
    • Choropleth & SVG: Create maps using e_map(), e_svg(), or 3D variants like e_map_3d().
    • External Map Providers: Integrate Mapbox via e_mapbox() or Leaflet via e_leaflet().
    • Geo Components: Use e_geo() for coordinate systems, e_globe() for global views, and e_geoFacet() for faceted geo charts.
    • WebGL/GL Features: For high-performance rendering, use e_flow_gl() (flow), e_lines_gl() (lines), e_scatter_gl() (scatter), or e_graph_gl() (graphs).
  11. Configure brush_link for series interaction

    master

    The brush_link argument controls how selecting items in one series affects others. You can specify which series should interact using the following values:

    • "all": Interacts with all series (default).
    • "none": Disables interaction between series.
    • c(index1, index2, ...): Interacts only with specific series by their seriesIndex (e.g., c(3, 4, 5) to interact with series 3, 4, and 5).
    # Example of linking specific series
    e_brush(e, brush_link = c(3, 4, 5))
  12. Represent hierarchical data for Sunburst charts

    master

    Sunburst charts require hierarchical data structures. This can be achieved in two primary ways:

    1. JSON List Representation

    Use a nested JSON structure where each item can have a name, value, and a children list containing its sub-items. You can also embed itemStyle directly in the JSON.

    2. Tibble (Nested Data Frame) Representation

    Use a tibble where the children column is a list containing further nested tibbles. This allows for deep hierarchical structures. You can also include an itemStyle column (as a tibble) at any level to provide embedded styles.

    # JSON list example
    jsonl <- jsonlite::fromJSON('[{"name": "earth", "value": 30, "children": [...]}]', simplifyDataFrame = FALSE)
    jsonl |> e_charts() |> e_sunburst()
    
    # Tibble example
    df <- tibble(
      name = c("earth", "mars"),
      value = c(30, 40),
      children = list(
        tibble(name = "land", value = 10, children = list(tibble(name = "forest", value = 3)))
      )
    )
    df |> e_charts() |> e_sunburst()