Stream Data to Create Realtime Charts w/ D3.js and Rickshaw

1.html

<script type="text/javascript" src="//pubnub.github.io/eon/v/eon/1.0.0/eon.js"></script>
<link type="text/css" rel="stylesheet" href="//pubnub.github.io/eon/v/eon/1.0.0/eon.css"/>
<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.17.0.js"></script>

<script src="../vendor/d3.v3.js"></script>
<script src="../rickshaw.min.js"></script>
<script src="../src/js/Rickshaw.Fixtures.PubNub.js"></script>

2.js

<div id="chart"></div>

<script>
var graph = new Rickshaw.Graph( {
    element: document.getElementById("chart"),
    width: 900,
    height: 500,
    renderer: 'area',
    stroke: true,
    preserve: true,
    series: [
        {
            color: 'steelblue',
            name: 'Cats',
            data: []
        },
        {
            color: 'lightblue',
            name: 'Dogs',
            data: []
        }
    ]
});
graph.render();
</script>

3.js

<script>
eon.chart({
    pubnub: PUBNUB,
    channels: ['rickshaw-channel-1'],
    limit: 20,
    generate: {
         bindto: '#body-spline'
    }
});
</script>

4.js

{
  y: [
    Math.random() * 99, 
    Math.random() * 99
  ],
  x: new Date().getTime()
}

5.js

var pubnub = new PubNub({
  publishKey: 'demo',
  subscribeKey: 'demo'
});
setInterval(function(){

  pubnub.publish({
    channel: 'rickshaw-channel-1',
    message: {
      eon: {
        'Austin': Math.floor(Math.random() * 99),
        'New York': Math.floor(Math.random() * 99),
        'San Francisco': Math.floor(Math.random() * 99),
        'Portland': Math.floor(Math.random() * 99)
      }
    }
  });

}, 1000);
</script>