plotting bars in a zeo sleep graph with d3

_.md

[ Launch Inlet ]

config.json

{"endpoint":"","display":"svg","public":true,"require":[],"tab":"edit","display_percent":0.7,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

var svg = d3.select("svg")
var data1 = [4,4,2,3,3,3,2,2,2,1,1,1,4]
var rects = svg.selectAll("rect")
    .data(data1)
//var colorScale = d3.scale.category20();    

//use zeo sleep graph colors
//height also implicitly matches zeo
var colorScale = d3.scale.ordinal()
    .domain([1,2,3,4])
    .range([
      "#00552A",
      "#99989B",
      "#29A639",
      "#D05827"
      ])

rects.enter()
  .append("rect")
  .attr({
    width:21,
    height:function(d){
      return d*20
    },
    y: function(d){return 97-d*20},
    x:function(d,i){return i*22+115;},
    fill: function(d,i){return colorScale(d);},
    id: function(d,i){
    return "rect"+i
    }
  }).on("mouseover",function(d,i){
    d3.select("#rect"+i).attr({stroke:"#000"})
  }).on("mouseout",function(d,i){
    d3.select("#rect"+i).attr({stroke:"none"})
  })