Playing with Bars

by ramnathv

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<svg></svg>

CSS

.bar {
  fill: steelblue;
}

CoffeeScript

data = [
    {x: 1, y: 4},
    {x: 2, y: 10},
    {x: 3, y: 8}
    {x: 4, y: 5}
]
 
svg = d3.select("svg")
  .attr("width", 400 + 40)
  .attr("height", 200 + 40)
  .append("g")
    .attr("transform", "translate(20, 20)")

A = 
  x: (d) -> d.x
  y: (d) -> d.y
    
S = 
  x: d3.scale.linear().range([0, 400])
  y: d3.scale.linear().range([200, 0])
    
S.x.domain [1, 5]
S.y.domain [0, d3.max(data, A.y)]

bar = svg.selectAll(".bar").data(data)
barEnter = bar.enter().append("rect").attr("class", "bar")

bar
  .attr
    x: (d) -> S.x A.x(d)
    y: 200
    width: 390/(data.length)
    height: 0
  .transition().duration(750)
  #.delay((d, i) -> i/4*750)
  .attr
    y: (d) -> S.y A.y(d)
    height: (d) -> S.y(0) - S.y(A.y(d))