Skip to content

Instantly share code, notes, and snippets.

@max-mapper

max-mapper/protovis_example.html

Created July 28, 2010 03:55
Show Gist options
  • Save max-mapper/493325 to your computer and use it in GitHub Desktop.
Save max-mapper/493325 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
protovis_example.html
<html>
<head>
<title>Data</title>
<script type="text/javascript" src="http://protovis-js.googlecode.com/svn/trunk/protovis-r3.1.js"></script>
</head>
<body>
<div id='content' style='width: 1115px; margin-left: auto; margin-right: auto'>
<div id='label'>
<center><h1 style='font-family:"Futura";font-weight:100; width: 800px; margin-left: auto; margin-right: auto'>Protovis Example</h1></center>
<center><h2 style='font-family:"Futura";font-weight:100; width: 800px; margin-left: auto; margin-right: auto'>Line Graph</h2> </center>
</div>
<div id='graph'>
<script type="text/javascript+protovis">
var data = [
{ date: "9/2008", yaxis: 3 },
{ date: "10/2008", yaxis: 304 },
{ date: "11/2008", yaxis: 1223 },
{ date: "12/2008", yaxis: 1457 },
{ date: "1/2009", yaxis: 1105 },
{ date: "2/2009", yaxis: 1338 },
{ date: "3/2009", yaxis: 1235 },
{ date: "4/2009", yaxis: 1687 },
{ date: "5/2009", yaxis: 1059 },
{ date: "6/2009", yaxis: 1750 },
{ date: "7/2009", yaxis: 3668 },
{ date: "8/2009", yaxis: 2438 },
{ date: "9/2009", yaxis: 6347 }
];
var vis = new pv.Panel().width(1090).height(429).left(10).right(40).bottom(14);
var max = pv.max(data, function(d) Math.max(d.yaxis));
var width = (1220 - 10 - 40 + 6) / (data.length * 3);
function scale(x) Math.round(420 * x / max) - .5;
vis.add(pv.Rule)
.data(pv.range(0, max + 1, 200))
.strokeStyle(function(i) i ? "#ddd" : "black")
.bottom(function(i) scale(i))
.anchor("right").add(pv.Label)
.textStyle("#666")
.visible(function() !(this.index % 2));
vis.add(pv.Line)
.data(data)
.lineWidth(3)
.left(function() this.index * width * 3)
.strokeStyle("#fcaf21")
.bottom(function(d) scale(d.yaxis))
.add(pv.Label)
.textBaseline("top")
.textStyle("#666")
.bottom(-3)
.text(function(d) Date.parse(d.date, "%m/%y").format("%b"))
.visible(function() this.index % 1 == 0);
vis.render();
</script>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment