Leehro/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style></style>
<body>
  <div id="bar-demo"></div>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script>
    // now moving onto books read per year

    // set up an array of the data
    var data = [{year: 2006, books: 54},
                {year: 2007, books: 43},
                {year: 2008, books: 41},
                {year: 2009, books: 37},
                {year: 2010, books: 58},
                {year: 2011, books: 52},
                {year: 2012, books: 23},
                {year: 2013, books: 2}];

    // Overall layout
    var barWidth = 40; // width of the bar, duh
    var width = (barWidth + 10) * data.length; // total width
    var height = 200;

    // scale

    // scaling for x.  Input will be an index into the data Array
    // output will be from 0 to width
    var x = d3.scael.linear().domain([0, data.length]).range([0,width]);

    // scaling for y.  scale from [0-max(books)] to [0-height]
    var y = d3.scale.linear().domain([0, d3.max(data, function(datum) { return datum.books; })]).
      rangeRound([0,height]);

    // now set up the canvas
    // append it to the empty div and make it width and height
    var barDemo = d3.select("#bar-demo").append("svg:svg").attr("width",width).attr("height",height + 30);

    barDemo.selectAll("rect"). // select all the rects in the svg
      data(data). // set the data source to data
      enter(). // magic?
      append("svg:rect"). // make a new rect (bar)
      attr("x", function(datum, index) { return x(index); }). // x-position of the bar
      attr("y", function(datum) { return height - y(datum.books); }). // y-position of the bar.  Remember + goes down the page
      attr("height", function(datum) { return y(datum.books); }). // height of the bar
      attr("width", barWidth). // every bar has the same width
      attr("fill", "#2d578b"); // ok for now but this is a good candidate for CSS?

  // now we will add text
  barDemo.selectAll("text").
    data(data). // setup the data source
    enter().
    append("svg:text").
    attr("x", function(datum, index) { return x(index) + barWidth; }). // x-position the text at the end of the bar for now
    attr("y", function(datum) { return height - y(datum.books); }). // y-position the text at the top of the barDemo
    attr("dx", -barWidth/2). // slide the x back to center it
    attr("dy", "1.2em"). // slide the y down into the bar
    attr("text-anchor", "middle"). // anchor the middle of the text to the specified x,y coordinate
    attr("style", "font-size: 12; font-family: Helvetica, sans-serif").
    text(function(datum) { return datum.books; }). // the text we want to show is the number of books
    attr("fill", "white");

  // now add the y-axis
  barDemo.selectAll("text.yAxis").
    data(data).
    enter().
    append("svg:text").
    attr("x", function(datum, index) { return x(index) + barWidth; }).
    attr("y", height). // the y-coordinate of the axis labels is just the height - bottom of the graph up to now
    attr("dx", -barWidth / 2). // center the x
    attr("text-anchor", "middle").
    attr("style", "font-size: 12; font-family: Helvetica, sans-serif").
    text(function(datum) { return datum.year; }). // text should be the year
    attr("transform", "translate(0, 18)"). // since we didnt change the height, translate
    attr("class", "yAxis"); // makes it so that text.yAxis finds this

    // next steps would be to move onto custom vis
  </script>
</body>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style></style>
	<body>
	<div id="bar-demo"></div>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>
	// now moving onto books read per year

	// set up an array of the data
	var data = [{year: 2006, books: 54},
	{year: 2007, books: 43},
	{year: 2008, books: 41},
	{year: 2009, books: 37},
	{year: 2010, books: 58},
	{year: 2011, books: 52},
	{year: 2012, books: 23},
	{year: 2013, books: 2}];

	// Overall layout
	var barWidth = 40; // width of the bar, duh
	var width = (barWidth + 10) * data.length; // total width
	var height = 200;

	// scale

	// scaling for x. Input will be an index into the data Array
	// output will be from 0 to width
	var x = d3.scael.linear().domain([0, data.length]).range([0,width]);

	// scaling for y. scale from [0-max(books)] to [0-height]
	var y = d3.scale.linear().domain([0, d3.max(data, function(datum) { return datum.books; })]).
	rangeRound([0,height]);

	// now set up the canvas
	// append it to the empty div and make it width and height
	var barDemo = d3.select("#bar-demo").append("svg:svg").attr("width",width).attr("height",height + 30);

	barDemo.selectAll("rect"). // select all the rects in the svg
	data(data). // set the data source to data
	enter(). // magic?
	append("svg:rect"). // make a new rect (bar)
	attr("x", function(datum, index) { return x(index); }). // x-position of the bar
	attr("y", function(datum) { return height - y(datum.books); }). // y-position of the bar. Remember + goes down the page
	attr("height", function(datum) { return y(datum.books); }). // height of the bar
	attr("width", barWidth). // every bar has the same width
	attr("fill", "#2d578b"); // ok for now but this is a good candidate for CSS?

	// now we will add text
	barDemo.selectAll("text").
	data(data). // setup the data source
	enter().
	append("svg:text").
	attr("x", function(datum, index) { return x(index) + barWidth; }). // x-position the text at the end of the bar for now
	attr("y", function(datum) { return height - y(datum.books); }). // y-position the text at the top of the barDemo
	attr("dx", -barWidth/2). // slide the x back to center it
	attr("dy", "1.2em"). // slide the y down into the bar
	attr("text-anchor", "middle"). // anchor the middle of the text to the specified x,y coordinate
	attr("style", "font-size: 12; font-family: Helvetica, sans-serif").
	text(function(datum) { return datum.books; }). // the text we want to show is the number of books
	attr("fill", "white");

	// now add the y-axis
	barDemo.selectAll("text.yAxis").
	data(data).
	enter().
	append("svg:text").
	attr("x", function(datum, index) { return x(index) + barWidth; }).
	attr("y", height). // the y-coordinate of the axis labels is just the height - bottom of the graph up to now
	attr("dx", -barWidth / 2). // center the x
	attr("text-anchor", "middle").
	attr("style", "font-size: 12; font-family: Helvetica, sans-serif").
	text(function(datum) { return datum.year; }). // text should be the year
	attr("transform", "translate(0, 18)"). // since we didnt change the height, translate
	attr("class", "yAxis"); // makes it so that text.yAxis finds this

	// next steps would be to move onto custom vis
	</script>
	</body>