Skip to content

Instantly share code, notes, and snippets.

@timelyportfolio
Last active November 7, 2016 20:45
Show Gist options
  • Save timelyportfolio/9584d88ef94ee9e8209ae7a5613e02c7 to your computer and use it in GitHub Desktop.
Save timelyportfolio/9584d88ef94ee9e8209ae7a5613e02c7 to your computer and use it in GitHub Desktop.
Victory Charts from R with reactR (version 2)
license: mit

assembled with blockbuilder.org


Version 2 (I think better)

same as previous block except this version uses a modified htmltools (see pull) to work nicely with JSX. The pull allows noquote attributes which are very common in JSX. I think this version is much cleaner and more React-like, since we build up components.


Combine React with R

The new package reactR provides convenience functions for using react in R. Here is a quick example with VictoryChart built from R. Thanks so much to Formidable Labs for the very fine product with great documentation.

Much Left To Do

As you can probably tell in the code below, there is much more left to do. Please help by contributing code, examples, ideas. Thanks! As an example, this would be much better if wrapped as an htmlwidget.

Code In R

library(htmltools)
library(reactR)
library(pipeR)

# FormidableLabs has been working hard on Victory-Chart
#  let's try to use it with reactR

# not necessary to make an htmlDependency but more robust if we do
victory <- htmlDependency(
  name = "victory",
  version = "0.13.3",
  src = c(href = "https://unpkg.com/victory/dist"),
  script = "victory.js"
)

victory_core <- htmlDependency(
  name = "victory-core",
  version = "9.1.1",
  src = c(href = "https://unpkg.com/victory-core@9.1.1/dist"),
  script = "victory-core.js"
)

victory_chart <- htmlDependency(
  name = "victory-chart",
  version = "13.1.1",
  src = c(href = "https://unpkg.com/victory-chart@13.1.1/dist"),
  script = "victory-chart.js"
)


# now let's try to do it with JSX
#  using a modified version of htmltools

## our silly little chart title
v_label <- tag(
  "VictoryCore.VictoryLabel",
  list(
    y = "20",
    text = "Victory from R",
    style = noquote('{{"font-size" : "150%"}}')
  )
)
## our x axis
v_xaxis <- tag(
  "VictoryChart.VictoryAxis",
  list(
    tickValues=noquote('{["Quarter 1", "Quarter 2", "Quarter 3", "Quarter 4"]}')
  )
)

v_yaxis <- tag(
  "VictoryChart.VictoryAxis",
  list(
    dependentAxis = NA,
    tickFormat = noquote('{(x) => (`$${x / 1000}k`)}')
  )
)

v_barchart <- tag(
  "VictoryChart.VictoryBar",
  list(
    data=noquote('{data}'),
    x=noquote('{"quarter"}'),
    y=noquote('{"earnings"}')
  )
)

v_component <- tag(
  "VictoryChart.VictoryChart",
  list(
    theme=noquote('{VictoryCore.VictoryTheme.material}'),
    domainPadding=noquote('{20}'),
    v_label,
    v_xaxis,
    v_yaxis,
    v_barchart
  )
)

v_component %>>%
  as.character() %>>%
  {
    sprintf(
'
const data = [
  {quarter: 1, earnings: 13000},
  {quarter: 2, earnings: 16500},
  {quarter: 3, earnings: 14250},
  {quarter: 4, earnings: 19000}
];

var chart = %s;

ReactDOM.render(chart, document.body);
'
      ,
      .
    )
  } %>>%
  babel_transform() %>>%
  HTML() %>>%
  tags$script() %>>%
  tagList() %>>%
  attachDependencies(
    list(
      html_dependency_react(offline=TRUE),
      victory_core,
      victory_chart
    )
  ) %>>%
  browsable()

forked from timelyportfolio's block: Victory Charts from R with reactR

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.min.js"></script>
<script src="https://unpkg.com/victory-core@9.1.1/dist/victory-core.js"></script>
<script src="https://unpkg.com/victory-chart@13.1.1/dist/victory-chart.js"></script>
</head>
<body style="background-color:white;">
<script>"use strict";
var data = [{ quarter: 1, earnings: 13000 }, { quarter: 2, earnings: 16500 }, { quarter: 3, earnings: 14250 }, { quarter: 4, earnings: 19000 }];
var chart = React.createElement(
VictoryChart.VictoryChart,
{ theme: VictoryCore.VictoryTheme.material, domainPadding: 20 },
React.createElement(VictoryCore.VictoryLabel, { y: "20", text: "Victory from R", style: { "font-size": "150%" } }),
React.createElement(VictoryChart.VictoryAxis, { tickValues: ["Quarter 1", "Quarter 2", "Quarter 3", "Quarter 4"] }),
React.createElement(VictoryChart.VictoryAxis, { dependentAxis: true, tickFormat: function tickFormat(x) {
return "$" + x / 1000 + "k";
} }),
React.createElement(VictoryChart.VictoryBar, { data: data, x: "quarter", y: "earnings" })
);
ReactDOM.render(chart, document.body);</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment