D3 Examples - Day 2 | Block 2

xxxxxxxxxx
 
<!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>
​
​
<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>
​
    