domspad/live_graph.html

## live_graph.html
<!DOCTYPE html>
<html>
    <body>
        <!-- 1 - The Base Html code: a header and the plot container -->
        <h3>StackExchange Active Community Counts</h3>
        <div id="global-plot"></div>


        <!-- 2 - The javascript libraries needed for the visualization: Plotly and socket.io-->
        <!-- socket.io for acquiring the data -->
        <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
        <!-- plotly for plotting the data -->
        <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>


        <!-- 3 - Our javascript code that hooks all the pieces together  -->
        <script>
            // our end of the socket connection
            var socket = io('http://' + document.domain + ':' + location.port);
            // the data-serving end of the socket connection
            var so_socket = new WebSocket("ws://qa.sockets.stackexchange.com/");
            // where we'll keep track of our data
            var counts = Object();

            /*
            When our socket opens -- we tell the other end what we are listening for.
            In this case, '155' represents the wider StackExchange network, and 'questions-active'
            notifies them that we want the feed of questions with activity going on.
            More info can be found at http://meta.stackexchange.com/questions/218343/how-do-the-stack-exchange-websockets-work-what-are-all-the-options-you-can-send
            */
            so_socket.onopen = function()
            {
                so_socket.send("155-questions-active");
            };

            /*
            This code fires when we recieve a packet of raw data from StackExchange.com.
            It will process the data, append it to our current data count, and ask Plotly to
            replot the new data.
            */
            so_socket.onmessage = function(raw_data)
            {
                // get community from data
                var data = JSON.parse(JSON.parse(raw_data["data"])["data"]);
                var community = data["apiSiteParameter"];

                // update community counts
                if (community in counts)
                {
                    counts[community] += 1;
                }
                else
                {
                    counts[community] = 1;
                }

                // Redraw communities graph
                var x = Object.keys(counts);
                var y = Array();
                for (var i in counts)
                {
                    y.push(counts[i]);
                }

                plot_data = [ {
                    x: x,
                    y: y,
                    type: 'bar'
                } ];

                Plotly.newPlot("global-plot", plot_data);
            };
        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<body>
	<!-- 1 - The Base Html code: a header and the plot container -->
	<h3>StackExchange Active Community Counts</h3>
	<div id="global-plot"></div>


	<!-- 2 - The javascript libraries needed for the visualization: Plotly and socket.io-->
	<!-- socket.io for acquiring the data -->
	<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
	<!-- plotly for plotting the data -->
	<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>


	<!-- 3 - Our javascript code that hooks all the pieces together -->
	<script>
	// our end of the socket connection
	var socket = io('http://' + document.domain + ':' + location.port);
	// the data-serving end of the socket connection
	var so_socket = new WebSocket("ws://qa.sockets.stackexchange.com/");
	// where we'll keep track of our data
	var counts = Object();

	/*
	When our socket opens -- we tell the other end what we are listening for.
	In this case, '155' represents the wider StackExchange network, and 'questions-active'
	notifies them that we want the feed of questions with activity going on.
	More info can be found at http://meta.stackexchange.com/questions/218343/how-do-the-stack-exchange-websockets-work-what-are-all-the-options-you-can-send
	*/
	so_socket.onopen = function()
	{
	so_socket.send("155-questions-active");
	};

	/*
	This code fires when we recieve a packet of raw data from StackExchange.com.
	It will process the data, append it to our current data count, and ask Plotly to
	replot the new data.
	*/
	so_socket.onmessage = function(raw_data)
	{
	// get community from data
	var data = JSON.parse(JSON.parse(raw_data["data"])["data"]);
	var community = data["apiSiteParameter"];

	// update community counts
	if (community in counts)
	{
	counts[community] += 1;
	}
	else
	{
	counts[community] = 1;
	}

	// Redraw communities graph
	var x = Object.keys(counts);
	var y = Array();
	for (var i in counts)
	{
	y.push(counts[i]);
	}

	plot_data = [ {
	x: x,
	y: y,
	type: 'bar'
	} ];

	Plotly.newPlot("global-plot", plot_data);
	};
	</script>
	</body>
	</html>