dodijk/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>Entity Cubism.js</title>
<style>

body {
  font-family: Helvetica, sans-serif;
}

#body {
	position: relative;
}

svg {
  font: 10px sans-serif;
}

.axis path, .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.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;
}

#entities { min-height: 155px; width: 720px; }

</style>
<div id="body">

<div id="entities">

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://square.github.io/cubism/cubism.v1.js"></script>
<script>

var context = cubism.context()
    .serverDelay(0)
    .clientDelay(0)
    .step(1e3)
    .size(720);

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

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

  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");
});

</script>

<script>

function entity(name) {
  var totals = [],
      values = [],
      i = 0,
      value = 0,
      first, last;
  return context.metric(function(start, stop, step, callback) {
    start = +start, stop = +stop;
    if (isNaN(last)) last = start;
    while (last < stop) {
      last += step;
	  value = entities[name];
      totals.push(value);
    }
    if (isNaN(first)) first = totals.length;
	values = totals.map(function(d, i) {
		var last60 = totals.slice(Math.max(first, i-60), i);
		return (d-last60[0])*60/last60.length;
	});
	values = values.slice(1).slice((start - stop) / step);
//	values = values.map(function(d, i) { return i ? (values[i-1] + d)/2 : d });
    callback(null, values);
  }, name);
}

var entities = {};
var entityMetrics = {};
function updateEntities(newEntities) {
	var different = false;
	for(newEntity in newEntities)
		if(!(newEntity in entities)) different = true;

	entities = newEntities;
	if(different) d3.select("#entities").call(function(div) {
		for(newEntity in newEntities)
			if (!(newEntity in entityMetrics))
				entityMetrics[newEntity] = entity(newEntity);
		var newEntityMetrics = [];
		for(entityMetric in entityMetrics)
			newEntityMetrics.push(entityMetrics[entityMetric]);
		div.selectAll(".horizon")
	      .data(newEntityMetrics)
	    .enter().append("div")
	      .attr("class", "horizon")
	      .call(context.horizon().extent([0, 100]));
    });
}

</script>

<script>

// Fake a bit of dynamic data.
updateEntities({
	"Vladimir Putin": 20,
    "Ukraine": 14,
    "Hypocrisy": 9,
    "Inhalant abuse": 5,
    "Barack Obama": 4
});
setInterval(function() {
	newEntities = {}
	newEntities["Vladimir Putin"] = entities["Vladimir Putin"] + Math.floor(Math.random()*3.1);
	newEntities["Ukraine"] = entities["Ukraine"] + Math.floor(Math.random()*2.6);
	newEntities["Hypocrisy"] = entities["Hypocrisy"] + Math.floor(Math.random()*2.2);
	newEntities["Inhalant abuse"] = entities["Inhalant abuse"] + Math.floor(Math.random()*1.8);
	if(entities["Barack Obama"] > 7) newEntities["Mark Rutte"] = 5;
	else if("Mark Rutte" in entities)
		newEntities["Mark Rutte"] = entities["Mark Rutte"] + Math.floor(Math.random()*1.3);
	else
		newEntities["Barack Obama"] = entities["Barack Obama"] + Math.floor(Math.random()*1.3);
	updateEntities(newEntities);
}, 1000)


</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<title>Entity Cubism.js</title>
	<style>

	body {
	font-family: Helvetica, sans-serif;
	}

	#body {
	position: relative;
	}

	svg {
	font: 10px sans-serif;
	}

	.axis path, .axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.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;
	}

	#entities { min-height: 155px; width: 720px; }

	</style>
	<div id="body">

	<div id="entities">

	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script src="http://square.github.io/cubism/cubism.v1.js"></script>
	<script>

	var context = cubism.context()
	.serverDelay(0)
	.clientDelay(0)
	.step(1e3)
	.size(720);

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

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

	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");
	});

	</script>

	<script>

	function entity(name) {
	var totals = [],
	values = [],
	i = 0,
	value = 0,
	first, last;
	return context.metric(function(start, stop, step, callback) {
	start = +start, stop = +stop;
	if (isNaN(last)) last = start;
	while (last < stop) {
	last += step;
	value = entities[name];
	totals.push(value);
	}
	if (isNaN(first)) first = totals.length;
	values = totals.map(function(d, i) {
	var last60 = totals.slice(Math.max(first, i-60), i);
	return (d-last60[0])*60/last60.length;
	});
	values = values.slice(1).slice((start - stop) / step);
	// values = values.map(function(d, i) { return i ? (values[i-1] + d)/2 : d });
	callback(null, values);
	}, name);
	}

	var entities = {};
	var entityMetrics = {};
	function updateEntities(newEntities) {
	var different = false;
	for(newEntity in newEntities)
	if(!(newEntity in entities)) different = true;

	entities = newEntities;
	if(different) d3.select("#entities").call(function(div) {
	for(newEntity in newEntities)
	if (!(newEntity in entityMetrics))
	entityMetrics[newEntity] = entity(newEntity);
	var newEntityMetrics = [];
	for(entityMetric in entityMetrics)
	newEntityMetrics.push(entityMetrics[entityMetric]);
	div.selectAll(".horizon")
	.data(newEntityMetrics)
	.enter().append("div")
	.attr("class", "horizon")
	.call(context.horizon().extent([0, 100]));
	});
	}

	</script>

	<script>

	// Fake a bit of dynamic data.
	updateEntities({
	"Vladimir Putin": 20,
	"Ukraine": 14,
	"Hypocrisy": 9,
	"Inhalant abuse": 5,
	"Barack Obama": 4
	});
	setInterval(function() {
	newEntities = {}
	newEntities["Vladimir Putin"] = entities["Vladimir Putin"] + Math.floor(Math.random()*3.1);
	newEntities["Ukraine"] = entities["Ukraine"] + Math.floor(Math.random()*2.6);
	newEntities["Hypocrisy"] = entities["Hypocrisy"] + Math.floor(Math.random()*2.2);
	newEntities["Inhalant abuse"] = entities["Inhalant abuse"] + Math.floor(Math.random()*1.8);
	if(entities["Barack Obama"] > 7) newEntities["Mark Rutte"] = 5;
	else if("Mark Rutte" in entities)
	newEntities["Mark Rutte"] = entities["Mark Rutte"] + Math.floor(Math.random()*1.3);
	else
	newEntities["Barack Obama"] = entities["Barack Obama"] + Math.floor(Math.random()*1.3);
	updateEntities(newEntities);
	}, 1000)


	</script>