krish85/data.tsv

## data.tsv

          
            name
            value

            
              Locke
              4

            
              Reyes
              8

            
              Ford
              15

            
              Jarrah
              16

            
              Shephard
              23

            
              Kwon
              42

            
              Suresh
              19

            
              Sanjana
              30

            
              Saroja
              56

            
              Sanu
              21

            
              Sam
              150

## index.html
<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
</head>
<body>
	<style>

.chart rect {
  fill: steelblue;
}

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

</style>
	<svg class="chart"></svg>
	<script>
		var width = 420, barHeight = 20;

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

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

		d3.tsv("data.tsv", type, function(error, data){
			chart.attr("height", barHeight * data.length);
			scale.domain([0, d3.max(data, function(d) { return d.value;})]);

			var bar = chart.selectAll("g").data(data).enter().append("g")
				.attr("transform", function(d, i){ return "translate(0," + i * barHeight + ")"; });
			bar.append("rect").attr("height", barHeight - 1).attr("width", function(d){ return scale(d.value);});
			bar.append("text").attr("x", function(d){ return scale(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;
			}
	</script>
</body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	name	value
	Locke	4
	Reyes	8
	Ford	15
	Jarrah	16
	Shephard	23
	Kwon	42
	Suresh	19
	Sanjana	30
	Saroja	56
	Sanu	21
	Sam	150
	<!DOCTYPE html>
	<html>
	<head>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
	</head>
	<body>
	<style>

	.chart rect {
	fill: steelblue;
	}

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

	</style>
	<svg class="chart"></svg>
	<script>
	var width = 420, barHeight = 20;

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

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

	d3.tsv("data.tsv", type, function(error, data){
	chart.attr("height", barHeight * data.length);
	scale.domain([0, d3.max(data, function(d) { return d.value;})]);

	var bar = chart.selectAll("g").data(data).enter().append("g")
	.attr("transform", function(d, i){ return "translate(0," + i * barHeight + ")"; });
	bar.append("rect").attr("height", barHeight - 1).attr("width", function(d){ return scale(d.value);});
	bar.append("text").attr("x", function(d){ return scale(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;
	}
	</script>
	</body>
	</html>