figure-refs.Rmd

<!--
Use text references as workaround for fig.cap not correctly parsing markdown
https://github.com/yihui/bookdown-crc/issues/3
-->

<!-- 
  introduction.Rmd 
-->


(ref:mpg-lasso) Linked brushing in a scatterplot to query more information about points of interest. By lasso selecting a region of unusual points, we learn that the corvette model has unusually high miles per gallon considering the engine size. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/mpg-lasso>."` For the interactive, see <https://plotly-r.com/interactives/mpg-lasso.html>

(ref:workflow) The stages of a data science workflow from @r4ds.

(ref:mpg-static) A scatterplot of engine displacement versus miles per gallon made with the **ggplot2** package.

(ref:mpg-mark-hull) Using the **ggforce** package to annotate the corvettes in this dataset.

(ref:intro-show-hide-preview) An example of what you'll learn: Figure \@ref(fig:intro-show-hide). `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/intro-show-hide>."` For the interactive, see <https://plotly-r.com/interactives/intro-show-hide.html>

(ref:storms-preview) An example of what you'll learn: Figure \@ref(fig:storms). `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/storms-preview>."` For the interactive, see <https://plotly-r.com/interactives/storms.html>

(ref:shiny-crossfilter-preview) An example of what you'll learn: Figure \@ref(fig:shiny-crossfilter). `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/shiny-crossfilter>."` For the interactive, see <https://plotly-r.com/interactives/shiny-crossfilter.html>


<!-- 
  creating-overview.Rmd 
-->


(ref:intro-defaults) Three examples of visualizing categorical data with `plot_ly()`: (top) mapping `cut` to `x` yields a bar chart, (middle) mapping `cut` & `clarity` to `x` & `y` yields a heatmap, and (bottom) mapping `cut` & `clarity` to `x` & `color` yields a dodged bar chart.

(ref:color-mapping) Mapping data values to a visual color range.

(ref:intro-range) Using `I()` to supply visual properties directly instead of mapping values to a visual range. In the top portion of this figure, the value `'black'` is being mapped to a visual range spanned by `colors` (which, for discrete data, defaults to `'Set2'`).

(ref:intro-dplyr) Using `add_histogram()`, `add_text()`, and **dplyr** verbs to compose a plot that leverages a raw form of the data (e.g., histogram) as well as a summarized version (e.g., text labels).

(ref:intro-printing) A diagram of what happens when you print a **plotly** graph.

(ref:intro-json) A portion of the JSON data behind the bottom plot of Figure \@ref(fig:intro-defaults). This dodged bar chart has eight layers of data (i.e., eight traces), one for each level of `clarity`.

(ref:intro-show-hide) Leveraging two interactive features that require one trace per level of `clarity`: (1) Using 'Compare data on hover' mode to get counts for every level of `clarity` for a given level of `cut`, and (2) using the ability to hide/show clarity levels via their legend entries. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/intro-show-hide-preview>."` For the interactive, see <https://plotly-r.com/interactives/intro-show-hide.html>

(ref:hexbin)  A hexbin plot of diamond carat versus price.

(ref:freqpoly) Frequency polygons of diamond price by diamond clarity. This visualization indicates there may be significant main effects.

(ref:freqpoly-facet) Diamond price by clarity and cut. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/freqpoly-facet>."` For the interactive, see <https://plotly-r.com/interactives/freqpoly-facet.html>

(ref:geom-sina) A sina plot of diamond price by clarity and cut.

(ref:geom-sina-resid) A sina plot of diamond price by clarity and cut, after accounting for carat.

(ref:ggally) Zooming in on a coefficient plot generated from the `ggcoef()` function from the **GGally** package. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/GGally>."` For the interactive, see <https://plotly-r.com/interactives/ggally.html>

(ref:naniar) Using the `geom_miss_point()` function from the **naniar** package to visualize missing values in relation to non-missing values. Missing values are shown in red.


<!-- 
  creating-scatter.Rmd 
-->


(ref:scatter-intro) The difference between `add_paths()` and `add_lines()`: The top panel connects observations according to the ordering of `psavert` (personal savings rate), whereas the bottom panel connects observations according to the ordering of `x` (the date).

(ref:scatter-lines) Drawing multiple lines using **dplyr** groups (top panel) versus a categorical `color` mapping (bottom panel). Comparatively speaking, the bottom panel has more interactive capabilities (e.g., legend-based filtering and multiple tooltips), but it does not scale as well with many lines. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/scatter-lines>."` For the interactive, see <https://plotly-r.com/interactives/scatter-lines.html>

(ref:tooltip-praise) Using the generic `add_trace()` function to render markers, lines, and text in a single scatter trace. This `add_trace()` function, as well as any `add_*()` function allows you to directly specify plotly.js attributes.

(ref:schema) Using `schema()` function to traverse through the attributes available to a given trace type (e.g., scatter).

(ref:scatterplots) Combating overplotting in a scatterplot with alpha blending.

(ref:color-types) Variations on a numeric color mapping.

