timelyportfolio/Readme.md

## Readme.md

      
    Raw
  

              Readme.md
            
          
    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

  
## code.R
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")

## index.html
<!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="http://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")
	<!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="http://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>