davekinkead/index.html

## index.html
<html>
	<head>
		<title>Montecarlo simulation for epistemic justifications of democracy</title>
		<script src="http://mbostock.github.com/d3/d3.v2.js"></script>
		<style>
			/* tell the SVG path to be a thin blue line without any area fill */
			path {
				stroke: steelblue;
				stroke-width: 1;
				fill: none;
			}

			.axis {
			  shape-rendering: crispEdges;
			}

			.x.axis line {
			  stroke: lightgrey;
			}

			.x.axis .minor {
			  stroke-opacity: .5;
			}

			.x.axis path {
			  display: none;
			}

			.y.axis line, .y.axis path {
			  fill: none;
			  stroke: #000;
			}
		</style>
	</head>
	<body>

	<div id="graph" class="aGraph" style="position:absolute;top:0px;left:0; float:left;"></div>

	<script>
		/* implementation heavily influenced by http://bl.ocks.org/1166403 */

		// define dimensions of graph
		var m = [80, 80, 80, 80]; // margins
		var w = 1000 - m[1] - m[3]; // width
		var h = 600 - m[0] - m[2]; // height

		// create a simple data array that we'll plot with a line (this array represents only the Y values, X will just be the index location)
		var data = [1.000000000000000, 0.879000000000000, 0.780566666666668, 0.605133333333333, 0.654561904761908, 0.575226190476191, 0.577565079365081, 0.636859595959595, 0.488981818181818, 0.525862937062936, 0.622211521811521, 0.556970695970696, 0.598685886662358, 0.563234827264238, 0.586130711582879, 0.563247799646174, 0.564355384450429, 0.571938437662006, 0.571304385469602, 0.559565083756822, 0.553623257611953, 0.593118102750710, 0.562702785743880, 0.537617972576593, 0.538387242135362, 0.516431858340645, 0.554617654313723, 0.522294949177467, 0.543927359613749, 0.528646600779746, 0.566020807425911, 0.515592476323127, 0.537558780847511, 0.567612899217217, 0.553276889734666, 0.527523222828049, 0.529761380591474, 0.520493358624370, 0.516885368089920, 0.576115644563489, 0.537564066150889, 0.523426295464463, 0.535242132260400, 0.499895357596349, 0.517182000758052, 0.548707758302733, 0.529670064997570, 0.557810394025934, 0.539730397754187, 0.526570934742345];

		// X scale will fit all values from data[] within pixels 0-w
		var x = d3.scale.linear().domain([0, data.length]).range([0, w]);
		// Y scale will fit values from 0-10 within pixels h-0 (Note the inverted domain for the y-scale: bigger is up!)
		var y = d3.scale.linear().domain([0.3, 1]).range([h, 0]);
			// automatically determining max range can work something like this
			// var y = d3.scale.linear().domain([0, d3.max(data)]).range([h, 0]);

		// create a line function that can convert data[] into x and y points
		var line = d3.svg.line()
			// assign the X function to plot our line as we wish
			.x(function(d,i) {
				// verbose logging to show what's actually being done
				console.log('Plotting X value for data point: ' + d + ' using index: ' + i + ' to be at: ' + x(i) + ' using our xScale.');
				// return the X coordinate where we want to plot this datapoint
				return x(i);
			})
			.y(function(d) {
				// verbose logging to show what's actually being done
				console.log('Plotting Y value for data point: ' + d + ' to be at: ' + y(d) + " using our yScale.");
				// return the Y coordinate where we want to plot this datapoint
				return y(d);
			})

			// Add an SVG element with the desired dimensions and margin.
			var graph = d3.select("#graph").append("svg:svg")
			      .attr("width", w + m[1] + m[3])
			      .attr("height", h + m[0] + m[2])
			    .append("svg:g")
			      .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

			// create yAxis
			var xAxis = d3.svg.axis().scale(x).tickSize(-h).tickSubdivide(true);
			// Add the x-axis.
			graph.append("svg:g")
			      .attr("class", "x axis")
			      .attr("transform", "translate(0," + h + ")")
			      .call(xAxis);


			// create left yAxis
			var yAxisLeft = d3.svg.axis().scale(y).ticks(4).orient("left");
			// Add the y-axis to the left
			graph.append("svg:g")
			      .attr("class", "y axis")
			      .attr("transform", "translate(-25,0)")
			      .call(yAxisLeft);

  			// Add the line by appending an svg:path element with the data line we created above
			// do this AFTER the axes above so that the line is above the tick-lines
  			graph.append("svg:path").attr("d", line(data));


	</script>
	</body>
