futuraprime/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <title>A Website!</title>
    <script type='text/javascript' src="https://raw.github.com/mbostock/d3/master/d3.js"></script>
    <style type="text/css">
    	.rule {
    		stroke-width: 1;
    		stroke: #999;
    	}
    	.function {
    		stroke-width: 1;
    		stroke: red;
    		fill: none;
    	}
    </style>
</head>
<body>
	<div id="chart"></div>
    <script>
    	var height = 400, width = 400;
        var chart = d3.select('#chart').append('svg')
        	.attr('width', width + 50)
        	.attr('height', height + 50);

        // scales
        var yscale = d3.scale.linear()
			.domain([-10, 10])
			.range([25, 25 + width]);
		var xscale = d3.scale.linear()
			.domain([-10, 10])
			.range([25 + height, 25]);

		// axes
		var yaxis = chart.append('line')
			.attr( 'class', 'rule' )
			.attr( 'x1', 25 )
			.attr( 'x2', 25 + width )
			.attr( 'y1', yscale(0) )
			.attr( 'y2', yscale(0) )
		var xaxis = chart.append('line')
			.attr( 'class', 'rule' )
			.attr( 'y1', 25 )
			.attr( 'y2', 25 + height )
			.attr( 'x1', xscale(0) )
			.attr( 'x2', xscale(0) )

		// f(x) = x^2;
		var fn = function(x) { return x * x; }

		var resolution = 10;

		var line = d3.svg.line()
			.y( function(d) {
				return xscale( fn(d) );
			} )
			.x( function(d) {
				return yscale(d);
			} );

		var data = [];
		for (var i = 25; i < width + 25; i += resolution) {
			data.push( xscale.invert(i) );
		}

		var rendered = chart.append('svg:path')
			.attr( 'class', 'function' )
			.attr( 'd', line(data) );

    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>A Website!</title>
	<script type='text/javascript' src="https://raw.github.com/mbostock/d3/master/d3.js"></script>
	<style type="text/css">
	.rule {
	stroke-width: 1;
	stroke: #999;
	}
	.function {
	stroke-width: 1;
	stroke: red;
	fill: none;
	}
	</style>
	</head>
	<body>
	<div id="chart"></div>
	<script>
	var height = 400, width = 400;
	var chart = d3.select('#chart').append('svg')
	.attr('width', width + 50)
	.attr('height', height + 50);

	// scales
	var yscale = d3.scale.linear()
	.domain([-10, 10])
	.range([25, 25 + width]);
	var xscale = d3.scale.linear()
	.domain([-10, 10])
	.range([25 + height, 25]);

	// axes
	var yaxis = chart.append('line')
	.attr( 'class', 'rule' )
	.attr( 'x1', 25 )
	.attr( 'x2', 25 + width )
	.attr( 'y1', yscale(0) )
	.attr( 'y2', yscale(0) )
	var xaxis = chart.append('line')
	.attr( 'class', 'rule' )
	.attr( 'y1', 25 )
	.attr( 'y2', 25 + height )
	.attr( 'x1', xscale(0) )
	.attr( 'x2', xscale(0) )

	// f(x) = x^2;
	var fn = function(x) { return x * x; }

	var resolution = 10;

	var line = d3.svg.line()
	.y( function(d) {
	return xscale( fn(d) );
	} )
	.x( function(d) {
	return yscale(d);
	} );

	var data = [];
	for (var i = 25; i < width + 25; i += resolution) {
	data.push( xscale.invert(i) );
	}

	var rendered = chart.append('svg:path')
	.attr( 'class', 'function' )
	.attr( 'd', line(data) );

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