Day 2 | Block 2 | Simple Bar

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.chart rect {
  fill: #4CC417;
}

h1 {
        font-size: 30px;
        font-family: Futura, Helvetica, Arial, sans-serif;
        margin: 0;
      }

p {
        font-size: 15px;
        font-family: Futura, Helvetica, Arial, sans-serif;
        margin: 15px 0 10px 0;
      }

/*#container {*/
  /*      width: 600px;*/
  /*      margin-left: auto;*/
  /*      margin-right: auto;*/
  /*      margin-top: 20px;*/
  /*      padding: 50px;*/
  /*      background-color: white;*/
  /*      box-shadow: 3px 3px 5px 6px #ccc;*/
  /*    }*/

.chart text {
  fill: white;
  font-family: Futura, Helvetica, Arial, sans-serif;
  font-size: 10px;
  text-anchor: end;
}

</style>

<div id = "container">
<h1>Day Two | Block 2</h1>

<p>Simple Bar Stage 1</p>

</div>
<svg class="chart"></svg>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>

var width = 420,
    barHeight = 20;

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

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

d3.csv("2_Data.csv",  function(error, data){
  xScale.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 xScale(d.value); })
      .attr("height", barHeight - 1);

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

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

</script>

https://d3js.org/d3.v3.min.js