Overview
myIO is an R package that combines R and D3.js to create interactive
data visualizations using the htmlwidgets framework. Charts
built with myIO work in RStudio, Shiny apps, and R Markdown
documents.
The core workflow is simple:
- Create a widget with
myIO() - Add layers with
addIoLayer() - Customize with option functions
Your First Chart
Create a scatter plot of mtcars data:
myIO() |>
addIoLayer(
type = "point",
color = "#E69F00",
label = "mpg_vs_wt",
data = mtcars,
mapping = list(x_var = "wt", y_var = "mpg")
)Adding Multiple Layers
You can stack layers on a single chart. Here we add points and a
linear model trend line using the lm transform:
myIO() |>
addIoLayer(
type = "point",
color = "steelblue",
label = "points",
data = mtcars,
mapping = list(x_var = "wt", y_var = "mpg")
) |>
addIoLayer(
type = "line",
transform = "lm",
color = "red",
label = "trend",
data = mtcars,
mapping = list(x_var = "wt", y_var = "mpg")
)See the Transforms & Theming vignette for details on available transforms.
Customizing the Chart
Option functions let you control axes, margins, legends, theming, and more. They all follow the same pipe-friendly pattern:
myIO() |>
addIoLayer(
type = "bar",
color = "orange",
label = "bars",
data = mtcars,
mapping = list(x_var = "cyl", y_var = "mpg")
) |>
defineCategoricalAxis(xAxis = TRUE) |>
setAxisFormat(xAxis = ".0f", yAxis = ".0f") |>
setAxisFormat(xLabel = "Cylinders", yLabel = "Miles per Gallon") |>
setMargin(top = 40, bottom = 70, left = 60, right = 10) |>
setTransitionSpeed(speed = 500)Grouped Data
When your data has a grouping variable, pass it in the
mapping to automatically create one layer per group:
aq <- airquality
aq$Month <- paste0("M", aq$Month)
myIO() |>
addIoLayer(
type = "line",
color = c("#E69F00", "#56B4E9", "#009E73", "#D55E00", "#0072B2"),
label = "Month",
data = aq,
mapping = list(x_var = "Day", y_var = "Temp", group = "Month")
)Theming
Apply visual themes to change colors, fonts, and backgrounds:
myIO() |>
addIoLayer(
type = "point",
color = "#56B4E9",
label = "scatter",
data = mtcars,
mapping = list(x_var = "wt", y_var = "mpg")
) |>
setTheme(
text_color = "#e0e0e0",
grid_color = "#333333",
bg = "#1a1a2e",
font = "Fira Code, monospace"
)See Transforms & Theming for the full theming API.
Using in Shiny
myIO provides standard Shiny bindings: - myIOOutput()
for the UI - renderMyIO() for the server
library(shiny)
ui <- fluidPage(
myIOOutput("my_chart", width = "100%", height = "400px")
)
server <- function(input, output) {
output$my_chart <- renderMyIO({
myIO() |>
addIoLayer(
type = "point",
color = "steelblue",
label = "scatter",
data = mtcars,
mapping = list(x_var = "wt", y_var = "mpg")
)
})
}
shinyApp(ui, server)Chart Types
myIO supports 17 chart types. See the Chart Types vignette for examples of each.
| Category | Types |
|---|---|
| Basic |
line, point, bar,
area, groupedBar
|
| Statistical |
histogram, hexbin
|
| Standalone |
donut, gauge, treemap,
sankey
|
| Financial |
candlestick, waterfall,
heatmap
|
| Composite |
boxplot, violin,
ridgeline
|
Composite types automatically expand into multiple sub-layers using the appropriate transforms (density, quantiles, etc.).
Available Option Functions
| Function | Purpose |
|---|---|
setAxisFormat() |
Set d3.js axis and tooltip formats, axis labels |
setAxisLimits() |
Set min/max for x and y axes |
setMargin() |
Set chart margins (top, bottom, left, right) |
setColorScheme() |
Set color palette and category labels |
setTheme() |
Set theme tokens (colors, font, background) |
setTransitionSpeed() |
Set animation speed (0 to disable) |
setReferenceLines() |
Add x and y reference lines |
setToggle() |
Add a toggle button to switch y variable |
setToolTipOptions() |
Configure tooltip behavior |
defineCategoricalAxis() |
Treat axes as categorical |
flipAxis() |
Swap x and y axes |
dragPoints() |
Make points draggable |
suppressAxis() |
Hide x and/or y axes |
suppressLegend() |
Hide the legend |