(ref:color-numeric) Three variations on a numeric color mapping.

(ref:color-discrete) Three variations on a discrete color mapping.

(ref:color-manual) Setting a fixed color directly using `I()`.

(ref:symbol-factor) Mapping symbol to a numeric variable (left panel) and a factor (right panel).

(ref:symbol-factor-range) Specifying the visual range of `symbols`.

(ref:symbol-factor-manual) Setting a fixed symbol directly using `I()`.

(ref:stroke-manual) Using `stroke` and `span` to control the outline color as well as the width of that outline.

(ref:sizes) Controlling the size range via `sizes` (measured in pixels).

(ref:sizes-manual) Setting a fixed marker size directly using `marker.size`.

(ref:coefplot) A coefficient plot.

(ref:linetypes) Using `color` and/or `linetype` to differentiate groups of lines.

(ref:linetypes-manual) Providing a named character vector to linetypes in order to control exactly what linetype gets mapped to which city.

(ref:slopegraph) Interactively editing the label positioning in a slopegraph. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/Slopegraph>."` For the interactive, see <https://plotly-r.com/interactives/slopegraph.html>

(ref:dumbell) A dumbell chart of mile per gallon city vs. highway by model of car.

(ref:candlestick) A candlestick chart built with `add_segments()`. Note how the `color` mapping, which is a logical vector (`TRUE` if the closing value was higher than opening), creates two traces: a red trace indicating a drop in price and a green trace indicating a rise in price.

(ref:densities) Various kernel density estimates.

(ref:pcp-common) Parallel coordinate plots of the Iris dataset. The top panel shows all variables on a common scale. The middle panel scales each variable to have mean of 0 and standard deviation of 1. In the bottom panel, each variable is scaled to have a minimum of 0 and a maximum of 1.

(ref:map-canada) Using `add_polygons()` to make a map of Canada and major Canadian cities via data provided by the **maps** package.

(ref:map-canada-split) Using `split` to render polygons with different fills and interactive properties.

(ref:broom-lm) Plotting fitted values and uncertainty bounds of a linear model via the **broom** package.


<!-- 
  creating-maps.Rmd 
-->


(ref:mapbox-bubble) A mapbox powered bubble chart showing the population of various cities in Canada. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/mapbox-bubble>."` For the interactive, see <https://plotly-r.com/interactives/mapbox-bubble.html>

(ref:satellite) Zooming in on earth satellite imagery using `plot_mapbox()`. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/mapbox-satellite>."` For the interactive, see <https://plotly-r.com/interactives/satellite.html>

(ref:mapbox-style-dropdown) Providing a dropdown menu to control the styling of the mapbox baselayer. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/mapbox-style-dropdown>."` For the interactive, see <https://plotly-r.com/interactives/mapbox-style-dropdown.html>

(ref:geo-flights) Using the integrated orthographic projection to visualize flight patterns on a '3D' globe. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/geo-flights>."` For the interactive, see <https://plotly-r.com/interactives/geo-flights.html>

(ref:maps) A comparison of **plotly**'s integrated mapping solutions: `plot_mapbox()` (top) and `plot_geo()` (bottom). The `plot_geo()` approach will transform line segments to correctly reflect their projection into a non-Cartesian coordinate system.

(ref:us-density) A map of U.S. population density using the `state.x77` data from the **datasets** package.

(ref:us-density-geojson) Another map of U.S. population density, this time using choroplethmapbox with a custom GeoJSON file.

(ref:world) Rendering all the world's countries using `plot_ly()` and the `ne_countries()` function from the **rnaturalearth** package.

(ref:view-sf) A diagram of a simple features data frame. The geometry column tracks the spatial features attached to each row in the data frame.

(ref:split-color) Using `split` and `color` to create a choropleth map of provinces in Canada.

(ref:split-text) Using `split`, `text`, and `hoveron='fills'` to display a tooltip specific to each Canadian province.

(ref:canada-ggplotly) The population of various Canadian cities rendered on a custom basemap using a Mollweide projection.

(ref:cartogram) A cartogram of the U.S. population in 2014. A cartogram sizes the area of geo-spatial objects proportional to some metric (e.g., population).

(ref:cartogram-dorling) A Dorling cartogram of the U.S. population in 2014. A Dorling cartogram sizes the circles proportional to some metric (e.g., population).

(ref:cartogram-ncont) A non-contiguous cartogram of the U.S. population in 2014 that preserves shape.

(ref:cartogram-tiles) A tile cartogram of the U.S. population in 2016.


<!-- 
  creating-bars.Rmd 
-->


(ref:bars-numeric) plotly.js's default binning algorithm versus R's `hist()` default.

(ref:bars-discrete) Number of diamonds by cut.

(ref:many-prices) A trellis display of diamond price by diamond clarity.

(ref:cut-by-clarity) A grouped bar chart of diamond counts by cut and clarity.

(ref:cut-by-clarity-prop) A stacked bar chart showing the proportion of diamond clarity within cut.

