Chapter 6 Interactive plots
6.1 Plotly cheat: convert ggplot with plotly::ggplotly()
Interactive plots can help both you and your audience find and tell stories in data faster and more enjoyably.
Carson Sievert maintains the Plotly R package. He describes how interactive plots can “augment” your data exploration, but only if we can “iterate quickly”. With plotly you can sometimes move faster than ggplot with fewer errors.
A quick way to use Plotly is to put a ggplot you have already built through a plotly function called
plotly::ggplotly(), like this below.
6.2 Edit ggplot conversion with plotly::plotly_build()
Often, even when you have played around with how the original ggplot looks, the
plotly::ggplotly()function doesn’t quite convert to the plot you want. If that happens, try usingplotly::plotly_build()instead ofplotly::ggplotly(). It gives you more control over the conversion from ggplot to plotly.Plotly build is a nested R object which plotly.js uses to create the web graphic. This diagram from chapter 2 of Carson Sievert’s Interactive web-based data visualization with R, plotly, and shiny explains that relationship.
plotly::plotly_build()contains all the settings used to create the plotly plot that we can now edit.
p <- df_red %>%
ggplot2::ggplot() +
ggplot2::aes(x = date,
y = sales,
colour = city) +
ggplot2::geom_line()
p_build <- plotly::plotly_build(p)
p_build- We can alter any of the settings in
p_buildwe have created above. One way to find the value we want to edit is to useutils::str()to browse all of them in a large nested tree.str()compactly displays the structure of any R object. We run it onp_buildbelow.
Show full structure of p_build
## List of 8
## $ x :List of 10
## ..$ data :List of 14
## .. ..$ :List of 14
## .. .. ..$ x : num [1:187] 10957 10988 11017 11048 11078 ...
## .. .. .. ..- attr(*, "apiSrc")= logi TRUE
## .. .. ..$ y : num [1:187] 241 337 493 456 498 491 446 507 407 392 ...
## .. .. .. ..- attr(*, "apiSrc")= logi TRUE
## .. .. ..$ text : chr [1:187] "date: 2000-01-01<br />sales: 241<br />city: Arlington" "date: 2000-02-01<br />sales: 337<br />city: Arlington" "date: 2000-03-01<br />sales: 493<br />city: Arlington" "date: 2000-04-01<br />sales: 456<br />city: Arlington" ...
## .. .. .. ..- attr(*, "apiSrc")= logi TRUE
## .. .. ..$ type : chr "scatter"
## .. .. ..$ mode : chr "lines"
## .. .. ..$ line :List of 3
## .. .. .. ..$ width: num 1.89
## .. .. .. ..$ color: chr "rgba(248,118,109,1)"
## .. .. .. ..$ dash : chr "solid"
## .. .. ..$ hoveron : chr "points"
## .. .. ..$ name : chr "Arlington"
## .. .. ..$ legendgroup: chr "Arlington"
## .. .. ..$ showlegend : logi TRUE
## .. .. ..$ xaxis : chr "x"
## .. .. ..$ yaxis : chr "y"
## .. .. ..$ hoverinfo : chr "text"
## .. .. ..$ frame : chr NA
## .. ..$ :List of 14
## .. .. ..$ x : num [1:187] 10957 10988 11017 11048 11078 ...
## .. .. .. ..- attr(*, "apiSrc")= logi TRUE
## .. .. ..$ y : num [1:187] 1025 1277 1603 1556 1980 ...
## .. .. .. ..- attr(*, "apiSrc")= logi TRUE
## .. .. ..$ text : chr [1:187] "date: 2000-01-01<br />sales: 1025<br />city: Austin" "date: 2000-02-01<br />sales: 1277<br />city: Austin" "date: 2000-03-01<br />sales: 1603<br />city: Austin" "date: 2000-04-01<br />sales: 1556<br />city: Austin" ...
## .. .. .. ..- attr(*, "apiSrc")= logi TRUE
## .. .. ..$ type : chr "scatter"
## .. .. ..$ mode : chr "lines"
## .. .. ..$ line :List of 3
## .. .. .. ..$ width: num 1.89
## .. .. .. ..$ color: chr "rgba(227,137,0,1)"
## .. .. .. ..$ dash : chr "solid"
## .. .. ..$ hoveron : chr "points"
## .. .. ..$ name : chr "Austin"
## .. .. ..$ legendgroup: chr "Austin"
## .. .. ..$ showlegend : logi TRUE
## .. .. ..$ xaxis : chr "x"
## .. .. ..$ yaxis : chr "y"
## .. .. ..$ hoverinfo : chr "text"
## .. .. ..$ frame : chr NA
## .. ..$ :List of 14
## .. .. ..$ x : num [1:187] 10957 10988 11017 11048 11078 ...
## .. .. .. ..- attr(*, "apiSrc")= logi TRUE
## .. .. ..$ y : num [1:187] 244 375 391 421 533 561 449 471 397 376 ...
## .. .. .. ..- attr(*, "apiSrc")= logi TRUE
## .. .. ..$ text : chr [1:187] "date: 2000-01-01<br />sales: 244<br />city: Bay Area" "date: 2000-02-01<br />sales: 375<br />city: Bay Area" "date: 2000-03-01<br />sales: 391<br />city: Bay Area" "date: 2000-04-01<br />sales: 421<br />city: Bay Area" ...
## .. .. .. ..- attr(*, "apiSrc")= logi TRUE
## .. .. ..$ type : chr "scatter"
## .. .. ..$ mode : chr "lines"
## .. .. ..$ line :List of 3
## .. .. .. ..$ width: num 1.89
## .. .. .. ..$ color: chr "rgba(196,154,0,1)"
## .. .. .. ..$ dash : chr "solid"
## .. .. ..$ hoveron : chr "points"
## .. .. ..$ name : chr "Bay Area"
## .. .. ..$ legendgroup: chr "Bay Area"
## .. .. ..$ showlegend : logi TRUE
## .. .. ..$ xaxis : chr "x"
## .. .. ..$ yaxis : chr "y"
## .. .. ..$ hoverinfo : chr "text"
## .. .. ..$ frame : chr NA
## .. ..$ :List of 14
## .. .. ..$ x : num [1:187] 10957 10988 11017 11048 11078 ...
## .. .. .. ..- attr(*, "apiSrc")= logi TRUE
## .. .. ..$ y : num [1:187] 464 668 849 847 1031 ...
## .. .. .. ..- attr(*, "apiSrc")= logi TRUE
## .. .. ..$ text : chr [1:187] "date: 2000-01-01<br />sales: 464<br />city: Collin County" "date: 2000-02-01<br />sales: 668<br />city: Collin County" "date: 2000-03-01<br />sales: 849<br />city: Collin County" "date: 2000-04-01<br />sales: 847<br />city: Collin County" ...
## .. .. .. ..- attr(*, "apiSrc")= logi TRUE
## .. .. ..$ type : chr "scatter"
## .. .. ..$ mode : chr "lines"
## .. .. ..$ line :List of 3
## .. .. .. ..$ width: num 1.89
## .. .. .. ..$ color: chr "rgba(153,168,0,1)"
## .. .. .. ..$ dash : chr "solid"
## .. .. ..$ hoveron : chr "points"
## .. .. ..$ name : chr "Collin County"
## .. .. ..$ legendgroup: chr "Collin County"
## .. .. ..$ showlegend : logi TRUE
## .. .. ..$ xaxis : chr "x"
## .. .. ..$ yaxis : chr "y"
## .. .. ..$ hoverinfo : chr "text"
## .. .. ..$ frame : chr NA
## .. ..$ :List of 14
## .. .. ..$ x : num [1:187] 10957 10988 11017 11048 11078 ...
## .. .. .. ..- attr(*, "apiSrc")= logi TRUE
## .. .. ..$ y : num [1:187] 182 219 351 288 317 339 287 398 307 274 ...
## .. .. .. ..- attr(*, "apiSrc")= logi TRUE
## .. .. ..$ text : chr [1:187] "date: 2000-01-01<br />sales: 182<br />city: Corpus Christi" "date: 2000-02-01<br />sales: 219<br />city: Corpus Christi" "date: 2000-03-01<br />sales: 351<br />city: Corpus Christi" "date: 2000-04-01<br />sales: 288<br />city: Corpus Christi" ...
## .. .. .. ..- attr(*, "apiSrc")= logi TRUE
## .. .. ..$ type : chr "scatter"
## .. .. ..$ mode : chr "lines"
## .. .. ..$ line :List of 3
## .. .. .. ..$ width: num 1.89
## .. .. .. ..$ color: chr "rgba(83,180,0,1)"
## .. .. .. ..$ dash : chr "solid"
## .. .. ..$ hoveron : chr "points"
## .. .. ..$ name : chr "Corpus Christi"
## .. .. ..$ legendgroup: chr "Corpus Christi"
## .. .. ..$ showlegend : logi TRUE
## .. .. ..$ xaxis : chr "x"
## .. .. ..$ yaxis : chr "y"
## .. .. ..$ hoverinfo : chr "text"
## .. .. ..$ frame : chr NA
## .. ..$ :List of 14
## .. .. ..$ x : num [1:187] 10957 10988 11017 11048 11078 ...
## .. .. .. ..- attr(*, "apiSrc")= logi TRUE
## .. .. ..$ y : num [1:187] 2286 3247 4244 3977 4545 ...
## .. .. .. ..- attr(*, "apiSrc")= logi TRUE
## .. .. ..$ text : chr [1:187] "date: 2000-01-01<br />sales: 2286<br />city: Dallas" "date: 2000-02-01<br />sales: 3247<br />city: Dallas" "date: 2000-03-01<br />sales: 4244<br />city: Dallas" "date: 2000-04-01<br />sales: 3977<br />city: Dallas" ...
## .. .. .. ..- attr(*, "apiSrc")= logi TRUE
## .. .. ..$ type : chr "scatter"
## .. .. ..$ mode : chr "lines"
## .. .. ..$ line :List of 3
## .. .. .. ..$ width: num 1.89
## .. .. .. ..$ color: chr "rgba(0,188,86,1)"
## .. .. .. ..$ dash : chr "solid"
## .. .. ..$ hoveron : chr "points"
## .. .. ..$ name : chr "Dallas"
## .. .. ..$ legendgroup: chr "Dallas"
## .. .. ..$ showlegend : logi TRUE
## .. .. ..$ xaxis : chr "x"
## .. .. ..$ yaxis : chr "y"
## .. .. ..$ hoverinfo : chr "text"
## .. .. ..$ frame : chr NA
## .. ..$ :List of 14
## .. .. ..$ x : num [1:187] 10957 10988 11017 11048 11078 ...
## .. .. .. ..- attr(*, "apiSrc")= logi TRUE
## .. .. ..$ y : num [1:187] 313 423 570 529 639 677 638 618 488 460 ...
## .. .. .. ..- attr(*, "apiSrc")= logi TRUE
## .. .. ..$ text : chr [1:187] "date: 2000-01-01<br />sales: 313<br />city: Denton County" "date: 2000-02-01<br />sales: 423<br />city: Denton County" "date: 2000-03-01<br />sales: 570<br />city: Denton County" "date: 2000-04-01<br />sales: 529<br />city: Denton County" ...
## .. .. .. ..- attr(*, "apiSrc")= logi TRUE
## .. .. ..$ type : chr "scatter"
## .. .. ..$ mode : chr "lines"
## .. .. ..$ line :List of 3
## .. .. .. ..$ width: num 1.89
## .. .. .. ..$ color: chr "rgba(0,192,148,1)"
## .. .. .. ..$ dash : chr "solid"
## .. .. ..$ hoveron : chr "points"
## .. .. ..$ name : chr "Denton County"
## .. .. ..$ legendgroup: chr "Denton County"
## .. .. ..$ showlegend : logi TRUE
## .. .. ..$ xaxis : chr "x"
## .. .. ..$ yaxis : chr "y"
## .. .. ..$ hoverinfo : chr "text"
## .. .. ..$ frame : chr NA
## .. ..$ :List of 14
## .. .. ..$ x : num [1:187] 10957 10988 11017 11048 11078 ...
## .. .. .. ..- attr(*, "apiSrc")= logi TRUE
## .. .. ..$ y : num [1:187] 306 346 492 382 459 486 422 538 382 392 ...
## .. .. .. ..- attr(*, "apiSrc")= logi TRUE
## .. .. ..$ text : chr [1:187] "date: 2000-01-01<br />sales: 306<br />city: El Paso" "date: 2000-02-01<br />sales: 346<br />city: El Paso" "date: 2000-03-01<br />sales: 492<br />city: El Paso" "date: 2000-04-01<br />sales: 382<br />city: El Paso" ...
## .. .. .. ..- attr(*, "apiSrc")= logi TRUE
## .. .. ..$ type : chr "scatter"
## .. .. ..$ mode : chr "lines"
## .. .. ..$ line :List of 3
## .. .. .. ..$ width: num 1.89
## .. .. .. ..$ color: chr "rgba(0,191,196,1)"
## .. .. .. ..$ dash : chr "solid"
## .. .. ..$ hoveron : chr "points"
## .. .. ..$ name : chr "El Paso"
## .. .. ..$ legendgroup: chr "El Paso"
## .. .. ..$ showlegend : logi TRUE
## .. .. ..$ xaxis : chr "x"
## .. .. ..$ yaxis : chr "y"
## .. .. ..$ hoverinfo : chr "text"
## .. .. ..$ frame : chr NA
## .. ..$ :List of 14
## .. .. ..$ x : num [1:187] 10957 10988 11017 11048 11078 ...
## .. .. .. ..- attr(*, "apiSrc")= logi TRUE
## .. .. ..$ y : num [1:187] 343 466 657 593 735 790 753 717 593 547 ...
## .. .. .. ..- attr(*, "apiSrc")= logi TRUE
## .. .. ..$ text : chr [1:187] "date: 2000-01-01<br />sales: 343<br />city: Fort Bend" "date: 2000-02-01<br />sales: 466<br />city: Fort Bend" "date: 2000-03-01<br />sales: 657<br />city: Fort Bend" "date: 2000-04-01<br />sales: 593<br />city: Fort Bend" ...
## .. .. .. ..- attr(*, "apiSrc")= logi TRUE
## .. .. ..$ type : chr "scatter"
## .. .. ..$ mode : chr "lines"
## .. .. ..$ line :List of 3
## .. .. .. ..$ width: num 1.89
## .. .. .. ..$ color: chr "rgba(0,182,235,1)"
## .. .. .. ..$ dash : chr "solid"
## .. .. ..$ hoveron : chr "points"
## .. .. ..$ name : chr "Fort Bend"
## .. .. ..$ legendgroup: chr "Fort Bend"
## .. .. ..$ showlegend : logi TRUE
## .. .. ..$ xaxis : chr "x"
## .. .. ..$ yaxis : chr "y"
## .. .. ..$ hoverinfo : chr "text"
## .. .. ..$ frame : chr NA
## .. ..$ :List of 14
## .. .. ..$ x : num [1:187] 10957 10988 11017 11048 11078 ...
## .. .. .. ..- attr(*, "apiSrc")= logi TRUE
## .. .. ..$ y : num [1:187] 325 469 588 487 630 648 548 638 524 539 ...
## .. .. .. ..- attr(*, "apiSrc")= logi TRUE
## .. .. ..$ text : chr [1:187] "date: 2000-01-01<br />sales: 325<br />city: Fort Worth" "date: 2000-02-01<br />sales: 469<br />city: Fort Worth" "date: 2000-03-01<br />sales: 588<br />city: Fort Worth" "date: 2000-04-01<br />sales: 487<br />city: Fort Worth" ...
## .. .. .. ..- attr(*, "apiSrc")= logi TRUE
## .. .. ..$ type : chr "scatter"
## .. .. ..$ mode : chr "lines"
## .. .. ..$ line :List of 3
## .. .. .. ..$ width: num 1.89
## .. .. .. ..$ color: chr "rgba(6,164,255,1)"
## .. .. .. ..$ dash : chr "solid"
## .. .. ..$ hoveron : chr "points"
## .. .. ..$ name : chr "Fort Worth"
## .. .. ..$ legendgroup: chr "Fort Worth"
## .. .. ..$ showlegend : logi TRUE
## .. .. ..$ xaxis : chr "x"
## .. .. ..$ yaxis : chr "y"
## .. .. ..$ hoverinfo : chr "text"
## .. .. ..$ frame : chr NA
## .. ..$ :List of 14
## .. .. ..$ x : num [1:187] 10957 10988 11017 11048 11078 ...
## .. .. .. ..- attr(*, "apiSrc")= logi TRUE
## .. .. ..$ y : num [1:187] 2653 3687 4733 4364 5215 ...
## .. .. .. ..- attr(*, "apiSrc")= logi TRUE
## .. .. ..$ text : chr [1:187] "date: 2000-01-01<br />sales: 2653<br />city: Houston" "date: 2000-02-01<br />sales: 3687<br />city: Houston" "date: 2000-03-01<br />sales: 4733<br />city: Houston" "date: 2000-04-01<br />sales: 4364<br />city: Houston" ...
## .. .. .. ..- attr(*, "apiSrc")= logi TRUE
## .. .. ..$ type : chr "scatter"
## .. .. ..$ mode : chr "lines"
## .. .. ..$ line :List of 3
## .. .. .. ..$ width: num 1.89
## .. .. .. ..$ color: chr "rgba(165,138,255,1)"
## .. .. .. ..$ dash : chr "solid"
## .. .. ..$ hoveron : chr "points"
## .. .. ..$ name : chr "Houston"
## .. .. ..$ legendgroup: chr "Houston"
## .. .. ..$ showlegend : logi TRUE
## .. .. ..$ xaxis : chr "x"
## .. .. ..$ yaxis : chr "y"
## .. .. ..$ hoverinfo : chr "text"
## .. .. ..$ frame : chr NA
## .. ..$ :List of 14
## .. .. ..$ x : num [1:187] 10957 10988 11017 11048 11078 ...
## .. .. .. ..- attr(*, "apiSrc")= logi TRUE
## .. .. ..$ y : num [1:187] 259 309 420 383 427 492 463 460 346 321 ...
## .. .. .. ..- attr(*, "apiSrc")= logi TRUE
## .. .. ..$ text : chr [1:187] "date: 2000-01-01<br />sales: 259<br />city: Montgomery County" "date: 2000-02-01<br />sales: 309<br />city: Montgomery County" "date: 2000-03-01<br />sales: 420<br />city: Montgomery County" "date: 2000-04-01<br />sales: 383<br />city: Montgomery County" ...
## .. .. .. ..- attr(*, "apiSrc")= logi TRUE
## .. .. ..$ type : chr "scatter"
## .. .. ..$ mode : chr "lines"
## .. .. ..$ line :List of 3
## .. .. .. ..$ width: num 1.89
## .. .. .. ..$ color: chr "rgba(223,112,248,1)"
## .. .. .. ..$ dash : chr "solid"
## .. .. ..$ hoveron : chr "points"
## .. .. ..$ name : chr "Montgomery County"
## .. .. ..$ legendgroup: chr "Montgomery County"
## .. .. ..$ showlegend : logi TRUE
## .. .. ..$ xaxis : chr "x"
## .. .. ..$ yaxis : chr "y"
## .. .. ..$ hoverinfo : chr "text"
## .. .. ..$ frame : chr NA
## .. ..$ :List of 14
## .. .. ..$ x : num [1:187] 10957 10988 11017 11048 11078 ...
## .. .. .. ..- attr(*, "apiSrc")= logi TRUE
## .. .. ..$ y : num [1:187] 344 531 717 590 746 727 686 717 551 556 ...
## .. .. .. ..- attr(*, "apiSrc")= logi TRUE
## .. .. ..$ text : chr [1:187] "date: 2000-01-01<br />sales: 344<br />city: NE Tarrant County" "date: 2000-02-01<br />sales: 531<br />city: NE Tarrant County" "date: 2000-03-01<br />sales: 717<br />city: NE Tarrant County" "date: 2000-04-01<br />sales: 590<br />city: NE Tarrant County" ...
## .. .. .. ..- attr(*, "apiSrc")= logi TRUE
## .. .. ..$ type : chr "scatter"
## .. .. ..$ mode : chr "lines"
## .. .. ..$ line :List of 3
## .. .. .. ..$ width: num 1.89
## .. .. .. ..$ color: chr "rgba(251,97,215,1)"
## .. .. .. ..$ dash : chr "solid"
## .. .. ..$ hoveron : chr "points"
## .. .. ..$ name : chr "NE Tarrant County"
## .. .. ..$ legendgroup: chr "NE Tarrant County"
## .. .. ..$ showlegend : logi TRUE
## .. .. ..$ xaxis : chr "x"
## .. .. ..$ yaxis : chr "y"
## .. .. ..$ hoverinfo : chr "text"
## .. .. ..$ frame : chr NA
## .. ..$ :List of 14
## .. .. ..$ x : num [1:187] 10957 10988 11017 11048 11078 ...
## .. .. .. ..- attr(*, "apiSrc")= logi TRUE
## .. .. ..$ y : num [1:187] 820 1075 1433 1263 1574 ...
## .. .. .. ..- attr(*, "apiSrc")= logi TRUE
## .. .. ..$ text : chr [1:187] "date: 2000-01-01<br />sales: 820<br />city: San Antonio" "date: 2000-02-01<br />sales: 1075<br />city: San Antonio" "date: 2000-03-01<br />sales: 1433<br />city: San Antonio" "date: 2000-04-01<br />sales: 1263<br />city: San Antonio" ...
## .. .. .. ..- attr(*, "apiSrc")= logi TRUE
## .. .. ..$ type : chr "scatter"
## .. .. ..$ mode : chr "lines"
## .. .. ..$ line :List of 3
## .. .. .. ..$ width: num 1.89
## .. .. .. ..$ color: chr "rgba(255,102,168,1)"
## .. .. .. ..$ dash : chr "solid"
## .. .. ..$ hoveron : chr "points"
## .. .. ..$ name : chr "San Antonio"
## .. .. ..$ legendgroup: chr "San Antonio"
## .. .. ..$ showlegend : logi TRUE
## .. .. ..$ xaxis : chr "x"
## .. .. ..$ yaxis : chr "y"
## .. .. ..$ hoverinfo : chr "text"
## .. .. ..$ frame : chr NA
## ..$ layout :List of 10
## .. ..$ margin :List of 4
## .. .. ..$ t: num 26.2
## .. .. ..$ r: num 7.31
## .. .. ..$ b: num 40.4
## .. .. ..$ l: num 48.9
## .. ..$ font :List of 3
## .. .. ..$ color : chr "rgba(0,0,0,1)"
## .. .. ..$ family: chr ""
## .. .. ..$ size : num 14.6
## .. ..$ xaxis :List of 28
## .. .. ..$ domain : num [1:2] 0 1
## .. .. ..$ automargin : logi TRUE
## .. .. ..$ type : chr "linear"
## .. .. ..$ autorange : logi FALSE
## .. .. ..$ range : num [1:2] 10674 16900
## .. .. ..$ tickmode : chr "array"
## .. .. ..$ ticktext : chr [1:4] "2000" "2005" "2010" "2015"
## .. .. ..$ tickvals : Named num [1:4] 10957 12784 14610 16436
## .. .. .. ..- attr(*, "names")= chr [1:4] "2000" "2005" "2010" "2015"
## .. .. ..$ categoryorder : chr "array"
## .. .. ..$ categoryarray : chr [1:4] "2000" "2005" "2010" "2015"
## .. .. ..$ nticks : logi NA
## .. .. ..$ ticks : chr ""
## .. .. ..$ tickcolor : logi NA
## .. .. ..$ ticklen : num 3.65
## .. .. ..$ tickwidth : num 0
## .. .. ..$ showticklabels: logi TRUE
## .. .. ..$ tickfont :List of 3
## .. .. .. ..$ color : chr "rgba(77,77,77,1)"
## .. .. .. ..$ family: chr ""
## .. .. .. ..$ size : num 12
## .. .. ..$ tickangle : num -60
## .. .. ..$ showline : logi FALSE
## .. .. ..$ linecolor : logi NA
## .. .. ..$ linewidth : num 0
## .. .. ..$ showgrid : logi FALSE
## .. .. ..$ gridcolor : logi NA
## .. .. ..$ gridwidth : num 0
## .. .. ..$ zeroline : logi FALSE
## .. .. ..$ anchor : chr "y"
## .. .. ..$ title :List of 2
## .. .. .. ..$ text: chr "date"
## .. .. .. ..$ font:List of 3
## .. .. .. .. ..$ color : chr "rgba(0,0,0,1)"
## .. .. .. .. ..$ family: chr ""
## .. .. .. .. ..$ size : num 14.6
## .. .. ..$ hoverformat : chr ".2f"
## .. ..$ yaxis :List of 28
## .. .. ..$ domain : num [1:2] 0 1
## .. .. ..$ automargin : logi TRUE
## .. .. ..$ type : chr "linear"
## .. .. ..$ autorange : logi FALSE
## .. .. ..$ range : num [1:2] -281 9384
## .. .. ..$ tickmode : chr "array"
## .. .. ..$ ticktext : chr [1:4] "0" "2500" "5000" "7500"
## .. .. ..$ tickvals : num [1:4] 0 2500 5000 7500
## .. .. ..$ categoryorder : chr "array"
## .. .. ..$ categoryarray : chr [1:4] "0" "2500" "5000" "7500"
## .. .. ..$ nticks : logi NA
## .. .. ..$ ticks : chr ""
## .. .. ..$ tickcolor : logi NA
## .. .. ..$ ticklen : num 3.65
## .. .. ..$ tickwidth : num 0
## .. .. ..$ showticklabels: logi TRUE
## .. .. ..$ tickfont :List of 3
## .. .. .. ..$ color : chr "rgba(77,77,77,1)"
## .. .. .. ..$ family: chr ""
## .. .. .. ..$ size : num 11.7
## .. .. ..$ tickangle : num 0
## .. .. ..$ showline : logi FALSE
## .. .. ..$ linecolor : logi NA
## .. .. ..$ linewidth : num 0
## .. .. ..$ showgrid : logi TRUE
## .. .. ..$ gridcolor : chr "rgba(235,235,235,1)"
## .. .. ..$ gridwidth : num 0.664
## .. .. ..$ zeroline : logi FALSE
## .. .. ..$ anchor : chr "x"
## .. .. ..$ title :List of 2
## .. .. .. ..$ text: chr "sales"
## .. .. .. ..$ font:List of 3
## .. .. .. .. ..$ color : chr "rgba(0,0,0,1)"
## .. .. .. .. ..$ family: chr ""
## .. .. .. .. ..$ size : num 14.6
## .. .. ..$ hoverformat : chr ".2f"
## .. ..$ shapes :List of 1
## .. .. ..$ :List of 9
## .. .. .. ..$ type : chr "rect"
## .. .. .. ..$ fillcolor: logi NA
## .. .. .. ..$ line :List of 3
## .. .. .. .. ..$ color : logi NA
## .. .. .. .. ..$ width : num 0
## .. .. .. .. ..$ linetype: chr(0)
## .. .. .. ..$ yref : chr "paper"
## .. .. .. ..$ xref : chr "paper"
## .. .. .. ..$ x0 : num 0
## .. .. .. ..$ x1 : num 1
## .. .. .. ..$ y0 : num 0
## .. .. .. ..$ y1 : num 1
## .. ..$ showlegend : logi TRUE
## .. ..$ legend :List of 5
## .. .. ..$ bgcolor : logi NA
## .. .. ..$ bordercolor: logi NA
## .. .. ..$ borderwidth: num 0
## .. .. ..$ font :List of 3
## .. .. .. ..$ color : chr "rgba(0,0,0,1)"
## .. .. .. ..$ family: chr ""
## .. .. .. ..$ size : num 11.7
## .. .. ..$ y : num 0.968
## .. ..$ annotations:List of 1
## .. .. ..$ :List of 13
## .. .. .. ..$ text : chr "city"
## .. .. .. ..$ x : num 1.02
## .. .. .. ..$ y : num 1
## .. .. .. ..$ showarrow : logi FALSE
## .. .. .. ..$ ax : num 0
## .. .. .. ..$ ay : num 0
## .. .. .. ..$ font :List of 3
## .. .. .. .. ..$ color : chr "rgba(0,0,0,1)"
## .. .. .. .. ..$ family: chr ""
## .. .. .. .. ..$ size : num 14.6
## .. .. .. ..$ xref : chr "paper"
## .. .. .. ..$ yref : chr "paper"
## .. .. .. ..$ textangle : num 0
## .. .. .. ..$ xanchor : chr "left"
## .. .. .. ..$ yanchor : chr "bottom"
## .. .. .. ..$ legendTitle: logi TRUE
## .. ..$ hovermode : chr "closest"
## .. ..$ barmode : chr "relative"
## ..$ config :List of 2
## .. ..$ doubleClick : chr "reset"
## .. ..$ showSendToCloud: logi FALSE
## ..$ source : chr "A"
## ..$ attrs :List of 1
## .. ..$ 4ac434442cfd:List of 4
## .. .. ..$ x :Class 'formula' language ~~date
## .. .. .. .. ..- attr(*, ".Environment")=<environment: 0x00000000236c34f8>
## .. .. ..$ y :Class 'formula' language ~~sales
## .. .. .. .. ..- attr(*, ".Environment")=<environment: 0x00000000236c34f8>
## .. .. ..$ colour:Class 'formula' language ~~city
## .. .. .. .. ..- attr(*, ".Environment")=<environment: 0x00000000236c34f8>
## .. .. ..$ type : chr "scatter"
## .. .. ..- attr(*, "class")= chr "plotly_eval"
## ..$ cur_data : chr "4ac434442cfd"
## ..$ visdat :List of 1
## .. ..$ 4ac434442cfd:function (y)
## ..$ highlight :List of 7
## .. ..$ on : chr "plotly_click"
## .. ..$ persistent: logi FALSE
## .. ..$ dynamic : logi FALSE
## .. ..$ selectize : logi FALSE
## .. ..$ opacityDim: num 0.2
## .. ..$ selected :List of 1
## .. .. ..$ opacity: num 1
## .. ..$ debounce : num 0
## ..$ shinyEvents: chr [1:11] "plotly_hover" "plotly_click" "plotly_selected" "plotly_relayout" ...
## ..$ base_url : chr "https://plot.ly"
## ..- attr(*, "TOJSON_FUNC")=function (x, ...)
## $ width : NULL
## $ height : NULL
## $ sizingPolicy :List of 6
## ..$ defaultWidth : chr "100%"
## ..$ defaultHeight: num 400
## ..$ padding : NULL
## ..$ viewer :List of 6
## .. ..$ defaultWidth : NULL
## .. ..$ defaultHeight: NULL
## .. ..$ padding : NULL
## .. ..$ fill : logi TRUE
## .. ..$ suppress : logi FALSE
## .. ..$ paneHeight : NULL
## ..$ browser :List of 5
## .. ..$ defaultWidth : NULL
## .. ..$ defaultHeight: NULL
## .. ..$ padding : NULL
## .. ..$ fill : logi TRUE
## .. ..$ external : logi FALSE
## ..$ knitr :List of 3
## .. ..$ defaultWidth : NULL
## .. ..$ defaultHeight: NULL
## .. ..$ figure : logi TRUE
## $ dependencies :List of 5
## ..$ :List of 10
## .. ..$ name : chr "typedarray"
## .. ..$ version : chr "0.1"
## .. ..$ src :List of 1
## .. .. ..$ file: chr "htmlwidgets/lib/typedarray"
## .. ..$ meta : NULL
## .. ..$ script : chr "typedarray.min.js"
## .. ..$ stylesheet: NULL
## .. ..$ head : NULL
## .. ..$ attachment: NULL
## .. ..$ package : chr "plotly"
## .. ..$ all_files : logi FALSE
## .. ..- attr(*, "class")= chr "html_dependency"
## ..$ :List of 10
## .. ..$ name : chr "jquery"
## .. ..$ version : chr "1.11.3"
## .. ..$ src :List of 1
## .. .. ..$ file: chr "C:/Users/lexybill/OneDrive/Documents/R/win-library/3.6/crosstalk/lib/jquery"
## .. ..$ meta : NULL
## .. ..$ script : chr "jquery.min.js"
## .. ..$ stylesheet: NULL
## .. ..$ head : NULL
## .. ..$ attachment: NULL
## .. ..$ package : NULL
## .. ..$ all_files : logi TRUE
## .. ..- attr(*, "class")= chr "html_dependency"
## ..$ :List of 10
## .. ..$ name : chr "crosstalk"
## .. ..$ version : chr "1.0.0"
## .. ..$ src :List of 1
## .. .. ..$ file: chr "C:/Users/lexybill/OneDrive/Documents/R/win-library/3.6/crosstalk/www"
## .. ..$ meta : NULL
## .. ..$ script : chr "js/crosstalk.min.js"
## .. ..$ stylesheet: chr "css/crosstalk.css"
## .. ..$ head : NULL
## .. ..$ attachment: NULL
## .. ..$ package : NULL
## .. ..$ all_files : logi TRUE
## .. ..- attr(*, "class")= chr "html_dependency"
## ..$ :List of 10
## .. ..$ name : chr "plotly-htmlwidgets-css"
## .. ..$ version : chr "1.49.4"
## .. ..$ src :List of 1
## .. .. ..$ file: chr "htmlwidgets/lib/plotlyjs"
## .. ..$ meta : NULL
## .. ..$ script : NULL
## .. ..$ stylesheet: chr "plotly-htmlwidgets.css"
## .. ..$ head : NULL
## .. ..$ attachment: NULL
## .. ..$ package : chr "plotly"
## .. ..$ all_files : logi FALSE
## .. ..- attr(*, "class")= chr "html_dependency"
## ..$ :List of 10
## .. ..$ name : chr "plotly-main"
## .. ..$ version : chr "1.49.4"
## .. ..$ src :List of 1
## .. .. ..$ file: chr "htmlwidgets/lib/plotlyjs"
## .. ..$ meta : NULL
## .. ..$ script : chr "plotly-latest.min.js"
## .. ..$ stylesheet: NULL
## .. ..$ head : NULL
## .. ..$ attachment: NULL
## .. ..$ package : chr "plotly"
## .. ..$ all_files : logi FALSE
## .. ..- attr(*, "class")= chr "html_dependency"
## $ elementId : NULL
## $ preRenderHook:function (p, registerFrames = TRUE)
## $ jsHooks : list()
## - attr(*, "class")= chr [1:2] "plotly" "htmlwidget"
## - attr(*, "package")= chr "plotly"In the code below we set the font size of the x-axis to 42. We found this font setting by browsing the object structure of
p_buildwithutils::str()in the tree shown above.Then, to create the code that alters the value we have found with
str(), put a$at the end ofp_buildin the console and hit the tab key. It shows all the named elements of the first nested level. We can then work our way down the nested levels by adding dollar signs to the next level and hitting tab. Repeat this until you have worked your way to the bottom of the tree and found the setting you want to change.
The code above has changed the font size to a massive 42 in the chart above. However, this dollar and tab key method to search through the named elements of the nested plotly object is fiddly and time-consuming. The gif below shows an easier Point and Click method. This feature is only available in RStudio versions from 1.1.383 onwards.
To do this, in the Environment pane click on the magnifying glass to the right of p_build. You can then expand the nested lists as a tree. Browse the tree to find the value you want to change. To the right of each value at the bottom of the tree is an icon. Clicking on the icon will automatically generate the code you need to alter that value. Below is example code generated by this PaC method.
p_build[["x"]][["layout"]][["xaxis"]][["tickfont"]][["size"]]
- And here is how we alter that code to change the font size to 42 as we did with the dollar and tab method previously.
p_build[["x"]][["layout"]][["xaxis"]][["tickfont"]][["size"]] = 42
6.3 Plotly basic
Sometimes even passing a ggplot object through
plotly::plotly_build()does not create the plot we want. Or it’s just too time-consuming to edit the plot in this way. Using plotly itself can be a better option.Plotly is very forgiving. Below we don’t tell plotly what kind of chart we want (such as points or lines) but it still creates a plot. And plotly picks our friend from ggplot, a data points plot. Plotly also generates lots of suggestions to improve the plot.
## No trace type specified:
## Based on info supplied, a 'scatter' trace seems appropriate.
## Read more about this trace type -> https://plot.ly/r/reference/#scatter## No scatter mode specifed:
## Setting the mode to markers
## Read more about this attribute -> https://plot.ly/r/reference/#scatter-mode6.4 plotly (a few more settings)
- With a few more settings we can turn it into a plotly line plot.
6.5 plotly (bells & whistles)
- Two more bells and whistles we can add are specifying the colour of the lines and an interactive range slider on the x-axis.
df_red %>%
plotly::plot_ly(x = ~date,
y = ~sales,
text = rownames(df_red)) %>%
add_lines(color = ~city,
colorscale = "set3") %>%
rangeslider() Carson Sievert has created lots of “bells and whistles” plotly plots on the same Texas housing data in his Plotly book. And a few more creative plots here on the Texas data.
Below we reproduce some of Sievert’s plots after re-formatting his code according to our three Code style rules described earlier. It makes his examples easier to understand and re-use.
In this plot try clicking on one of the lines to highlight one city against all the other cities.
# declare `city` as the SQL 'query by' column
tx <-
plotly::highlight_key(data = df,
key = ~city)
# initiate a plotly object
base <-
plotly::plot_ly(data = tx,
color = I("black")) %>%
dplyr::group_by(city)
# create a time series of median house price
base %>%
dplyr::group_by(city) %>%
plotly::add_lines(x = ~date, y = ~median)- In this plot we can look at cities in isolation as well as highlighted against all others.
# generally speaking, use a "unique" key for filter,
# especially when you have multiple filters!
tx <- plotly::highlight_key(df)
gg <- tx %>%
ggplot2::ggplot() +
ggplot2::aes(x = date,
y = median,
group = city) +
ggplot2::geom_line()
filter <-
crosstalk::bscols(
crosstalk::filter_select("id", "Select a city", tx, ~city),
plotly::ggplotly(gg,
dynamicTicks = TRUE),
widths = c(12, 12)
)## Warning in crosstalk::bscols(crosstalk::filter_select("id", "Select a city", :
## Sum of bscol width units is greater than 12tx2 <- plotly::highlight_key(data = df,
key = ~city,
"Select a city")
gg <- tx2 %>%
ggplot2::ggplot() +
ggplot2::aes(x = date,
y = median,
group = city) +
ggplot2::geom_line()
select <-
plotly::highlight(
plotly::ggplotly(gg,
tooltip = "city"),
selectize = TRUE,
persistent = TRUE
)## We recommend setting `persistent` to `FALSE` (the default) because persistent selection mode can now be used by holding the shift key (while triggering the `on` event).## Setting the `off` event (i.e., 'plotly_doubleclick') to match the `on` event (i.e., 'plotly_click'). You can change this default via the `highlight()` function.- In this final example Carson adds lots more interactivity to play with.
tx <- plotly::highlight_key(df)
widgets <-
crosstalk::bscols(
widths = c(12, 12, 12),
crosstalk::filter_select(id = "city",
label = "Cities",
sharedData = tx,
group = ~city),
crosstalk::filter_slider(id = "sales",
label = "Sales",
sharedData = tx,
column = ~sales),
crosstalk::filter_checkbox(id = "year",
label = "Years",
sharedData = tx,
group = ~year,
inline = TRUE)
)## Warning in crosstalk::bscols(widths = c(12, 12, 12), crosstalk::filter_select(id
## = "city", : Sum of bscol width units is greater than 12crosstalk::bscols(
widths = c(4, 8),
widgets,
plotly::plot_ly(data = tx,
x = ~date,
y = ~median,
showlegend = FALSE) %>%
plotly::add_lines(color = ~city,
colors = "black")
)6.6 crosstalk
Finally, here is a more basic use of crosstalk with plotly that you may find easier to re-use on your data.
df_crosstalk <- crosstalk::SharedData$new(data = df,
key = ~year)
crosstalk::filter_select(
id = "year",
label = "Select a year",
allLevels = TRUE,
multiple = FALSE,
sharedData = df_crosstalk,
group = ~ factor(year)
)6.7 apexcharter basic
The highcharter package creates interactive charts to the quality you often see on newspaper websites. It can produce great data visualisations like these poll tracking plots. However, highcharter not free to use.
ApexCharter is almost as good. It’s inspired by highcharter, and it is free to use. Look how easily we can create a chart with this simple code.
6.8 apexcharter (bells & whistles)
- To add bells and whistles use the apexcharter reference, It is well laid out with good examples. Below I’ve added several useful settings in a clear code format for you to re-use.
df_red %>%
apexcharter::apex(aes(x = date,
y = sales,
group = city),
type = "line") %>%
apexcharter::ax_legend(position = "right") %>%
apexcharter::ax_stroke(width = 2) %>%
apexcharter::ax_yaxis(title = list(text = "Sales")) %>%
apexcharter::ax_xaxis(labels = list(format = "yyyy")) %>%
apexcharter::ax_labs(title = "House sales in Texas cities",
subtitle = "this is a subtitle") %>%
apexcharter::ax_title(style = list(fontSize = "22px")) %>%
apexcharter::ax_subtitle(style = list(fontSize = "16px",
color = "#BDBDBD")) %>%
apexcharter::ax_chart(zoom = list(enabled = TRUE,
type = "xy")) 6.9 dygraphs basic
- Dygraphs are another great choice for time series data. Dygraphs require the dataframe to be a time series object. One quick way to convert to a time series object is the tsbox package.
6.10 dygraphs (bells & whistles)
Below is a bells & whistles version you can play around with as a code template for your own data.
The help pages for dygraphs are well laid out. You really only need this one guide to find out how to change all of dygraphs settings.
dateWindow <- c("2014-01-01", "2015-07-01")
presAnnotation <- function(dygraph, x, text) {
dygraph %>%
dyAnnotation(x, text, width = 60)
}
presBankHolidays <- function(dygraph) {
dygraph %>%
dyEvent("2014-07-03", "Independence Day", labelLoc = "bottom") %>%
dyEvent("2014-11-26", "Thanksgiving", labelLoc = "bottom")
}
df_red_ts %>%
dygraphs::dygraph(main = "House sales in Texas cities") %>%
# https://github.com/rstudio/dygraphs/issues/80
dyAxis(
"y",
label = "Sales",
# http://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript
valueFormatter = 'function(d){return d.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, ",");}',
axisLabelFormatter = 'function(d){return d.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, ",");}',
axisLabelFontSize = 10,
axisLabelWidth = 70
) %>%
dyRangeSelector(
height = 60,
dateWindow = dateWindow
) %>%
dyShading(
from = "2014-1-1",
to = "2014-12-31"
) %>%
presBankHolidays() %>%
dyLegend(width = 600) %>%
presAnnotation("2014-07-01", text = "2014") %>%
presAnnotation("2015-06-01", text = "2015") %>%
dyOptions(colors = RColorBrewer::brewer.pal(8, "Set2")) %>%
dyOptions(drawPoints = TRUE, pointSize = 2) %>%
dyLegend(
show = "always",
hideOnMouseOut = FALSE
)