munaf-zz/dashboard.js

## dashboard.js
// Schema
/*
  {
    article: "Doubling time"
    logged_in: false
    revision: 511007853
    timestamp: 1347458208000
    wiki: "enwiki"
    __proto__: Object
  }
*/

// Data setup
var aft_socket = io.connect( 'http://stat1.wikimedia.org:31337' );
var edits_socket = io.connect( 'http://stat1.wikimedia.org:31338' );

var aft_data = { 'enwiki':[], 'eswiki':[], 'ptwiki':[], 'zhwiki':[] };
var edit_data = [0];
var buffer_size = 0;

// Socket update loop
aft_socket.on( 'updates', function( updates ) {

  var diff = {};

  // Count updates for each wiki
  for (var i = 0; i < updates.length; i++) {
    var wiki = updates[i][ 'wiki' ];

    if ( !diff.hasOwnProperty( wiki ) ) {
      diff[ wiki ] = 0;
    }

    diff[ wiki ]++;
  }

  // Push update count to data array
  for (wiki in diff) {
    if ( !aft_data.hasOwnProperty( wiki ) ) {
      aft_data[ wiki ] = [0];
    }
    aft_data[wiki].push(diff[wiki]);
  }


});


edits_socket.on( 'article-edit', function ( edit ) {
  console.log(edit);
});

drawRTEdits();

function drawRTEdits() {
}

function drawAFT() {
  var context = cubism.context()
    .serverDelay(0)
    .clientDelay(0)
    .step(1e2)
    .size(960);

  function revisions(lang) {
    return context.metric(function(start, stop, step, callback) {
      var values = [];

      // convert start & stop to milliseconds
      start = +start;
      stop = +stop;

      while (start < stop) {
        start += step;

        for (var i = 0; i < data[lang].length; i++) {

          values.push( data[lang][i] );

        }
      }

      callback(null, values);
    }, lang);
  }

  var endata = revisions('enwiki'),
      esdata = revisions('eswiki'),
      ptdata = revisions('ptwiki'),
      zhdata = revisions('zhwiki');

  d3.select("#chart").call(function(div) {

    div.append("div")
        .attr("class", "axis")
        .call(context.axis().orient("top"));

    div.selectAll(".horizon")
        .data([endata, esdata, ptdata, zhdata])
      .enter().append("div")
        .attr("class", "horizon")
        .call(context.horizon()
                .extent([0, 20])
                .height(60)
                .mode("mirror"));

    div.append("div")
        .attr("class", "rule")
        .call(context.rule());
  });

  // On mousemove, reposition the chart values to match the rule.
  context.on("focus", function(i) {
    d3.selectAll(".value").style("right", i == null ? null : context.size() - i + "px");
    d3.selectAll(".rule").style("left", i == null ? null : i + "px");
  });
}

## index.html
<!doctype html>
<html lang="en">
  <head>
    <title>E3 Dashboard</title>
    <script src=//stat1.wikimedia.org:31337/socket.io/socket.io.js></script>
    <script src=//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.1/jquery.min.js></script>
    <script src=//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js></script>
    <link rel="stylesheet" href="style.css"></link>
  </head>
  <body>
    <h1>E3 Dashboard</h1>
    <div id="cubism">
      <h2>AFTv4 CTA Activity</h2>
    </div>
    <div id="edit-chart">
      <h2>English Wikipedia Edits</h2>
    </div>
    <script src=//cdnjs.cloudflare.com/ajax/libs/d3/2.10.0/d3.v2.min.js></script>
    <script src="http://square.github.com/cubism/cubism.v1.js"></script>
    <script src="http://square.github.com/cubism/highlight.min.js"></script>
    <script src="dashboard.js"></script>
  </body>
</html>

## style.css
@import url(//fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700);


body {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  margin: 30px auto;
  width: 960px;
  position: relative;
}

h1, h2 {
  font-family: "Yanone Kaffeesatz";
}
header {
  padding: 6px 0;
}

.group {
  margin-bottom: 1em;
}

.axis {
  font: 10px sans-serif;
}

.axis text {
  -webkit-transition: fill-opacity 250ms linear;
}

.axis path {
  display: none;
}

.axis line {
  stroke: #000;
  shape-rendering: crispEdges;
}

.horizon {
  border-bottom: solid 1px #000;
  overflow: hidden;
  position: relative;
}

.horizon {
  border-top: solid 1px #000;
  border-bottom: solid 1px #000;
}

.horizon + .horizon {
  border-top: none;
}

.horizon canvas {
  display: block;
}

.horizon .title,
.horizon .value {
  bottom: 0;
  line-height: 30px;
  margin: 0 6px;
  position: absolute;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  white-space: nowrap;
}

.horizon .title {
  left: 0;
}

.horizon .value {
  right: 0;
}

.line {
  background: #000;
  opacity: .2;
  z-index: 2;
}

@media all and (max-width: 1439px) {
  body { margin: 0px auto; }
  .axis { position: static; }
  .axis.top, .axis.bottom { padding: 0; }
}
	// Schema
	/*
	{
	article: "Doubling time"
	logged_in: false
	revision: 511007853
	timestamp: 1347458208000
	wiki: "enwiki"
	__proto__: Object
	}
	*/

	// Data setup
	var aft_socket = io.connect( 'http://stat1.wikimedia.org:31337' );
	var edits_socket = io.connect( 'http://stat1.wikimedia.org:31338' );

	var aft_data = { 'enwiki':[], 'eswiki':[], 'ptwiki':[], 'zhwiki':[] };
	var edit_data = [0];
	var buffer_size = 0;

	// Socket update loop
	aft_socket.on( 'updates', function( updates ) {

	var diff = {};

	// Count updates for each wiki
	for (var i = 0; i < updates.length; i++) {
	var wiki = updates[i][ 'wiki' ];

	if ( !diff.hasOwnProperty( wiki ) ) {
	diff[ wiki ] = 0;
	}

	diff[ wiki ]++;
	}

	// Push update count to data array
	for (wiki in diff) {
	if ( !aft_data.hasOwnProperty( wiki ) ) {
	aft_data[ wiki ] = [0];
	}
	aft_data[wiki].push(diff[wiki]);
	}


	});


	edits_socket.on( 'article-edit', function ( edit ) {
	console.log(edit);
	});

	drawRTEdits();

	function drawRTEdits() {
	}

	function drawAFT() {
	var context = cubism.context()
	.serverDelay(0)
	.clientDelay(0)
	.step(1e2)
	.size(960);

	function revisions(lang) {
	return context.metric(function(start, stop, step, callback) {
	var values = [];

	// convert start & stop to milliseconds
	start = +start;
	stop = +stop;

	while (start < stop) {
	start += step;

	for (var i = 0; i < data[lang].length; i++) {

	values.push( data[lang][i] );

	}
	}

	callback(null, values);
	}, lang);
	}

	var endata = revisions('enwiki'),
	esdata = revisions('eswiki'),
	ptdata = revisions('ptwiki'),
	zhdata = revisions('zhwiki');

	d3.select("#chart").call(function(div) {

	div.append("div")
	.attr("class", "axis")
	.call(context.axis().orient("top"));

	div.selectAll(".horizon")
	.data([endata, esdata, ptdata, zhdata])
	.enter().append("div")
	.attr("class", "horizon")
	.call(context.horizon()
	.extent([0, 20])
	.height(60)
	.mode("mirror"));

	div.append("div")
	.attr("class", "rule")
	.call(context.rule());
	});

	// On mousemove, reposition the chart values to match the rule.
	context.on("focus", function(i) {
	d3.selectAll(".value").style("right", i == null ? null : context.size() - i + "px");
	d3.selectAll(".rule").style("left", i == null ? null : i + "px");
	});
	}
	<!doctype html>
	<html lang="en">
	<head>
	<title>E3 Dashboard</title>
	<script src=//stat1.wikimedia.org:31337/socket.io/socket.io.js></script>
	<script src=//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.1/jquery.min.js></script>
	<script src=//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js></script>
	<link rel="stylesheet" href="style.css"></link>
	</head>
	<body>
	<h1>E3 Dashboard</h1>
	<div id="cubism">
	<h2>AFTv4 CTA Activity</h2>
	</div>
	<div id="edit-chart">
	<h2>English Wikipedia Edits</h2>
	</div>
	<script src=//cdnjs.cloudflare.com/ajax/libs/d3/2.10.0/d3.v2.min.js></script>
	<script src="http://square.github.com/cubism/cubism.v1.js"></script>
	<script src="http://square.github.com/cubism/highlight.min.js"></script>
	<script src="dashboard.js"></script>
	</body>
	</html>
	@import url(//fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700);


	body {
	font-family: "Helvetica Neue", Helvetica, sans-serif;
	margin: 30px auto;
	width: 960px;
	position: relative;
	}

	h1, h2 {
	font-family: "Yanone Kaffeesatz";
	}
	header {
	padding: 6px 0;
	}

	.group {
	margin-bottom: 1em;
	}

	.axis {
	font: 10px sans-serif;
	}

	.axis text {
	-webkit-transition: fill-opacity 250ms linear;
	}

	.axis path {
	display: none;
	}

	.axis line {
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.horizon {
	border-bottom: solid 1px #000;
	overflow: hidden;
	position: relative;
	}

	.horizon {
	border-top: solid 1px #000;
	border-bottom: solid 1px #000;
	}

	.horizon + .horizon {
	border-top: none;
	}

	.horizon canvas {
	display: block;
	}

	.horizon .title,
	.horizon .value {
	bottom: 0;
	line-height: 30px;
	margin: 0 6px;
	position: absolute;
	text-shadow: 0 1px 0 rgba(255,255,255,.5);
	white-space: nowrap;
	}

	.horizon .title {
	left: 0;
	}

	.horizon .value {
	right: 0;
	}

	.line {
	background: #000;
	opacity: .2;
	z-index: 2;
	}

	@media all and (max-width: 1439px) {
	body { margin: 0px auto; }
	.axis { position: static; }
	.axis.top, .axis.bottom { padding: 0; }
	}