(ref:ggmosaic) Using **ggmosaic** and `ggplotly()` to create advanced interactive visualizations of categorical data.

(ref:cut-boxes) Overall diamond price and price by cut.

(ref:cut-by-clarity-boxes) Diamond prices by cut and clarity.

(ref:cut-by-clarity-boxes-sorted) Diamond prices by cut and clarity, sorted by price median.


<!-- 
  creating-other.Rmd 
-->


(ref:histogram2d) Three different uses of `histogram2d()`.

(ref:heatmap-corr-diamonds) 2D density estimation via the `kde2d()` function.

(ref:correlation) Displaying a correlation matrix with `add_heatmap()` and controlling the scale limits with `colorbar()`.

(ref:3D-scatterplot) A 3D scatterplot.

(ref:3D-paths) A path with color interpolation in 3D.

(ref:3D-lines) A line with color interpolation in 3D.

(ref:3D-lines-groups) Using `group_by()` to create multiple 3D lines.

(ref:3D-axes) Setting axis titles on a 3D plot.

(ref:surface) A 3D surface of volcano height.

<!-- 
  publishing.Rmd 
-->

(ref:orca) Using the `orca()` function to export a WebGL/Canvas based **plotly** graphic to a static PDF file. The resulting PDF file can then be imported into Adobe Illustrator for post-processing. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/plotly-orca>."` For the interactive, see <https://plotly-r.com/interactives/orca.html>

(ref:toImageSVG) Specifying options for static image exporting via the modebar. Clicking on the 'download plot' icon should prompt your browser to download a static SVG file named 'myplot.svg'.

(ref:edit-county-labels) Estimated total income by county in Minnesota. The top ten counties are labeled with editable annotations. After manually adjusting the placement of county labels in a web browser, and zooming in on the top ten counties in the dot plot, the 'download plot' button is used to export to SVG. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/edit-county-labels>."` For the interactive, see <https://plotly-r.com/interactives/edit-county-labels.html>

<!-- 
  arranging.Rmd 
-->

(ref:subplot-simple) The most basic use of `subplot()` to merge multiple plotly objects into a single plotly object.

(ref:economics) Five different economic variables on different y scales and a common x scale. Zoom and pan events in the x-direction are synchronized across plots.

(ref:proportions) A visual diagram of controlling the `heights` of rows and `widths` of columns. In this particular example, there are five plots being placed in two rows and three columns.

(ref:joint) A joint density plot with synchronized axes.

(ref:recursive) Recursive subplots.

(ref:map-subplot) Multiple bar charts of U.S. statistics by state in a subplot with a choropleth of population density.

(ref:splom) Linked brushing in a scatterplot matrix of the Iris dataset. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/plotly-splom>."` For the interactive, see <https://plotly-r.com/interactives/splom.html>

(ref:ggpairs) A generalized pairs plot made via the `ggpairs()` function from the **GGally** package.

(ref:subplot-trellis) Creating a trellis display with `subplot()`.

(ref:ggplot2-subplots) Arranging multiple-faceted ggplot2 plots into a plotly subplot.

(ref:flexdashboard-ggplotly) An example of embedding `ggplotly()` graphs inside **flexdashboard**. See here for the interactive dashboard <https://plotly-r.com/flexdashboard.html>

(ref:fluid) Arranging multiple **htmlwidgets** with `fluidPage()` from the **shiny** package.

(ref:flexbox) Arranging multiple **htmlwidgets** with CSS flexbox.

(ref:trelliscope) Using **trelliscopejs** to surface high-dimensional insights related to life expectancy and GDP per capita in various countries. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/plotly-trelliscope>."` For the interactive, see <https://plotly-r.com/interactives/trelliscope>

<!--
  animation.Rmd
-->

(ref:animation-ggplotly) Animation of the evolution in the relationship between GDP per capita and life expectancy in numerous countries.

(ref:animation-opts) Modifying animation defaults with `animation_opts()`, `animation_button()`, and `animation_slider()`.

(ref:animation-factors) Animation of GDP per capita versus life expectancy by continent. The ordering of the continents goes from lowest average (across countries) life expectancy to highest.

(ref:animation-targets) Overlaying animated frames on top of a background of all possible frames.

(ref:profile-pyramid) U.S. population projections by age and gender from 2018 to 2050. This population pyramid is implemented with thick line segments to give the appearance of bars. `r if (!knitr::is_html_output()) "The still image shows three frames of the animation. For a video of the animation, see <https://bit.ly/profile-pyramid>."` For the interactive, see <https://plotly-r.com/interactives/profile-pyramid.html>

(ref:profile-lines) Visualizing the same information in Figure \@ref(fig:profile-pyramid) using lines rather than segments. `r if (!knitr::is_html_output()) "The still image shows three frames of the animation. For a video of the animation, see <https://bit.ly/profile-lines>."` For the interactive, see <https://plotly-r.com/interactives/profile-lines.html>



<!-- 
  linked-views.Rmd 
-->


(ref:server-client) A diagram of the graphical querying framework underlying Figure \@ref(fig:txhousing-aggregates).

(ref:link-intro) A visual depiction of how `highlight_key()` attaches metadata to graphical elements to enable graphical database queries. Each point represents a different car and the number of cylinders (`cyl`) is assigned as metadata so that when a particular point is queried, all points with the same number of cylinders are highlighted. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/Link-intro>."` For the interactive, see <https://plotly-r.com/interactives/link-intro.html>

(ref:txmissing) Graphical query of housing prices in various Texan cities. The query in this particular example must be triggered through clicking directly on a time series. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/txmissing>."` For the interactive, see <https://plotly-r.com/interactives/txmissing.html>

(ref:txmissing-modes) Using a selectize dropdown widget to search for cities by name and comparing multiple cities through persistent selection with a dynamic highlighting color. For a visual and audio explanation, see <https://bit.ly/txmissing-modes>.

(ref:txmissing-linked) Linking a dot-plot of the number of missing housing prices with the raw time series. By brushing markers on the dot-plot, their raw time series is highlighted on the right-hand side.

(ref:pipeline-diagram) A diagram of the graphical querying framework underlying Figure \@ref(fig:txmissing-linked).

(ref:txhousing-aggregates) Linking house prices as a function of time with their probability density estimates.

(ref:filter-highlight) Comparing filter to highlight events. Filter events completely remove existing marks and rescales axes to the remaining data. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/filter-highlight>."` For the interactive, see <https://plotly-r.com/interactives/filter-highlight.html>

(ref:multiple-filter-widgets) Filtering on multiple variables. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/multiple-filter-widgets>."` For the interactive, see <https://plotly-r.com/interactives/multiple-filter-widgets.html>

(ref:plotly-leaflet-filter) Linking **plotly** and **leaflet** through both **filter** and **highlight** events. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/plotly-leaflet-filter>."` For the interactive, see <https://plotly-r.com/interactives/plotly-leaflet-filter.html>

(ref:gapminder-filter-highlight) Combining filtering and highlighting with non-unique querying variables. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/gapminder-filter-highlight>."` For the interactive, see <https://plotly-r.com/interactives/gapminder-filter-highlight.html>

(ref:gapminder-highlight-animation) Highlighting the relationship between GDP per capita and life expectancy in the Americas and tracking that relationship through several decades. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/gapminder-highlight-animation>."` For the interactive, see <https://plotly-r.com/interactives/gapminder-highlight-animation.html>

(ref:animation-gapminder) Comparing the evolution in the relationship between per capita GDP and life expectancy in countries with large populations (red) and small populations (blue). `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/animation-gapminder>."` For the interactive, see <https://plotly-r.com/interactives/animation-gapminder.html>


<!-- 
  linked-views-examples.Rmd 
-->

(ref:epl) Graphical querying in a faceted worm chart of English Premier League football teams between 2007 and 2015. The combination of direct and indirect manipulation with the dynamic color brush makes it easy to make comparisons between good and/or bad teams relative to their known rivals. This particular comparison of Man U vs. Arsenal demonstrates that, for the most part, Man U performed better from 2007 to 2015, except in 2013. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/plotly-epl>."` For the interactive, see <https://plotly-r.com/interactives/epl.html>

(ref:trellis-txhousing) Monthly median house prices in four Texan cities. Querying by year allows one to compare unusual or interesting years both within and across cities. 

(ref:trellis-txhousing-plotly) Using `plot_ly()` instead of `ggplotly()` to implement a linked trellis display.

(ref:2-way-anova) Linking a (jittered) dotplot of engine displacement by number of cylinders with boxplots of miles per gallon split by class and a bar chart of Dynamic 2-way ANOVA. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/two-way-anova>."` For the interactive, see <https://plotly-r.com/interactives/2-way-anova.html>

(ref:mpg-linked-bars) Linking a bar chart with a scatterplot to query interesting regions of the data space defined by engine displacement (`disp`), miles per gallon highway (`hwy`), and the class of car (`class`). Notice how, by using `add_histogram()`, the number of cars within each class is dynamically computed by plotly.js. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/mpg-linked-bars>."` For the interactive, see <https://plotly-r.com/interactives/mpg-linked-bars.html>

(ref:mpg-linked) Using statistical queries to perform a 2-way ANOVA on the `mpg` dataset. Cars with front-wheel drive are highlighted in red, and 4-wheel drive are highlighted in blue. The dynamically rendered boxplots by fuel type indicate significant interaction effects. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/mpg-linked>."` For the interactive, see <https://plotly-r.com/interactives/mpg-linked.html>

(ref:smooth-highlight) Engine displacement versus highway miles per gallon by class of car. The linear model for each class, as well as the individual observations, can be selected by hovering over the line of fitted values. An individual observation can also be selected by hovering over the relevant point. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/smooth-highlight>."` For the interactive, see <https://plotly-r.com/interactives/smooth-highlight.html>

(ref:ggplotly-linked-densities) Clicking on a density estimate to highlight all the raw observations that went into that estimate. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/ggplotly-linked-densities>."` For the interactive, see <https://plotly-r.com/interactives/ggplotly-linked-densities.html>

(ref:storms) Linking a 3D globe with tropical storm paths to a 2D view of the storm altitude versus distance traveled. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/storms-preview>."` For the interactive, see <https://plotly-r.com/interactives/storms.html>

(ref:mapbox-quakes) Querying earthquakes by location and displaying a histogram of their magnitude and number of stations. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/mapbox-quakes>."` For the interactive, see <https://plotly-r.com/interactives/mapbox-quakes.html>

(ref:mapbox-bars) Graphically querying North Carolina by location and area. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/mapbox-bars>."` For the interactive, see <https://plotly-r.com/interactives/mapbox-bars.html>

(ref:sf-dt) Linking a `plot_ly()`-based map with a `datatable()` from the **DT** package. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/sf-dt>."` For the interactive, see <https://plotly-r.com/interactives/sf-dt.html>

(ref:leaflet-persistent) Linking views between **plotly** and **leaflet** to explore the relation between magnitude and geographic location of earthquakes around Fiji. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/leaflet-persistent>."` For the interactive, see <https://plotly-r.com/interactives/leaflet-persistent.html>

(ref:leaflet-polygons) Querying polygons on a **leaflet** map in response to direct manipulation of a **plotly** graph. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/leaflet-polygons>."` For the interactive, see <https://plotly-r.com/interactives/leaflet-polygons.html>

(ref:linked-ggally) Brushing a scatterplot matrix via the `ggpairs()` function in the **GGally** package. A video demonstrating the graphical queries can be viewed here <https://bit.ly/linked-ggally>

(ref:ggnostic) Graphical queries applied to multiple diagnostic plots of a linear model. The `ggplotly()` function has a special method for `ggnostic()` that adds graphical queries automatically with support for both individual observations (e.g., points) as well as meaningful groups (e.g., automatic vs. manual). `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/ggnostic>."` For the interactive, see <https://plotly-r.com/interactives/ggnostic.html>

(ref:list-column-simple) A simple example of subset queries via a list-column. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/list-column-simple>."` For the interactive, see <https://plotly-r.com/interactives/list-column-simple.html>

(ref:dendro) Leveraging hierarchical selection and persistent brushing to paint branches of a dendrogram. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/plotly-dendro>."` For the interactive, see <https://plotly-r.com/interactives/dendro.html>

(ref:tour-USArrests) Linking a dendrogram to a grand tour and map of the `USArrests` data to visualize a classification in five dimensions. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/tour-USArrests>."` For the interactive, see <https://plotly-r.com/interactives/tour-USArrests.html>


<!-- 
  linked-views-shiny.Rmd 
-->


(ref:shiny-intro) Using a **shiny** input widget to control which time series are shown on a **plotly** graph. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/shiny-intro>."` For the interactive, see <https://plotly-r.com/interactives/shiny-intro.html>

(ref:shiny-ggplotly) Rendering a **plotly** graph in **shiny** if and only if the `selectizeInput()`'s dropdown is non-empty. When the graph is present, and the window is resized, then the reactive expression is re-evaluated. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/shiny-ggplotly>."` For the interactive, see <https://plotly-r.com/interactives/shiny-ggplotly.html>

(ref:plotlyEvents) Accessing event data from click and drag events. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/plotlyEvents>."` For the interactive, see <https://plotly-r.com/interactives/plotlyEvents.html>

(ref:3Devents) Accessing 3D events. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/plotly3Devents>."` For the interactive, see <https://plotly-r.com/interactives/3Devents.html>

(ref:shiny-edit-annotations) Accessing information about direct manipulation of annotations. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/shiny-edit-annotations>."` For the interactive, see <https://plotly-r.com/interactives/shiny-edit-annotations.html>

(ref:shiny-drag-circle) Accessing information about direct manipulation of circle shapes. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/shiny-drag-circle>."` For the interactive, see <https://plotly-r.com/interactives/shiny-drag-circle.html>

(ref:interactive-lm) Editing circle shape positions to dynamically alter a linear model summary and fitted line. This is useful mainly as a teaching device to visually demonstrate the effect of high leverage points on a simple linear model. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/interactive-lm>."` For the interactive, see <https://plotly-r.com/interactives/interactive-lm.html>

(ref:shiny-drag-line) Dragging a vertical line shape and 'snapping' the line to match the closest provided `x` value. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/shiny-drag-line>."` For the interactive, see <https://plotly-r.com/interactives/shiny-drag-line.html>

(ref:shiny-parcoords) Using the `"plotly_restyle"` event to access brushed dimensions of a parallel coordinates plot. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/shiny-parcoords>."` For the interactive, see <https://plotly-r.com/interactives/shiny-parcoords.html>

(ref:shiny-parcoords-data) Displaying the highlighted observations of a parcoords trace. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/shiny-parcoords-data>."` For the interactive, see <https://plotly-r.com/interactives/shiny-parcoords-data.html>

