HTMLWidgets

View Github Repository Open presentation in a new window

ramnathv

See all presentation from ramnathv

HTMLWidgets

1 6

BARUG_Talk

On Github ramnathv / BARUG_Talk

HTMLWidgets

Binding JS Libraries Made Easy

Ramnath Vaidyanathan @ Alteryx

Tale of Two Plots

ggplot(males, aes(x = Hair, y = Freq, fill = Eye)) +
 geom_bar(position = 'dodge', stat = 'identity') +
 scale_fill_manual(
   values = c('brown', 'blue', '#594c26', 'green')
 ) +
 theme(legend.position = 'none')

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="lib/htmlwidgets-0.3.2/htmlwidgets.js"></script>
<script src="lib/angular-1.2.20/angular.min.js"></script>
<script src="lib/d3-3.4.11/d3.min.js"></script>
<link href="lib/nvd3-1.1.15/nv.d3.css" rel="stylesheet" />
<script src="lib/nvd3-1.1.15/nv.d3.min.js"></script>
<script src="lib/angular-nvd3-0.0.9/angular-nvd3.min.js"></script>
<link href="lib/ghbuttons-1.0.0/gh-buttons.css" rel="stylesheet" />
<link href="lib/ghbuttons-1.0.0/better-select.css" rel="stylesheet" />
<script src="lib/datgui-0.5.0/dat.gui.min.js"></script>
<script src="lib/nvd3-binding-0.1/nvd3.js"></script>

</head>
<body>
<div id="htmlwidget_container">
  <div id="htmlwidget-1329" class="nvd3" width="100%" height="400">
    <div ng-controller="myCtrl1329">
      <div>
        <form id="controls-for-htmlwidget-1329"></form>
      </div>
      <nvd3 options="options" data="data" api="api"></nvd3>
    </div>
  </div>
</div>
<script type="application/json" data-for="htmlwidget-1329">{ "x": {
 "y": "Freq",
"type": "multiBarChart",
"group": "Eye",
"x": "Hair",
"data": [
 {
 "Hair": "Black",
"Eye": "Brown",
"Sex": "Female",
"Freq":                36 
},
{
 "Hair": "Brown",
"Eye": "Brown",
"Sex": "Female",
"Freq":                66 
},
{
 "Hair": "Red",
"Eye": "Brown",
"Sex": "Female",
"Freq":                16 
},
{
 "Hair": "Blond",
"Eye": "Brown",
"Sex": "Female",
"Freq":                 4 
},
{
 "Hair": "Black",
"Eye": "Blue",
"Sex": "Female",
"Freq":                 9 
},
{
 "Hair": "Brown",
"Eye": "Blue",
"Sex": "Female",
"Freq":                34 
},
{
 "Hair": "Red",
"Eye": "Blue",
"Sex": "Female",
"Freq":                 7 
},
{
 "Hair": "Blond",
"Eye": "Blue",
"Sex": "Female",
"Freq":                64 
},
{
 "Hair": "Black",
"Eye": "Hazel",
"Sex": "Female",
"Freq":                 5 
},
{
 "Hair": "Brown",
"Eye": "Hazel",
"Sex": "Female",
"Freq":                29 
},
{
 "Hair": "Red",
"Eye": "Hazel",
"Sex": "Female",
"Freq":                 7 
},
{
 "Hair": "Blond",
"Eye": "Hazel",
"Sex": "Female",
"Freq":                 5 
},
{
 "Hair": "Black",
"Eye": "Green",
"Sex": "Female",
"Freq":                 2 
},
{
 "Hair": "Brown",
"Eye": "Green",
"Sex": "Female",
"Freq":                14 
},
{
 "Hair": "Red",
"Eye": "Green",
"Sex": "Female",
"Freq":                 7 
},
{
 "Hair": "Blond",
"Eye": "Green",
"Sex": "Female",
"Freq":                 8 
} 
],
"options": {
 "chart": {
 "type": "multiBarChart",
"width": null,
"height":               400,
"xAxis": [],
"yAxis": [],
"color": [ "brown", "blue", "#594c26", "green" ] 
},
"title": {
 "enable": true,
"html": "<h3 style='font-family: sanserif;'>Plot of Freq vs Hair</h3>" 
},
"subtitle": {
 "enable": true,
"text": "" 
},
"caption": {
 "enable": true,
"text": "" 
} 
},
"height":               400 
},"evals": [  ] }</script>
<script type="application/htmlwidget-sizing" data-for="htmlwidget-1329">{ "viewer": {
 "width": "100%",
"height":               400,
"padding":                15,
"fill": false 
},"browser": {
 "width": "100%",
"height":               400,
"padding":                40,
"fill": false 
} }</script>
</body>
</html>


library(rCharts2)
nvd3(females,
  Freq ~ Hair, 
  type = 'multiBarChart',
  group = 'Eye'
) %>%
  chart(color = c('brown', 'blue', '#594c26', 'green'))

library(rMaps2)
d1 <- crosslet(
  x = "country", 
  y = c("web_index", "universal_access", 
    "impact_empowerment", "freedom_openness"
  ),
  data = web_index,
  map = map_world(leaflet = list(url = OSM_URL))
)

How does it Work?

htmlwidgets

with RStudio and Kenton Russell

Resources

dependencies:
  - name: jquery
    version: 2.1
    src: "htmlwidgets/lib/jquery/dist/"
    script: "jquery.min.js"
  - name: raphael
    version: 2.1
    src: "htmlwidgets/lib/raphael"
    script: "raphael-min.js"
  - name: morris.js
    version: 0.5
    src: "htmlwidgets/lib/morris"
    script: morris.min.js
    style: morris.css

Javascript

HTMLWidgets.widget({
  type: "output",
  name: "morris",
  renderValue: function(el, x){
    x.element = el.id
    x.data = HTMLWidgets.dataframeToD3(x.data)
    new Morris[x.type](x)
  }
})

DEMOS

Communicating Widgets D3 Shot Chart

Multiple Contexts

Composable

More Demos

Questions

Thank You

HTMLWidgets Binding JS Libraries Made Easy Ramnath Vaidyanathan @ Alteryx