HTML
<script src="http://vis.stanford.edu/protovis/protovis-r3.2.js"></script>
<div id="center"><div id="fig">
<script type="text/javascript+protovis">
var d1 = [123.2272339,119.7377472,120.7516861,123.0242538,117.153801,115.8917084,116.0157013,116.5079498,117.6062317,116.6430359,114.6888275,110.8925247,115.9662247,115.2125854,112.938797,113.5214844,113.9291,114.6692886,113,111.7201309,115.962532,113.7404633,112.3142548,114,113.195549,112.1496429,113.6989365,111.2608414,112,114.8261185,117.145546,115.7193375,115,114,115.7253876,116,117,119.2646713,123.4548492,131.0422058,130.0486145,131.8208923,132.7519379,133.2447357,136.1759949,141.4139404,145.4695129,147.7685852,147.4279175,148.2247467,149.8389587,149.1700287,152.05867,143.3739929,147.9070587,153.4486847,161.919632,159.177124,161.2537384,170.40979,182.4767456,196.4714355,209.7082825,198.7297211,193.3135529,195.5899506,221.2919617,209.1614227,213.5752411,224.8596191,238.8690948,226.8387451,207.4434052,205.5179596,193.2910004,207.4564362,211.4116058,199.3461151,183.8716888,165.7519531];
var data = pv.range(0, d1.length, 1).map(function(x) {
return {x: x, y: d1[x]};
});
/* Sizing and scales. */
var w = 500,
h = 200,
x = pv.Scale.linear(data, function(d) d.x).range(0, w),
y = pv.Scale.linear(100, 250).range(0, h);
/* The root panel. */
var vis = new pv.Panel()
.width(w)
.height(h)
.bottom(20)
.left(20)
.right(10)
.fillStyle("rgba(255,255,255,0.3)")
.top(5);
/* Y-axis and ticks. */
vis.add(pv.Rule)
.data(y.ticks(5))
.bottom(y)
.visible(1)
.strokeStyle(function(d) d ? "#666" : "#000")
.anchor("left").add(pv.Label)
.text(y.tickFormat).textStyle('#ccc');
/* X-axis and ticks. */
vis.add(pv.Rule)
.data(x.ticks())
.visible(function(d) d)
.left(x)
.bottom(-5)
.strokeStyle(function(d) d ? "#666" : "#000")
.anchor("bottom").add(pv.Label)
.text(x.tickFormat).textStyle('#ccc');
/* The area with...