(ref:shiny-corrplot) Linking each cell of a correlation heatmap to the corresponding scatterplot. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/shiny-corrplot>."` For the interactive, see <https://plotly-r.com/interactives/shiny-corrplot.html>

(ref:event-priority) A demo of input priority versus event priority. Clicking on the same marker repeatedly, by default, won't invalidate a reactive expression that depends on 'plotly_click', but it will invalidate when given event priority. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/event-priority>."` For the interactive, see <https://plotly-r.com/interactives/event-priority.html>

(ref:discrete-event-data) Retrieving the data observations that correspond to a particular bar in a stacked bar chart. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/discrete-event-data>."` For the interactive, see <https://plotly-r.com/interactives/discrete-event-data.html>

(ref:shiny-hover-persist) Using `reactiveVals()` to enable a persistent brush via mouse hover. In this example, the brush can be cleared through a double-click event. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/shiny-hover-persist>."` For the interactive, see <https://plotly-r.com/interactives/shiny-hover-persist.html>

(ref:shiny-lmGadget) Interactively removing observations from a linear model. Credit to Winston Chang for the initial implementation of this **shiny** gadget using `shiny::plotOutput()` instead of `plotly::plotlyOutput()`. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/shiny-lmGadget>."` For the interactive, see <https://plotly-r.com/interactives/shiny-lmGadget.html>

(ref:shiny-scatterplot) Naive implementation of a shiny app that optionally overlays a fitted line to a scatterplot. A full redraw of the plot is performed every time the checkbox is clicked, leading to an unnecessarily slow plot. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/shiny-scatterplot>."` For the interactive, see <https://plotly-r.com/interactives/shiny-scatterplot.html>

(ref:shiny-scatterplot-performant) A more responsive version of Figure \@ref(fig:shiny-scatterplot). `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/shiny-scatterplot-performant>."` For the interactive, see <https://plotly-r.com/interactives/shiny-scatterplot-performant.html>

(ref:shiny-partial-restyle) Using `Plotly.restyle()` to change just the width of a path and markers along that path in response to changes to **shiny** input sliders. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/shiny-partial-restyle>."` For the interactive, see <https://plotly-r.com/interactives/shiny-partial-restyle.html>

(ref:shiny-mapbox-relayout) Using a `shiny::selectInput()` to modify the basemap style of `plot_mapbox()` via `Plotly.relayout()`. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/shiny-mapbox-relayout>."` For the interactive, see <https://plotly-r.com/interactives/shiny-mapbox-relayout.html>

(ref:shiny-rangeslider-relayout) Using `Plotly.relayout()` to 'auto-range' the y-axis in response to changes in the x-axis range. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/shiny-rangeslider-relayout>."` For the interactive, see <https://plotly-r.com/interactives/shiny-rangeslider-relayout.html>

