JavaScript & D3

Enhance communication with interactive visualizations

Table of Contents

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


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

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}

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 Veronoi diagram created using D3:

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

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


If you see mistakes or want to suggest changes, please create an issue on the source repository.


Text and figures are licensed under Creative Commons Attribution CC BY 4.0. Source code is available at, unless otherwise noted. The figures that have been reused from other sources don't fall under this license and can be recognized by a note in their caption: "Figure from ...".