Button, The Chronicle

by Assaf Lavie

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/epoch/0.6.0/epoch.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/epoch/0.6.0/epoch.min.js"></script>
<h1><a href="http://www.reddit.com/r/thebutton/">Button</a>, The Chronicle</h1>

<h2>Participants: <span id="counter"/></h2>
<div id="participantChart" style="width: 100%; height: 200px"></div>
<small>by <a href="https://twitter.com/AssafLavie">@assaflavie</a></small>

CSS

body {
    font-family: sans-serif; 
    padding: 10px;    
}
h1 {
    font-weight: bold;
    margin-bottom: 8px;            
}
label {
     font-size: small;   
}
#controls {
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #000;    
}

JavaScript

function dataPoint(datum) {
    return [{
        time: (new Date()).getTime(),
        y: datum
    }];
}

url = "wss://wss.redditmedia.com/thebutton?h=0622125ae080f7b1567c18a6015a44d07d6b3647&e=1428001198";

participantChart = null;

function initChart(elm, label, firstData) {
    return elm.epoch({
        axes: ['right'],
        historySize: 1000,
        windowSize: 200,
        type: 'time.line',
        data: [{
            label: label,
            values: [dataPoint(firstData)]
        }]
    });
}

function pushDataPoint(participants) {
    if (!participantChart) {
        participantChart = initChart($('#participantChart'), "Participants", dataPoint(participants));
    } else {
        participantChart.push(dataPoint(participants));
    }
}

//First test for the browsers support for WebSockets
if (!window.WebSocket) {
    alert("Your browser does not support the WebSocket API!");
} else {
    socket = new WebSocket(url);
    socket.onmessage = function(message) {
        o = JSON.parse(message.data).payload;
        $("#counter").text(o.participants_text);
        participants = parseInt(o.participants_text.replace(/\D/, ""));
        pushDataPoint(participants);
    };
}