</html>
	<html>
	<head>
	<title>Montecarlo simulation for epistemic justifications of democracy</title>
	<script src="http://mbostock.github.com/d3/d3.v2.js"></script>
	<style>
	/* tell the SVG path to be a thin blue line without any area fill */
	path {
	stroke: steelblue;
	stroke-width: 1;
	fill: none;
	}

	.axis {
	shape-rendering: crispEdges;
	}

	.x.axis line {
	stroke: lightgrey;
	}

	.x.axis .minor {
	stroke-opacity: .5;
	}

	.x.axis path {
	display: none;
	}

	.y.axis line, .y.axis path {
	fill: none;
	stroke: #000;
	}
	</style>
	</head>
	<body>

	<div id="graph" class="aGraph" style="position:absolute;top:0px;left:0; float:left;"></div>

	<script>
	/* implementation heavily influenced by http://bl.ocks.org/1166403 */

	// define dimensions of graph
	var m = [80, 80, 80, 80]; // margins
	var w = 1000 - m[1] - m[3]; // width
	var h = 600 - m[0] - m[2]; // height

	// create a simple data array that we'll plot with a line (this array represents only the Y values, X will just be the index location)
	var data = [1.000000000000000, 0.879000000000000, 0.780566666666668, 0.605133333333333, 0.654561904761908, 0.575226190476191, 0.577565079365081, 0.636859595959595, 0.488981818181818, 0.525862937062936, 0.622211521811521, 0.556970695970696, 0.598685886662358, 0.563234827264238, 0.586130711582879, 0.563247799646174, 0.564355384450429, 0.571938437662006, 0.571304385469602, 0.559565083756822, 0.553623257611953, 0.593118102750710, 0.562702785743880, 0.537617972576593, 0.538387242135362, 0.516431858340645, 0.554617654313723, 0.522294949177467, 0.543927359613749, 0.528646600779746, 0.566020807425911, 0.515592476323127, 0.537558780847511, 0.567612899217217, 0.553276889734666, 0.527523222828049, 0.529761380591474, 0.520493358624370, 0.516885368089920, 0.576115644563489, 0.537564066150889, 0.523426295464463, 0.535242132260400, 0.499895357596349, 0.517182000758052, 0.548707758302733, 0.529670064997570, 0.557810394025934, 0.539730397754187, 0.526570934742345];

	// X scale will fit all values from data[] within pixels 0-w
	var x = d3.scale.linear().domain([0, data.length]).range([0, w]);
	// Y scale will fit values from 0-10 within pixels h-0 (Note the inverted domain for the y-scale: bigger is up!)
	var y = d3.scale.linear().domain([0.3, 1]).range([h, 0]);
	// automatically determining max range can work something like this
	// var y = d3.scale.linear().domain([0, d3.max(data)]).range([h, 0]);

	// create a line function that can convert data[] into x and y points
	var line = d3.svg.line()
	// assign the X function to plot our line as we wish
	.x(function(d,i) {
	// verbose logging to show what's actually being done
	console.log('Plotting X value for data point: ' + d + ' using index: ' + i + ' to be at: ' + x(i) + ' using our xScale.');
	// return the X coordinate where we want to plot this datapoint
	return x(i);
	})
	.y(function(d) {
	// verbose logging to show what's actually being done
	console.log('Plotting Y value for data point: ' + d + ' to be at: ' + y(d) + " using our yScale.");
	// return the Y coordinate where we want to plot this datapoint
	return y(d);
	})

	// Add an SVG element with the desired dimensions and margin.
	var graph = d3.select("#graph").append("svg:svg")
	.attr("width", w + m[1] + m[3])
	.attr("height", h + m[0] + m[2])
	.append("svg:g")
	.attr("transform", "translate(" + m[3] + "," + m[0] + ")");

	// create yAxis
	var xAxis = d3.svg.axis().scale(x).tickSize(-h).tickSubdivide(true);
	// Add the x-axis.
	graph.append("svg:g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + h + ")")
	.call(xAxis);


	// create left yAxis
	var yAxisLeft = d3.svg.axis().scale(y).ticks(4).orient("left");
	// Add the y-axis to the left
	graph.append("svg:g")
	.attr("class", "y axis")
	.attr("transform", "translate(-25,0)")
	.call(yAxisLeft);

	// Add the line by appending an svg:path element with the data line we created above
	// do this AFTER the axes above so that the line is above the tick-lines
	graph.append("svg:path").attr("d", line(data));


	</script>
	</body>
	</html>