rhysforyou/barChart.css

## barChart.css
div.bar {
    display: inline-block;
    width: 20px;
    height: 75px;   /* We'll override this later */
    background-color: teal;
		margin-right: 2px;
}

## barChart.js
var dataset = [5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
                11, 12, 15, 20, 18, 17, 16, 18, 23, 25]


var w = 500
var h = 100
var barPadding = 1

var svg = d3.select("body")
  .append("svg")
  .attr("width", w)
  .attr("height", h)

svg.selectAll("rect")
  .data(dataset)
  .enter()
  .append("rect")
  .attr({
    x: function(d, i) {
     return i * (w / dataset.length)
    },
    y: h,
    width: (w / dataset.length - barPadding),
    height: 0,
    fill: "#808080"
  })
  .transition()
  .delay(function(d, i) {
    return i * 10
  })
  .attr({

    y: function(d, i) {
     return h - (d * 4)
    },
    height: function(d, i) {
     return d * 4
    },
  })

svg.selectAll("text")
  .data(dataset)
  .enter()
  .append("text")
  .text(function(d) {
    return d
  })
  .attr({
    x: function(d, i) {
      return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2
    },
    y: function(d, i) {
      return h - (d * 4) + 14
    },
    fill: "white",
    "text-anchor": "middle"
  })

## base.css
html {
  min-width: 1040px;
}

body {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  margin: 1em auto 4em auto;
  width: 960px;
}

#body {
  position: relative;
}

h1 {
  font-size: 64px;
  font-weight: 300;
  letter-spacing: -2px;
  margin: .3em 0 .1em 0;
}

h2 {
  margin-top: 2em;
}

h1, h2 {
  text-rendering: optimizeLegibility;
}

h2 a {
  color: #ccc;
  left: -20px;
  position: absolute;
  width: 740px;
}

footer {
  font-size: small;
  margin-top: 8em;
}

header aside {
  margin-top: 82px;
}

header aside,
footer aside {
  color: #636363;
  text-align: right;
}

aside {
  font-size: small;
  left: 780px;
  position: absolute;
  width: 180px;
}

.attribution {
  font-size: small;
  margin-bottom: 2em;
}

#body > p, li > p {
  line-height: 1.5em;
}

#body > p {
  width: 720px;
}

#body > blockquote {
  width: 640px;
}

li {
  width: 680px;
}

a {
  color: steelblue;
}

a:not(:hover) {
  text-decoration: none;
}

pre, code, textarea {
  font-family: "Menlo", monospace;
}

code {
  line-height: 1em;
}

textarea {
  font-size: 100%;
}

#body > pre {
  border-left: solid 2px #ccc;
  padding-left: 18px;
  margin: 2em 0 2em -20px;
}

.html .value,
.javascript .string,
.javascript .regexp {
  color: #756bb1;
}

.html .tag,
.css .tag,
.javascript .keyword {
  color: #3182bd;
}

.comment {
  color: #636363;
}

.html .doctype,
.javascript .number {
  color: #31a354;
}

.html .attribute,
.css .attribute,
.javascript .class,
.javascript .special {
  color: #e6550d;
}

svg {
  font: 10px sans-serif;
}

.axis path, .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

sup, sub {
  line-height: 0;
}

q:before,
blockquote:before {
  content: "“";
}

q:after,
blockquote:after {
  content: "”";
}

blockquote:before {
  position: absolute;
  left: 2em;
}

blockquote:after {
  position: absolute;
}

## index.html
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="base.css" />
		<link rel="stylesheet" type="text/css" href="barChart.css" />
		<title>Graph Paper</title>
	</head>
	<body>
		<script src="http://d3js.org/d3.v2.js"></script>
		<script src="barChart.js"></script>
		</script>
	</body>
</html>
	div.bar {
	display: inline-block;
	width: 20px;
	height: 75px; /* We'll override this later */
	background-color: teal;
	margin-right: 2px;
	}
	var dataset = [5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
	11, 12, 15, 20, 18, 17, 16, 18, 23, 25]


	var w = 500
	var h = 100
	var barPadding = 1

	var svg = d3.select("body")
	.append("svg")
	.attr("width", w)
	.attr("height", h)

	svg.selectAll("rect")
	.data(dataset)
	.enter()
	.append("rect")
	.attr({
	x: function(d, i) {
	return i * (w / dataset.length)
	},
	y: h,
	width: (w / dataset.length - barPadding),
	height: 0,
	fill: "#808080"
	})
	.transition()
	.delay(function(d, i) {
	return i * 10
	})
	.attr({

	y: function(d, i) {
	return h - (d * 4)
	},
	height: function(d, i) {
	return d * 4
	},
	})

	svg.selectAll("text")
	.data(dataset)
	.enter()
	.append("text")
	.text(function(d) {
	return d
	})
	.attr({
	x: function(d, i) {
	return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2
	},
	y: function(d, i) {
	return h - (d * 4) + 14
	},
	fill: "white",
	"text-anchor": "middle"
	})
	html {
	min-width: 1040px;
	}

	body {
	font-family: "Helvetica Neue", Helvetica, sans-serif;
	margin: 1em auto 4em auto;
	width: 960px;
	}

	#body {
	position: relative;
	}

	h1 {
	font-size: 64px;
	font-weight: 300;
	letter-spacing: -2px;
	margin: .3em 0 .1em 0;
	}

	h2 {
	margin-top: 2em;
	}

	h1, h2 {
	text-rendering: optimizeLegibility;
	}

	h2 a {
	color: #ccc;
	left: -20px;
	position: absolute;
	width: 740px;
	}

	footer {
	font-size: small;
	margin-top: 8em;
	}

	header aside {
	margin-top: 82px;
	}

	header aside,
	footer aside {
	color: #636363;
	text-align: right;
	}

	aside {
	font-size: small;
	left: 780px;
	position: absolute;
	width: 180px;
	}

	.attribution {
	font-size: small;
	margin-bottom: 2em;
	}

	#body > p, li > p {
	line-height: 1.5em;
	}

	#body > p {
	width: 720px;
	}

	#body > blockquote {
	width: 640px;
	}

	li {
	width: 680px;
	}

	a {
	color: steelblue;
	}

	a:not(:hover) {
	text-decoration: none;
	}

	pre, code, textarea {
	font-family: "Menlo", monospace;
	}

	code {
	line-height: 1em;
	}

	textarea {
	font-size: 100%;
	}

	#body > pre {
	border-left: solid 2px #ccc;
	padding-left: 18px;
	margin: 2em 0 2em -20px;
	}

	.html .value,
	.javascript .string,
	.javascript .regexp {
	color: #756bb1;
	}

	.html .tag,
	.css .tag,
	.javascript .keyword {
	color: #3182bd;
	}

	.comment {
	color: #636363;
	}

	.html .doctype,
	.javascript .number {
	color: #31a354;
	}

	.html .attribute,
	.css .attribute,
	.javascript .class,
	.javascript .special {
	color: #e6550d;
	}

	svg {
	font: 10px sans-serif;
	}

	.axis path, .axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	sup, sub {
	line-height: 0;
	}

	q:before,
	blockquote:before {
	content: "“";
	}

	q:after,
	blockquote:after {
	content: "”";
	}

	blockquote:before {
	position: absolute;
	left: 2em;
	}

	blockquote:after {
	position: absolute;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="content-type" content="charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="base.css" />
	<link rel="stylesheet" type="text/css" href="barChart.css" />
	<title>Graph Paper</title>
	</head>
	<body>
	<script src="http://d3js.org/d3.v2.js"></script>
	<script src="barChart.js"></script>
	</script>
	</body>
	</html>