jbants/data.csv

## data.csv

          
            letter
            col1
            col2

            
              A
              .08167
              .0865

            
              B
              .01492
              .0756

            
              C
              .02782
              .07843

            
              D
              .04253
              .035

            
              E
              .12702
              .0544

            
              F
              .02288
              .0856

            
              G
              .02015
              .0734

            
              H
              .06094
              .01854

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
  .bar1 {
    fill: steelblue;
    opacity: 0.5;
  }

  .bar2 {
    fill: gray;
    opacity: 0.5;
  }

  .bar1:hover {
    fill: brown;
  }

  .axis {
    font: 10px sans-serif;
  }

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

  .x.axis path {
    display: none;
  }
</style>

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script>
    var margin = {
        top: 20,
        right: 20,
        bottom: 30,
        left: 40
      },
      width = 960 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;

    var x = d3.scale.ordinal()
      .rangeRoundBands([0, width], .1);

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

    var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom");

    var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left");

    var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    d3.csv("data.csv", type, function(error, data) {
      console.log(data)
      x.domain(data.map(function(d) {
        return d.letter;
      }));
      y.domain([0, d3.max(data, function(d) {
        return d.col1;
      })]);

      svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

      svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
        .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text("Values");

      var g = svg.selectAll(".bars")
        .data(data)
        .enter().append("g")

      g.append("rect")
        .attr("class", "bar1")
        .attr("x", function(d) {
          return x(d.letter) + 10; // center it
        })
        .attr("width", x.rangeBand() - 20) // make it slimmer
        .attr("y", function(d) {
          return y(d.col1);
        })
        .attr("height", function(d) {
          return height - y(d.col1);
        });

      g.append("rect")
        .attr("class", "bar2")
        .attr("x", function(d) {
          return x(d.letter);
        })
        .attr("width", x.rangeBand())
        .attr("y", function(d) {
          return y(d.col2);
        })
        .attr("height", function(d) {
          return height - y(d.col2);
        });

    });

    function type(d) {
      d.col1 = +d.col1;
      d.col2 = +d.col2;
      return d;
    }
  </script>
letter	col1	col2
A	.08167	.0865
B	.01492	.0756
C	.02782	.07843
D	.04253	.035
E	.12702	.0544
F	.02288	.0856
G	.02015	.0734
H	.06094	.01854
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	.bar1 {
	fill: steelblue;
	opacity: 0.5;
	}

	.bar2 {
	fill: gray;
	opacity: 0.5;
	}

	.bar1:hover {
	fill: brown;
	}

	.axis {
	font: 10px sans-serif;
	}

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

	.x.axis path {
	display: none;
	}
	</style>

	<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script>
	var margin = {
	top: 20,
	right: 20,
	bottom: 30,
	left: 40
	},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var x = d3.scale.ordinal()
	.rangeRoundBands([0, width], .1);

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

	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom");

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left");

	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	d3.csv("data.csv", type, function(error, data) {
	console.log(data)
	x.domain(data.map(function(d) {
	return d.letter;
	}));
	y.domain([0, d3.max(data, function(d) {
	return d.col1;
	})]);

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.text("Values");

	var g = svg.selectAll(".bars")
	.data(data)
	.enter().append("g")

	g.append("rect")
	.attr("class", "bar1")
	.attr("x", function(d) {
	return x(d.letter) + 10; // center it
	})
	.attr("width", x.rangeBand() - 20) // make it slimmer
	.attr("y", function(d) {
	return y(d.col1);
	})
	.attr("height", function(d) {
	return height - y(d.col1);
	});

	g.append("rect")
	.attr("class", "bar2")
	.attr("x", function(d) {
	return x(d.letter);
	})
	.attr("width", x.rangeBand())
	.attr("y", function(d) {
	return y(d.col2);
	})
	.attr("height", function(d) {
	return height - y(d.col2);
	});

	});

	function type(d) {
	d.col1 = +d.col1;
	d.col2 = +d.col2;
	return d;
	}
	</script>