d3transitions

by ramnathv

HTML

<div id="vis"></div>

JavaScript

var dataset = [5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
  11, 12, 15, 20, 18, 17, 16, 18, 23, 40 
];

var w = 500,
    h = 300

var margin = {top: 20, right: 10, bottom: 20, left: 10},
  width = w - margin.left - margin.right,
  height = h - margin.top - margin.bottom

var svg = d3.select("#vis")
  .append("svg")
    .attr("width", w)
    .attr("height", h)
  .append("g")
    .attr("transform", 
        ["translate(", margin.left, ",", margin.top, ")"].join("")
     )

var yScale = d3.scale.linear()
  .range([height, 0])
  .domain([0, 40])


var bars = svg.selectAll('rect')
  .data(dataset)
  .enter()
    .append("rect")

bars
  .attr("x", function(d, i){
     return i*width/dataset.length
   })
  .attr("y", function(d, i){ 
     return yScale(d)
   })
  .attr("height", function(d, i){
     return height - yScale(d)
   })
  .attr("width", width/dataset.length - 5)
  .attr("fill", "red")

var colorScale = d3.scale.linear()
  .domain([0, 40])
  .range(["#ff0000", "#00ff00"])

alert(colorScale(0))
  
          
          
function I(x){
  return function(d){
    return d[x]
  }
}