Skip to content

Instantly share code, notes, and snippets.

@timelyportfolio

timelyportfolio/.block

Last active November 7, 2016 16:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save timelyportfolio/ef7450c688b1fe47c4e6335ae2be9d62 to your computer and use it in GitHub Desktop.
Save timelyportfolio/ef7450c688b1fe47c4e6335ae2be9d62 to your computer and use it in GitHub Desktop.
Download ZIP
Victory Charts from R with reactR
Raw
.block
license: mit
Raw
README.md

assembled with blockbuilder.org

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"
)

demo_script <- HTML(
'
const data = [
  {quarter: 1, earnings: 13000},
  {quarter: 2, earnings: 16500},
  {quarter: 3, earnings: 14250},
  {quarter: 4, earnings: 19000}
];


// need to change example using VictoryChart namespace
//   so we will add VictoryChart. to all the components
class App extends React.Component {
  render() {
    return (
      <VictoryChart.VictoryChart
        // adding the material theme provided with Victory
        theme={VictoryCore.VictoryTheme.material}
        domainPadding={20}
      >
        <VictoryCore.VictoryLabel
          y = "20"
          text = "Victory from R"
          style = {{"font-size" : "150%"}}
        />
        <VictoryChart.VictoryAxis
          tickValues={["Quarter 1", "Quarter 2", "Quarter 3", "Quarter 4"]}
        />
        <VictoryChart.VictoryAxis
          dependentAxis
          tickFormat={(x) => (`$${x / 1000}k`)}
        />
        <VictoryChart.VictoryBar
          data={data}
          x={"quarter"}
          y={"earnings"}
        />
      </VictoryChart.VictoryChart>
    )
  }
}

const app = document.getElementById("app");
ReactDOM.render(<App />, app);
'
)

tagList(
  tags$div(id = "app"),
  tags$script(
    HTML(
      babel_transform(demo_script)
    )
  )
) %>>%
  attachDependencies(
    list(
      html_dependency_react(),
      victory_core,
      victory_chart
    )
  ) %>>%
  browsable()
Raw
index.html
<!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;">
<div id="app"></div>
<script>"use strict";
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var data = [{ quarter: 1, earnings: 13000 }, { quarter: 2, earnings: 16500 }, { quarter: 3, earnings: 14250 }, { quarter: 4, earnings: 19000 }];
// need to change example using VictoryChart namespace
// so we will add VictoryChart. to all the components
var App = function (_React$Component) {
_inherits(App, _React$Component);
function App() {
_classCallCheck(this, App);
return _possibleConstructorReturn(this, Object.getPrototypeOf(App).apply(this, arguments));
}
_createClass(App, [{
key: "render",
value: function render() {
return React.createElement(
VictoryChart.VictoryChart,
{
// adding the material theme provided with Victory
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"
})
);
}
}]);
return App;
}(React.Component);
var app = document.getElementById("app");
ReactDOM.render(React.createElement(App, null), app);</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment