zunayed · November 18, 2013 18:33
diff --git a/D3 Bar Charts b/D3 Bar Charts
 <!DOCTYPE html>
 <html>
  <head>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="http://d3js.org/d3.v3.min.js"></script>
  </head>

  <body>
    <style>

    .chart rect {
      fill: steelblue;
    }

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

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

  </body>  

 <script>
  var height = 500,
      width = 960;

  data = [134,352,331,223,554]

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

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

  var barWidth = 50;

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

  // chart.attr("width", barWidth * data.length);

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

  bar.append("rect")
      .attr("height", function(d) { return d; })
      .attr("width", barWidth - 1)
      .attr("y", function(d) { return height - d; });


 // bar.append("rect")
 //      .attr("y", function(d) { return y(d.value); })
 //      .attr("height", function(d) { return height - y(d.value); })
 //      .attr("width", barWidth - 1);


  bar.append("text")
      .attr("tranform", function(d) { return "translate(10,0)" })
      .attr("y", function(d) { return height - d + 15; })
      .attr("dy", ".5em")
      .text(function(d) { return d; });
  

  // function type(d) {
  //   d.value = +d.value; // coerce to number
  //   return d;
  // }

 </script>


 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	</head>

	<body>
	<style>

	.chart rect {
	fill: steelblue;
	}

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

	</style>

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

	</body>

	<script>
	var height = 500,
	width = 960;

	data = [134,352,331,223,554]

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

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

	var barWidth = 50;

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

	// chart.attr("width", barWidth * data.length);

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

	bar.append("rect")
	.attr("height", function(d) { return d; })
	.attr("width", barWidth - 1)
	.attr("y", function(d) { return height - d; });


	// bar.append("rect")
	// .attr("y", function(d) { return y(d.value); })
	// .attr("height", function(d) { return height - y(d.value); })
	// .attr("width", barWidth - 1);


	bar.append("text")
	.attr("tranform", function(d) { return "translate(10,0)" })
	.attr("y", function(d) { return height - d + 15; })
	.attr("dy", ".5em")
	.text(function(d) { return d; });


	// function type(d) {
	// d.value = +d.value; // coerce to number
	// return d;
	// }

	</script>


	</html>