React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

by terebentina

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-15.2.0.js"></script>
<script src="https://fb.me/react-dom-15.2.0.js"></script>
<script src="https://npmcdn.com/rd3/build/public/js/react-d3.js"></script>
<script src="https://npmcdn.com/d3"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

var LineChart = rd3.LineChart;
var Hello = React.createClass({
  render: function() {
    return <LineChart
        legend
        data={data}
        xAccessor={(obj) => new Date(obj.ts)}
        yAccessor={(obj) => obj}
        xAxisTickCount={10}
        xAxisLabel="Time"
        yAxisLabel="Value"
        width={800}
        height={400}
        title="Sensor Readout"
        gridHorizontal
      />;
  }
});

ReactDOM.render(
  <Hello />,
  document.getElementById('container')
);

var data1 = [
  {
    "name": "temp",
    "values": [
      {
        "x": 1465228838000,
        "y": 27.26
      },
      {
        "x": 1465229443000,
        "y": 27.32
      },
      {
        "x": 1465230049000,
        "y": 27.39
      },
      {
        "x": 1465230655000,
        "y": 27.36
      },
      {
        "x": 1465231261000,
        "y": 27.35
      },
      {
        "x": 1465231867000,
        "y": 27.34
      },
      {
        "x": 1465232472000,
        "y": 27.31
      },
      {
        "x": 1465233079000,
        "y": 27.3
      },
      {
        "x": 1465233684000,
        "y": 27.29
      },
      {
        "x": 1465234290000,
        "y": 27.27
      },
      {
        "x": 1465234896000,
        "y": 27.26
      },
      {
        "x": 1465235502000,
        "y": 27.25
      },
      {
        "x": 1465236107000,
        "y": 27.24
      },
      {
        "x": 1465236713000,
        "y": 27.24
      },
      {
        "x": 1465237319000,
        "y": 27.22
      },
      {
        "x": 1465237925000,
        "y": 27.21
      },
      {
        "x": 1465238530000,
        "y": 27.26
      },
      {
        "x": 1465239136000,
        "y": 27.26
      },
      {
        "x": 1465239743000,
        "y": 27.31
      },
      {
        "x": 1465240348000,
        "y": 27.36
      },
      {
        "x": 1465240954000,
        "y": 27.25
      },
      {
        "x": 1465241560000,
        "y": 27.25
      },
      {
        "x": 1465242165000,
       ...