|
<!DOCTYPE html> |
|
<title>Scatterplot</title> |
|
<script type="text/javascript" src="protovis-r3.2.js"></script> |
|
<div id="fig"> |
|
<script type="text/javascript+protovis"> |
|
var data = [ |
|
{date: new Date(1991, 1, 28), tag: "dd", count: 30}, |
|
{date: new Date(1991, 1, 28), tag: "p", count: 1}, |
|
{date: new Date(1991, 1, 28), tag: "title", count: 4}, |
|
// [...] |
|
]; |
|
|
|
var tags = ["a", "p", "li", "dt", "dd", "h2", "h1", "title", "nextid", "ul", |
|
"address", "xmp", "h3", "dl", "listing", "ol", "hp2"]; |
|
var etags = ["a", "p", "li", "dt", "dd", "h2", "h1", "title", "nextid", "ul", |
|
"address", "xmp", "h3", "dl", "listing", "ol", "hp2"]; |
|
|
|
/* Sizing and scales. */ |
|
var w = 720, |
|
h = 35, |
|
x = pv.Scale.linear(data, function(d) d.date).range(0, w), |
|
y = pv.Scale.linear(0, 10), |
|
c = pv.Scale.log(1, 100).range("orange", "brown"); |
|
|
|
/* The root panel. */ |
|
var vis = new pv.Panel() |
|
.width(w) |
|
.height(h * pv.keys(y).length) |
|
.bottom(20) |
|
.left(50) |
|
.right(25) |
|
.top(25); |
|
|
|
/* Y-axis and ticks. */ |
|
vis.add(pv.Bar) |
|
.fillStyle("#fff") |
|
.data(y.ticks()) |
|
.bottom(y) |
|
.strokeStyle(function(d) d ? "#eee" : "#000") |
|
.anchor("left").add(pv.Label) |
|
// .visible(function(d) d > 0 && d < 1) |
|
.text(function(d) d.tag); |
|
|
|
/* X-axis and ticks. */ |
|
vis.add(pv.Rule) |
|
.data(x.ticks()) |
|
.left(x) |
|
.strokeStyle(function(d) d ? "#eee" : "#000") |
|
.anchor("bottom").add(pv.Label) |
|
// .visible(function(d) d > 0 && d < 100) |
|
.text(x.tickFormat); |
|
|
|
var done = []; |
|
|
|
/* The dot plot! */ |
|
vis.add(pv.Panel) |
|
.data(data) |
|
.add(pv.Dot) |
|
.left(function(d) x(d.date)) |
|
.top(function(d) tags.indexOf(d.tag) * 17) |
|
// .bottom(function(d) y(d.tag)) |
|
.visible(function(d) tags.indexOf(d.tag) > -1) |
|
.strokeStyle(function(d) c(d.count)) |
|
.fillStyle(function() this.strokeStyle().alpha(.2)) |
|
.size(function(d) d.count) |
|
.title(function(d) d.count.toFixed(1)) |
|
.anchor("left").add(pv.Label) |
|
.visible(function(d) (etags.indexOf(d.tag) > -1) && (etags.splice(etags.indexOf(d.tag), 1))) |
|
.left(-1) |
|
.text(function(d) d.tag); |
|
|
|
vis.render(); |
|
</script> |
|
</div> |
