adamwd392/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    This is a bar chart

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>Bar Chart III</title>

<style>
  .chart rect {
    fill: steelblue;
  }

  .chart text {
    fill: white;
    font: 10px sans-serif;
    text-anchor: middle;
  }
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

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

var width = 960, height = 500;

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

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

var url = "https://gist.githubusercontent.com/mbostock/7452541/raw/data.tsv";

d3.tsv(url, function(error, data) {
  if (error) console.log(error);

  y.domain([0,d3.max(data, function(d) { return d.value;})]);

  var barWidth = width/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("y", function(d) { return y(d.value); })
     .attr("height", function(d) { return height-y(d.value);})
     .attr("width", barWidth-1);

});
</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<title>Bar Chart III</title>

	<style>
	.chart rect {
	fill: steelblue;
	}

	.chart text {
	fill: white;
	font: 10px sans-serif;
	text-anchor: middle;
	}
	</style>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

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

	var width = 960, height = 500;

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

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

	var url = "https://gist.githubusercontent.com/mbostock/7452541/raw/data.tsv";

	d3.tsv(url, function(error, data) {
	if (error) console.log(error);

	y.domain([0,d3.max(data, function(d) { return d.value;})]);

	var barWidth = width/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("y", function(d) { return y(d.value); })
	.attr("height", function(d) { return height-y(d.value);})
	.attr("width", barWidth-1);

	});
	</script>