JavaScript & D3

Enhance communication with interactive visualizations

There are a variety of ways to add interactive JavaScript and D3 visualizations to your Distill articles, including:

• Using pre-built htmlwidgets that wrap JavaScript visualization libraries like Leaflet, Plotly, dygraphs, and threejs.

• Creating custom D3.js interactive visualizations using the r2d3 package.

htmlwidgets

Including htmlwidgets within a Distill article is as easy as including an R plot. For example, the following code embeds a Leaflet map:

```{r}
library(leaflet)
leaflet() %>%
  addTiles() %>%  # Add default OpenStreetMap map tiles
  addMarkers(lng=174.768, lat=-36.852, popup="The birthplace of R")
```

library(leaflet)
leaflet() %>%
  addTiles() %>%  # Add default OpenStreetMap map tiles
  addMarkers(lng=174.768, lat=-36.852, popup="The birthplace of R")

You can also use figure layout options with htmlwidgets. For example, here we set layout="l-page" to specify that we want the widget to span the width of the page:

```{r, layout="l-page", fig.height=3}
library(dygraphs)
dygraph(ldeaths)
```

library(dygraphs)
dygraph(ldeaths)

Note that we specify fig.height=3 to provide a more natural height for a widget that spans the entire width of the page.

To learn about available htmlwidgets see the showcase page and the htmlwidget gallery.

D3 visualizations

The r2d3 package enables you to easily incorporate interactive graphics created using D3.js in your Distill articles.

For example, the following renders an interactive Voronoi diagram created using D3:

```{r, layout="l-page", fig.height=6}
library(r2d3)
r2d3(script = "voronoi.js", d3_version = 4)
```

library(r2d3)
r2d3(script = "d3/voronoi/voronoi.js", d3_version = 4)

Note that we specify layout="l-page" to indicate that we want the visualization to occupy the full width of the page.