React Base Fiddle (JSX)

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

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.1/immutable.min.js"></script>
<script src="https://fb.me/react-with-addons-15.1.0.min.js"></script>
<script src="https://fb.me/react-dom-15.1.0.min.js"></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

// All of the things which an enterprise can have
var enterpriseProperties = "abcdefghijklmnopqrstuvwxyz"

// Create a random enterprise
function createEnterprise() {
  var enterprise = {};
  for (var i=0; i < enterpriseProperties.length; i++) {
    enterprise[enterpriseProperties[i]] = Math.random()
  }
  return Immutable.Map(enterprise)
}

// Create a synergy full of enterprise
function createSynergy(n) {
  return Immutable.List(Array(n).fill(0).map(createEnterprise))
}

// Create a sequence of synergies to display
var sequence = []
for (var i=0; i<100; i++) {
  sequence.push((i % 4 == 0)
    ? createSynergy(100)
    : sequence[sequence.length - 1].map(x => x)
  )
}

var Enterprise = React.createClass({
  render: function() {
    var columns = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
    var out = []
    for (var i = 0; i < columns.length; i++) {
      var value = this.props.row.get(columns[i])
      var transformed = Math.floor(value*100)
      var fizz = (transformed % 3 == 0) ? 'F' : ''
      var buzz = (transformed % 5 == 0) ? 'B' : ''
      var fizzbuzz = fizz + buzz
      var formatted = transformed+fizzbuzz
      var style = {
        color: 'rgb(0,'+Math.floor(value*255)+',0)',
        width: '50px',
      }
      out.push(<td style={style}>{formatted}</td>)
    }
    return <tr>{out}</tr>
  }
});

var Synergy = React.createClass({
  render: function() {
    return (
      <table>
        <tbody>
          {
            this.props.data.map(function (row, i) {
              return <Enterprise row={row} key={i} />;
            })
          }
        </tbody>
      </table>
    )
  }
});

var App = React.createClass({
  getInitialState: function() {
    return {
      interval: null,
      synergy: sequence[0],
      i: 0,
    }
  },
  
  refreshSynergy: function() {
    var next = (this.state.i + 1) % sequence.length
    this.setState({
      synergy: sequence[next],
      i: next,
    })
  },

  handleClick: function() {
    if...