SamEureka/app.js

## app.js
var width = 420,
    barHeight = 20;

var x = d3.scale.linear()
    .range([0, width]);

var chart = d3.select('.chart')
    .attr('width', width);

d3.csv('data.csv', type, function (error, data){
  x.domain([0, d3.max(data, function(d){ return d.value; })]);

  chart.attr('height', barHeight * data.length);

  var bar = chart.selectAll('g')
      .data(data)
      .enter().append('g')
      .attr('transform', function(d, i) { return "translate(0," + i * barHeight + ")"; });

  bar.append('rect')
    .attr('width', function(d) { return x(d.value); })
    .attr('height, barHeight -1');

  bar.append('text')
    .attr('x', function(d){ return x(d.value) -3; })
    .attr('y', barheight /2)
    .attr('dy', '.35em')
    .text(function(d) { return d.value; });
});

function type(d) {
  d.value = +d.value;
  return d;
}

## data.csv

          
            Name
            Value

            
              Locke
              4

            
              Reyes
              8

            
              Ford
              15

            
              Jarrah
              16

            
              Shephard
              23

            
              Kwon
              42

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <title>d3.tutorial.2 - Let's Make a Chart</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

  <svg class="chart"></svg>

  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="app.js"></script>
</body>
</html>

## style.css
.chart rect {
  fill: steelblue;
}

.chart text {
  fill: white;
  font: 10px sans-serif;
  text-anchor: end;
}
	var width = 420,
	barHeight = 20;

	var x = d3.scale.linear()
	.range([0, width]);

	var chart = d3.select('.chart')
	.attr('width', width);

	d3.csv('data.csv', type, function (error, data){
	x.domain([0, d3.max(data, function(d){ return d.value; })]);

	chart.attr('height', barHeight * data.length);

	var bar = chart.selectAll('g')
	.data(data)
	.enter().append('g')
	.attr('transform', function(d, i) { return "translate(0," + i * barHeight + ")"; });

	bar.append('rect')
	.attr('width', function(d) { return x(d.value); })
	.attr('height, barHeight -1');

	bar.append('text')
	.attr('x', function(d){ return x(d.value) -3; })
	.attr('y', barheight /2)
	.attr('dy', '.35em')
	.text(function(d) { return d.value; });
	});

	function type(d) {
	d.value = +d.value;
	return d;
	}
	<!DOCTYPE html>
	<meta charset="utf-8">
	<head>
	<title>d3.tutorial.2 - Let's Make a Chart</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>

	<svg class="chart"></svg>

	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="app.js"></script>
	</body>
	</html>
	.chart rect {
	fill: steelblue;
	}

	.chart text {
	fill: white;
	font: 10px sans-serif;
	text-anchor: end;
	}