(ref:shiny-stream) Using `Plotly.extendTraces()` to efficiently stream data into a plotly chart. This specific example implements a random walk (using R's random number generator) which updates every 100 milliseconds. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/shiny-stream>."` For the interactive, see <https://plotly-r.com/interactives/shiny-stream.html>

(ref:shiny-drill-down-pie) A drill-down pie chart of sales by category. By clicking on a category (e.g., Furniture), the pie chart updates to display sales by sub-categories within Furniture. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/shiny-drill-down-pie>."` For the interactive, see <https://plotly-r.com/interactives/shiny-drill-down-pie.html>

(ref:shiny-drill-down-bar-time) Coordinating drill-down across multiple views. By clicking on a category (e.g., Technology), both the bar chart and the time-series updates to display sales within Technology. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/shiny-drill-down-bar-time>."` For the interactive, see <https://plotly-r.com/interactives/shiny-drill-down-bar-time.html>

(ref:shiny-drill-down-bar-time-history) Coordinating multiple drill-down controls across multiple views. Clicking on a category (e.g., Technology) leads to a view of sales amongst Technology sub-categories. Clicking on a Technology sub-category (e.g., Phones) leads to a view of phone sales. Clicking on a phone product ID generates a table of all the sales of that particular product. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/shiny-drill-down-bar-time-history>."` For the interactive, see <https://plotly-r.com/interactives/shiny-drill-down-bar-time-history.html>

(ref:shiny-drill-down) Using a drill-down approach to navigating through sales data by category, sub-category, and order date. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/shiny-drill-down>."` For the interactive, see <https://plotly-r.com/interactives/shiny-drill-down.html>

(ref:shiny-crossfilter-naive) A 'naive' cross-filter implementation linking arrival time with departure time of about 350,000 `flights` from the **nycflights13** package. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/shiny-crossfilter-preview>."` For the interactive, see <https://plotly-r.com/interactives/shiny-crossfilter-naive.html>

(ref:shiny-crossfilter-kde) Using kernel density estimation to responsively crossfilter a 2D distribution. This particular example shows how the relationship between diamond carat and price is dependent upon its depth. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/shiny-crossfilter-kde>."` For the interactive, see <https://plotly-r.com/interactives/shiny-crossfilter-kde.html>

(ref:shiny-crossfilter) Cross-filtering six variables in the `flights` data from the **nycflights13** package [@nycflights13]. The filtering and binning logic occurs server-side resulting in a very minimal amount of data being sent between server and client (just the brush range and bar heights). Moreover, to perform the UI update, the client only has to tweak existing bar heights, so the overall user experience is quite responsive. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/shiny-crossfilter>."` For the interactive, see <https://plotly-r.com/interactives/shiny-crossfilter.html>

(ref:shiny-crossfilter-compare) Comparing filters with a dynamic color brush. This particular example compares 'red eye' flights (in green) to early morning flights (in orange). This makes it easier to see that delays occur more often for 'red eye' flights. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/shiny-crossfilter-compare>."` For the interactive, see <https://plotly-r.com/interactives/shiny-crossfilter-compare.html>

(ref:shiny-drag-brush) A draggable brush with both a transient and persistent mode. The dragging ability is done by mimicking the native plotly.js brush with an editable rectangle shape and listening to changes in that brush. The implementation of transient vs. persistent mode is a matter of forgetting or remembering previous state(s) of the brush. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/shiny-drag-brush>."` For the interactive, see <https://plotly-r.com/interactives/shiny-drag-brush.html>

(ref:shiny-crosstalk-examples) Example of a **shiny** app that has **crosstalk** functionality embedded. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/shiny-crosstalk-examples>."` For the interactive, see <https://plotly-r.com/interactives/shiny-crosstalk-examples.html>


<!-- 
  javascript.Rmd 
-->

(ref:console-log) Using `htmlwidgets::onRender()` to inspect the relevant DOM instance containing the **plotly** graph and information related to its current display. The `_fullData` and `_fullLayout` attributes bound to the element are 'internal' (meaning relying on this information in production code is discouraged), but do provide a useful description of the chart's current state, especially if you need access to computations done by plotly.js (e.g., axis tick placement). `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/js-console-log>."` For the interactive, see <https://plotly-r.com/interactives/console-log.html>

(ref:json-schema) Using the plotly `schema()` to obtain more information about expected attribute types. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/json_schema>."` For the interactive, see <https://plotly-r.com/interactives/json-schema.html>

(ref:console-log-event) Inspecting event data for hover, click, and selected events. If a click or hover event does not derive from a statistical aggregation (e.g., boxplot, histogram, etc.), the `points` array is of length 1; otherwise, the length corresponds to how many input values are represented in the selection. In Chrome, when you log an object to the console, you can click on a link to the JS source function where you can then set breakpoints. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/console-log-event>."` For the interactive, see <https://plotly-r.com/interactives/console-log-event.html>

(ref:click-open) Attaching hyperlinks to each point in a scatterplot and using a custom JS event to open that Google search query upon clicking a point. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/click-open>."` For the interactive, see <https://plotly-r.com/interactives/click-open.html>

(ref:hover-annotate) Using `Plotly.relayout()` to add and change hyperlink in response to hover events. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/hover-annotate>."` For the interactive, see <https://plotly-r.com/interactives/hover-annotate.html>

(ref:tooltip-image) Displaying an image on hover in a scatterplot. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/tooltip-image>."` For the interactive, see <https://plotly-r.com/interactives/tooltip-image.html>

(ref:tooltip-image-heatmap) Displaying an image on hover in a heatmap. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/tooltip-image-heatmap>."` For the interactive, see <https://plotly-r.com/interactives/tooltip-image-heatmap.html>

(ref:tx-annotate) Combining the graphical querying framework from Section \@ref(graphical-queries) with a custom JS event handler to highlight a time series as well as circling the month selected. This example supplies a list-column to `customdata` in order to populate an informative title based on the user's selection of city and month. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/tx-annotate>."` For the interactive, see <https://plotly-r.com/interactives/tx-annotate.html>

(ref:tx-mean-sales) Displaying the average monthly sales for a city of interest on hover. This implementation supplies all the raw sales figures, then uses the hovered `customdata` value to query sales for the given city and display the average. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/tx-mean-sales>."` For the interactive, see <https://plotly-r.com/interactives/tx-mean-sales.html>

(ref:tx-inset-plot) Adding another event handler to Figure \@ref(fig:tx-annotate) to draw an inset plot showing the distribution of monthly house sales. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/tx-inset-plot>."` For the interactive, see <https://plotly-r.com/interactives/tx-inset-plot.html>

(ref:correlation-client-side) Clicking on a correlation matrix to populate a scatterplot. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/correlation-client-side>."` For the interactive, see <https://plotly-r.com/interactives/correlation-client-side.html>

(ref:react-player) Using the `react-player` React component to render a video in response to a `'plotly_click'` event. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/react-player>."` For the interactive, see <https://plotly-r.com/interactives/react-player.html>

(ref:babel) Using `babel_transform()` to leverage ES6, React, and JSX. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/babel-transform>."` For the interactive, see <https://plotly-r.com/interactives/babel.html>

(ref:react-data-grid) Using the `react-data-grid` React component to render a data table of the observation within a scatterplot brush. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/react-data-grid>."` For the interactive, see <https://plotly-r.com/interactives/react-data-grid.html>

<!-- 
  topics.Rmd 
-->

(ref:custom-tooltip-plotly) Customizing the tooltip by supplying glyphs, Unicode, HTML markup to the `text` attributes and restricting displayed attributes with `hoverinfo='text'`.

(ref:hoveron-fill-points) Using the `hoveron` attribute to control whether a tooltip is attached to fill or each point along that fill.

(ref:tooltip-format-boxplot) Using `xaxis.hoverformat` to round aggregated values displayed in the tooltip to two decimal places.

(ref:hovertemplate) Using the `hovertemplate` attribute to reference computed variables and their display format inside a custom string.

(ref:tooltip-format-heatmap) Formatting the displayed `z` values in a heatmap using `zhoverformat`.

(ref:ggplotly-text) Using the `text` **ggplot2** aesthetic to supply custom tooltip text to a scatterplot.

(ref:ggplotly-text-tooltip) Using the `tooltip` argument in `ggplotly()` to only display the `text` aesthetic.

(ref:format-options) Leveraging global R options for controlling the displayed values in a `ggplotly()` tooltip.

(ref:text-clever) Using the `text` aesthetic to replace an auto-generated aesthetic (`y`).

(ref:custom-predict-text) Using the return value of `ggplotly()` to populate a custom `text` attribute.

(ref:tooltip-style) Using the `hoverlabel` attribute to customize the color and font of the tooltip.

(ref:tooltip-style-ggplotly) Using the `hoverlabel` attribute with `ggplotly()`.

(ref:displaylogo) Removing the plotly logo from the modebar.

(ref:modeBarButtonsToRemove) Removing the 'zoomIn2d' and 'zoomOut2d' modebar buttons by name.

(ref:modeBarButtonsToAdd) Supplying a custom modebar button with custom behavior.

(ref:modeBarButtons) Specifying the full list of modebar buttons.

(ref:color-plotly-js) Specifying a color in plotly.js's supported format.

(ref:symbols-all) All marker symbols currently supported by **plotly**.

(ref:glyphs) Using `add_text()` to render on-graph text with typographical glyphs and/or unicode.

(ref:emojis) Using `add_text()` to plot all the activity emojis and leveraging `hovertext` to place the emoji names in the tooltip text.

(ref:localization) Using the `locale` argument of the `config()` function to render on-graph text in another language.

(ref:mathjax) Rendering LaTeX in the plot and axis titles.

(ref:mathjax2) Rendering LaTeX using `add_text()` and `add_annotations()`. 

(ref:houston2) Monthly median house prices over time for 46 Texan cities (in blue). Houston is highlighted in orange.

(ref:houston-vs-sa) Monthly median house price in Houston and San Antonio in comparison to other Texan cities.

(ref:summary) First, second, and third quartile of median monthly house price in Texas.

(ref:forecast) Layering on a 4-year forecast from an exponential smoothing state space model.

(ref:ggplotly-rangeslider) Adding `dynamicTicks`, a `rangeslider()`, and a comparison hovermode to improve the interactive experience of a `ggplotly()` graph. `r if (!knitr::is_html_output()) "For a video demonstration of the interactive, see <https://bit.ly/ggplotly-rangeslider>."` For the interactive, see <https://plotly-r.com/interactives/ggplotly-rangeslider.html>

(ref:simple-scatterplot) A scatterplot with a fitted line and confidence band.

(ref:listviewer) Using listviewer to inspect the JSON representation of a plotly object.

(ref:style-hoverinfo) Using the `style()` function to modify hoverinfo attribute values of a plotly object created via `ggplotly()` (by default, `ggplotly()` displays hoverinfo for all traces). In this case, the hoverinfo for a fitted line and error bounds are hidden.

(ref:se-annotations) Leveraging data associated with a `geom_smooth()` layer to display additional information about the model fit.

(ref:StatBin) Leveraging output from `StatBin` to add annotations to a stacked bar chart (created via `geom_bar()`) which makes it easier to compare bar heights.

(ref:StatDensity2d) Leveraging output from `StatDensity2d` to add annotations to contour levels.

(ref:image-hyperlink) Embedding an image using a hyperlink. This example uses paper coordinates (i.e., normalized 0-1 scale relative to the graph area) to place the image just above the graph.

(ref:image-uri) Embedding an image using a data URI. This approach ensures your image stays embedded in the plot.

(ref:raster) Reading a PNG image into R with `png::readPNG()`, converting the RBGA array into a raster object, generating a data URI of the raster via `raster2uri()`, then embedding the URI as an image in a **plotly** graph.

<!-- 
  develop.Rmd 
-->

(ref:xspline) Converting GeomXspline from the **ggalt** package to plotly.js via `ggplotly()`.