rjade | use jade in R to make a chart with d3.js

rjade | use jade in R with d3.js to make a chart

Yesterday, Jeroen Ooms’ released rjade which uses his V8 package to render jade templates. I didn’t think the included example was all that inspiring, so I put this quick little example together. We supply 1:10 from R into a template that makes the simple bar chart from Chapter 6 of Interactive Data Visualization for the Web by Scott Murray. I hope this inspires you to create something even more meaningful. Thanks Jeroen Ooms.

library(rjade)
library(jsonlite)
library(pipeR)
library(htmltools)

vizJSON = paste0(toJSON(1:10))


# using d3 example example from 
#    Interactive Data Visualization for the Web by Scott Murray
#    http://shop.oreilly.com/product/0636920026938.do

jade_compile(
"
doctype html
html(lang='en' meta-charset = 'utf-8')
  head
    script(src = 'http://d3js.org/d3.v3.min.js')
    style(link='href').
      div.bar {
          display: inline-block;
          width: 20px;
          background-color: teal;
      }
  body
    script.
      d3.select('body').selectAll('div')
        .data(!{vizJSON}) 
        .enter()
        .append('div')
        .attr('class', 'bar')
        .style('height', function(d) {
            var barHeight = d * 5;
            return barHeight + 'px';
        });
", pretty = T  
)(vizJSON = vizJSON) %>>% HTML %>>% html_print %>>% ~hf