Basic bar chart

README.md

A basic bar chart syntax, based off the example publised by the NYT in their series about ESPN.

data.tsv

index.html

<style type="text/css">
.g-graphic {
  font-family: arial;
}

.bar {
  fill:#ddd;
}

.g-ESPN {
  fill:orange;
}

.g-label {
  font-family:arial;
  font-weight:bold;
  font-size:13px;
}


.axis line {
  fill: none;
  stroke: #ccc;
  stroke-dasharray:5px 5px;
  shape-rendering: crispEdges;
}

.axis text {
  font-size: 11px;
  text-anchor: end !important;
}

.axis path {
  display: none;
}

#g-y-axis-title {
  font-size: 13px;
  font-weight: bold;
}

.y.axis text {
  fill: #999;
}

.y.axis .minor line {
  stroke: #ccc;
  stroke-dasharray: 2,4;
}

.y.axis .g-baseline line {
  stroke:#000;
  stroke-dasharray:none;

}

</style>

<div class="g-graphic"></div>

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript">

var margin = {top: 40, right: 30, bottom: 20, left: 0};

var width = 950 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var svg = d3.select(".g-graphic").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.tsv("data.tsv", function(err, prices) {

  prices.forEach(function(d) {
    d.X2013 = +d.X2013;
  });

  prices.sort(function(a,b) {
    return a.X2013 - b.X2013;
  });

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

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

  var yAxis = d3.svg.axis()
    .scale(y)
    .orient("right")
    .ticks(5)
    .tickPadding(10)
    .tickSize( -width);

  svg.append("g")
    .attr("class", "y axis")
    .attr("transform", "translate(" + width + ",0)")
    .call(yAxis)
    .selectAll("g")
    .classed("g-baseline", function(d) { return d == 0 })
    .selectAll("text")
    .attr("dy", -10)
    .attr("dx", -20)


  var bar = svg.selectAll(".bar")
      .data(prices)
      .enter()
      .append("rect")
      .attr("width", 2)
      .attr("y", function(d) { return  y(d.X2013);  })
      .attr("height", function(d) { return height - y(d.X2013)} )
      .attr("x", function(d, i) { return 3 * i})
      .attr("class", "bar")
      .classed("g-ESPN", function(d) { return d.Network == "ESPN"});

  svg.append("text")
      .attr("class", "g-label")
      .attr("x", 530)
      .attr("y", 30)
      .text("ESPN")
});

</script>
</body>
</html>