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<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body style="background-color:white;">
<!DOCTYPE html>
<html lang="en" meta-charset="utf-8">
<head>
<script src="//d3js.org/d3.v3.min.js"></script>
<style link="href">
div.bar {
display: inline-block;
width: 20px;
background-color: teal;
}
</style>
</head>
<body>
<script>
d3.select('body').selectAll('div')
.data([1,2,3,4,5,6,7,8,9,10])
.enter()
.append('div')
.attr('class', 'bar')
.style('height', function(d) {
var barHeight = d * 5;
return barHeight + 'px';
});
</script>
</body>
</html>
</body>
</html>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
# quickly upload our fine creation
#library(gistr)
#gist_auth(reauth=T)
#hf %>>%
# gist_create(hf, description = "rjade | use jade in R to make a chart with d3.js")