Skip to content

Instantly share code, notes, and snippets.

@jeffbaumes

jeffbaumes/index.html

Last active September 24, 2015 07:27
Show Gist options
  • Save jeffbaumes/712551 to your computer and use it in GitHub Desktop.
Save jeffbaumes/712551 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<html>
<head>
<title>Streamgraph</title>
<script type="text/javascript" src="http://vis.stanford.edu/protovis/protovis-r3.2.js"></script>
<script type="text/javascript" src="stream.js"></script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<script type="text/javascript+protovis">
var data = pv.range(0, 10, .1).map(function(x) {
return {x: x, y: Math.sin(x) + Math.random() * .5 + 2};
});
/* Sizing and scales. */
var w = 400,
h = 200,
x = pv.Scale.linear(data, function(d) d.x).range(0, w),
y = pv.Scale.linear(0, 4).range(0, h);
/* The root panel. */
var vis = new pv.Panel()
.width(w)
.height(h)
.bottom(20)
.left(20)
.right(10)
.top(5);
/* Y-axis and ticks. */
vis.add(pv.Rule)
.data(y.ticks(5))
.bottom(y)
.strokeStyle(function(d) d ? "#eee" : "#000")
.anchor("left").add(pv.Label)
.text(y.tickFormat);
/* X-axis and ticks. */
vis.add(pv.Rule)
.data(x.ticks())
.visible(function(d) d)
.left(x)
.bottom(-5)
.height(5)
.anchor("bottom").add(pv.Label)
.text(x.tickFormat);
/* The area with top line. */
vis.add(pv.Area)
.data(data)
.bottom(1)
.left(function(d) x(d.x))
.height(function(d) y(d.y))
.fillStyle("rgb(121,173,210)")
//.anchor("top").add(pv.Line)
// .lineWidth(3)
;
vis.render();
</script>
</body>
</html>
Raw
test.js
var thisIsATest = 0;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment