Code from http://pradeepgowda.com/programming/tuft-graphics-processingjs/

tufte_processing.js

<script src="http://pradeepgowda.com/js/processing.js" type="text/javascript"></script>
<script src="http://pradeepgowda.com/js/init.js" type="text/javascript"></script>

<script type="text/javascript">
Array.max = function( array ){
    return Math.max.apply( Math, array );
};

Array.min = function( array ){
    return Math.min.apply( Math, array );
};
</script>
<script type="application/processing">
PGraphics pg;

void setup() {
  size(600,700);
  pg = createGraphics(600, 700, P3D);
  stroke(11,11,255);
  fill(11,11,255); 
}

ypos = function(val, minval, maxval){
  return height * (0.9 - 0.8 * (val - minval) / (maxval - minval));
};

void draw() {
  PFont fontA = loadFont("Verdana");
  textFont(fontA, 12);
  var data = [ ['Sweden', 46.9, 57.4, 0., 0.],
         ['Netherlands', 44.0, 55.8, .3, 0.],
         ['Norway', 43.5, 52.2, 0., 0.],
         ['Britain', 40.7, 39.0, 0., 0.],
         ['France', 39.0, 43.4, 0., 0.6],
         ['Germany', 37.5, 42.9, 0., -0.4],
         ['Belgium', 35.2, 43.2, 0., 0.],
         ['Canada', 35.2, 35.8, .8, 0.4],
         ['Finland', 34.9, 38.2, -0.5, 0.],
         ['Italy', 30.4, 35.7, 0.3, -0.3],
         ['United States', 30.3, 32.5, -0.3, 0.],
         ['Greece', 26.8, 30.6, 0.4, 0.],
         ['Switzerland', 26.5, 33.2, -0.2, 0.1],
         ['Spain', 22.5, 27.1, 0., 0.3],
         ['Japan', 20.7, 26.6, 0., 0.], ]
  text("Current Receipts of Goverment as a Percentage of Gross Domestic Product, 1970 and 1979", 20, 50, 215);
  text("1970", width*.28, height*0.03);
  text("1979", width*.68, height*0.03);
  var alldata = [];
  for (var i=0; i < data.length; ++i){
    alldata.push(data[i][1]);
    alldata.push(data[i][2]);
  }
  var minval = Array.min(alldata);
  var maxval = Array.max(alldata);

  for (var i=0; i < data.length; ++i){
    var label = data[i][0]; var start = data[i][1];
    var end = data[i][2]; var startfudge = data[i][3];
    var endfudge = data[i][4]; //for readability
    textAlign(RIGHT);
    text(label, 0, ypos(start+startfudge,minval, maxval)+4, 0.25*width);
    text(start.toString(), 0.25*width, ypos(start+startfudge,minval,maxval)+4, 0.07*width);
    textAlign(LEFT);
    text(label, width*.75, ypos(end+endfudge,minval,maxval)+4);
    text(end.toString(), 0.68*width, ypos(end+endfudge,minval,maxval)+4, 0.07*width);
    line(width*.33, ypos(start,minval,maxval), width*.67, ypos(end,minval,maxval));
  }
}
</script><canvas width="600" height="700"></canvas>