Skip to content

Instantly share code, notes, and snippets.

@rhuss
Created June 26, 2012 06:57
Show Gist options
  • Save rhuss/2993922 to your computer and use it in GitHub Desktop.
Save rhuss/2993922 to your computer and use it in GitHub Desktop.
Ruler issue with Cubism 1.2.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css" media="all">
@import url("http://square.github.com/cubism/style.css");
</style>
<script type="text/javascript" src="http://square.github.com/cubism/d3.v2.js"></script>
<script type="text/javascript" src="http://square.github.com/cubism/cubism.v1.js"></script>
</head>
<body>
<div style="margin-left: auto; margin-right: auto; width: 960px">
<h2>Ruler Issue</h2>
<div id="example1"></div>
</div>
<!-- Sample take directly from http://square.github.com/cubism/ -->
<script type="text/javascript">
function random(name) {
var value = 0,
values = [],
i = 0,
last;
return context.metric(function(start, stop, step, callback) {
start = +start, stop = +stop;
if (isNaN(last)) last = start;
while (last < stop) {
last += step;
value = Math.max(-10, Math.min(10, value + .8 * Math.random() - .4 + .2 * Math.cos(i += .2)));
values.push(value);
}
callback(null, values = values.slice((start - stop) / step));
}, name);
}
var context = cubism.context()
.serverDelay(0)
.clientDelay(0)
.step(1e3)
.size(960);
var foo = random("foo"),
bar = random("bar");
d3.select("#example1").call(function(div) {
div.append("div")
.attr("class", "axis")
.call(context.axis().orient("top"));
div.selectAll(".horizon")
.data([foo, bar, foo.add(bar), foo.subtract(bar)])
.enter().append("div")
.attr("class", "horizon")
.call(context.horizon().extent([-20, 20]));
div.append("div")
.attr("class", "rule")
.call(context.rule());
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment