Protovis scatterplot of HTML tag frequencies from 1990 to 1991

<!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>

-- 
Sean B. Palmer, http://inamidst.com/sbp/

Received on Saturday, 1 January 2011 13:36:58 UTC