Another Bar Chart

_.md

[ Launch: Tributary inlet ] 122a971b8406a5e6ec87 by ramnathv

app.css

.axis text {
  font-size: 11px;
}

config.json

{"description":"Another Bar Chart","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"visitors.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.coffee":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"app.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/Wt1hBfG.png"}

inlet.coffee

# Reusable Bar Chart Code
# Primitives are redefined to be
# S -> Scales
# A -> Accessors
# O -> Options (width, height, margin)
BarG = (S, A) ->
  that = this
  @G =
    x: (d) -> S.x A.x d
    y: (d) -> S.y A.y d
    width: barwidth
    height: (d) -> S.y.range()[0] - S.y A.y d
    fill: (d, i) -> S.c(i) 
  exports = (selection) ->
    selection.each (data) ->
      d3.select(this).selectAll("rect")
        .data(data).enter()
        .append("rect")
        .attr that.G
  exports
        
Axis = (S, O) ->
  that = this
  @Ax = d3.svg.axis()
    .scale(S.x)
    .orient("bottom")
    .tickSize(0)
  exports = (selection) ->
    selection.each (data) ->
      d3.select(this).append("g")
       .attr("class", "x axis")
       .attr("transform", "translate(0, #{O.height})")
       .call(that.Ax)
  d3.rebind(exports, Ax, "tickFormat", "ticks")
  exports

  
O =
  margin: {top: 53, bottom: 20, left: 32, right: 30}
  width: 502
  height: 100
  
W = O.width + O.margin.left + O.margin.right
H = O.height + O.margin.top + O.margin.bottom

###
Month,Views,Visitors
Feb-12,2723,
###

type = (d) ->
  d.Month = d3.time.format('%b-%y').parse(d.Month)
  d.Views = +d.Views
  d.Visitors = +d.Visitors
  d
  
data = tributary.visitors.map(type)

A1 =
  x: (d) -> d.Month
  y: (d) -> d.Views
  
S =
  x: d3.time.scale().range([0, O.width])
  y: d3.scale.linear().range([O.height, 0])
  c: (d, i) -> "steelblue"
  
S.x.domain d3.extent(data, A1.x)
S.y.domain [0, d3.max(data, A1.y)]

svg = d3.select("svg")
  .attr({width: W, height: H})
  .append("g")
  .attr("transform", "translate(#{O.margin.left}, #{O.margin.top})")
  
  
barwidth = Math.round(O.width/data.length - 1)



myBar = BarG(S, A1)

svg.data([data]).call(myBar)
  
myAxis = Axis(S, O)
  .tickFormat(d3.time.format("%b-%y"))
  .ticks(5)

svg.append("g")
  .attr("transform", "translate(#{barwidth/2}, 0)")
  .call(myAxis)

# Check this link for evenly spaced bars 
# http://jsfiddle.net/aWJtJ/8/

  
  

visitors.csv