d3-chartframe with ggplot2

• plot from R ggplot2
• frame from d3-chartframe
• assembled with with blockbuilder.org

---

Frame Tool for d3.js

Tom Pearson has very helpfully built a nice little d3.js plugin called d3-chartframe. I immediately thought

**"I bet a `svglite` ggplot2 chart would look really nice in that frame."**

ggplot2 from svglite

svglite is magical little tool that easily creates SVG from any R plot. In this case, we add the SVG in a htmltools::tagList() and then use JavaScript to insert into the d3-chartframe.

Code

library(d3r)
library(htmltools)
library(svglite)
library(ggplot2)
library(pipeR)

chartframe <- htmlDependency(
  name = "d3-chartframe",
  version = "0.1.1",
  src = c(href = "https://unpkg.com/d3-chartframe/build/"),
  script = "d3-chartframe.js"
)

svg_plot <- htmlSVG(
  {
    print(
      ggplot(iris, aes(x=Petal.Width, y=Petal.Length)) +
        geom_point(aes(color=Species)) +
        geom_rug() +
        scale_color_brewer(palette="Set1") +
        theme_minimal()
    )
  },
  standalone = FALSE,
  height = 4,
  width = 6
)

tagList(
  tags$head(
    tags$style(
"
body {font-family:Merriweather;}
.chart-title {font-size:1.5em;}
.chart-subtitle {font-weight:300;}
.chart-source {font-weight:300;font-style:italic;font-size:90%;}
"
    )
  ),
  tag("svg", list(id="chart-container")),
  svg_plot,
  tags$script(
"
var frame = d3_chartframe.frame()
  .margin({
    left:0
  })
  .title('ggplot2 from R framed by d3-chartframe')
  .subtitle('thanks www.toffeemilkshake.co.uk')
  .source('Anderson, Edgar (1935). The irises of the Gaspe Peninsula');

d3.select('#chart-container')
  .call(frame);
d3.select('svg:nth-of-type(2) text').style('font-family',null);
d3.select('#chart-container').node().appendChild(d3.select('svg:nth-of-type(2)').node());
" )
) %>>%
  googlefontR::gf_add_font(fontname = "Merriweather:300,300i,400", addstyle=FALSE ) %>>%
  attachDependencies(
    list(
      d3_dep_v4(offline=FALSE),
      chartframe
    ),
    append = TRUE
  ) %>>%
  browsable()