mchelen/tufte_processing.html

## tufte_processing.html
<!DOCTYPE html>
<html>
<head>
  <script src="http://github.com/jeresig/processing-js/raw/master/processing.min.js"></script>
  <script src="http://github.com/jeresig/processing-js/raw/master/examples/init.js"></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>
</head>
<body>


<script type="application/processing">
// written by Pradeep Gowda http://pradeepgowda.com/programming/tuft-graphics-processingjs/

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>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://github.com/jeresig/processing-js/raw/master/processing.min.js"></script>
	<script src="http://github.com/jeresig/processing-js/raw/master/examples/init.js"></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>
	</head>
	<body>



	<script type="application/processing">
	// written by Pradeep Gowda http://pradeepgowda.com/programming/tuft-graphics-processingjs/

	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, height0.03);
	text("1979", width.68, height0.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.25width, ypos(start+startfudge,minval,maxval)+4, 0.07width);
	textAlign(LEFT);
	text(label, width*.75, ypos(end+endfudge,minval,maxval)+4);
	text(end.toString(), 0.68width, ypos(end+endfudge,minval,maxval)+4, 0.07width);
	line(width.33, ypos(start,minval,maxval), width.67, ypos(end,minval,maxval));
	}
	}
	</script>

	<canvas width="600" height="700"></canvas>

	</body>
	</html>