knitr::opts_chunk$set( collapse = TRUE, comment = "#>" )
This document is adapted from the Area Charts section of the Altair Example Gallery.
Our first step is to set up our environment:
library("altair") library("tibble") library("jsonlite") vega_data <- import_vega_data()
This shows how a Horizon Graph with two layers. See this reference for more details on Horizon Graphs.
Definition
data <- fromJSON('[ {"x": 1, "y": 28}, {"x": 2, "y": 55}, {"x": 3, "y": 43}, {"x": 4, "y": 91}, {"x": 5, "y": 81}, {"x": 6, "y": 53}, {"x": 7, "y": 19}, {"x": 8, "y": 87}, {"x": 9, "y": 52}, {"x": 10, "y": 48}, {"x": 11, "y": 24}, {"x": 12, "y": 49}, {"x": 13, "y": 87}, {"x": 14, "y": 66}, {"x": 15, "y": 17}, {"x": 16, "y": 27}, {"x": 17, "y": 68}, {"x": 18, "y": 16}, {"x": 19, "y": 49}, {"x": 20, "y": 15} ]')
glimpse(data)
area1 <- alt$Chart(data)$ mark_area(clip = TRUE, interpolate = "monotone")$ encode( x = alt$X("x", scale = alt$Scale(zero = FALSE, nice = FALSE)), y = alt$Y( "y", scale = alt$Scale(domain = list(0, 50)), axis = alt$Axis(title = "y") ), opacity = alt$value(0.6) )$ properties( width = 500, height = 75 ) area2 <- area1$ encode( y = alt$Y("ny:Q", scale=alt$Scale(domain=list(0, 50))) )$ transform_calculate("ny", "datum.y - 50") chart <- (area1 + area2) chart
This is an example of creating a stacked chart for which the domain of the top chart can be selected by interacting with the bottom chart.
glimpse(vega_data$sp500())
brush <- alt$selection_interval(encodings = list("x")) base <- alt$ Chart(vega_data$sp500$url, width=600, height=200)$ mark_area()$ encode( x = "date:T", y = "price:Q" ) upper <- base$ encode( alt$X('date:T')$scale(domain = brush) ) lower <- base$ properties( height=60 )$ add_params(brush) chart <- alt$vconcat(upper, lower) chart
glimpse(vega_data$iowa_electricity())
chart <- alt$Chart(vega_data$iowa_electricity())$ mark_area(opacity = 0.3)$ encode( x = "year:T", y= alt$Y( "net_generation:Q", stack = NULL ), color = "source:N" ) chart
glimpse(vega_data$iowa_electricity())
chart <- alt$Chart(vega_data$iowa_electricity())$ mark_area()$ encode( x = "year:T", y= alt$Y( "net_generation:Q", stack = "normalize" ), color = "source:N" ) chart
glimpse(vega_data$unemployment_across_industries())
chart <- alt$Chart(vega_data$unemployment_across_industries$url)$ mark_area()$ encode( x = alt$X( "date:T", timeUnit = "yearmonth", axis = alt$Axis(format = "%Y", domain = FALSE, tickSize = 0) ), y = alt$Y("sum(count):Q", stack = "center", axis = NULL), color = alt$Color("series:N", scale = alt$Scale(scheme = "category20b")) )$ interactive() chart
source <- vega_data$iowa_electricity() glimpse(source)
chart <- alt$Chart(source)$ mark_area()$ encode( x = "year:T", y = "net_generation:Q", color = "source:N", row = "source:N" )$ properties( height = 100 ) chart
source <- vega_data$stocks() glimpse(source)
chart <- alt$Chart(source)$ transform_filter("datum.symbol != 'GOOG'")$ mark_area()$ encode( x = "date:T", y = "price:Q", color = "symbol:N", row = alt$Row("symbol:N", sort = c('MSFT', 'AAPL', 'IBM', 'AMZN') ) )$ properties( width = 400, height = 50 ) chart
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.