Bars - Simple

_.md

[ Launch: Tributary inlet ] e61321b017e49f6efaa0 by jkeohan

config.json

{"description":"Bars - Simple","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"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},"style.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/CKYGmGn.png"}

inlet.js

var height = 200;
var svg = d3.select('svg').attr({ height: height } )

var data = [1,2,3,4]

var rects = svg.selectAll("rect").data(data)


rects.enter().append("rect").attr({
  width: 20,
  height: function(d,i) { return d * 20 },
  x: function(d,i) { return i * 40 } ,
  y: function(d,i) { return height - d * 20 } 
})

//.attr("class","rect1")
//.attr("class", function(d,i) { if (i === 1) { return rect1 } })
//.style("fill","blue")

console.log(rects)

style.css

rect {
  fill:blue;
}

rect.rect1 {
 fill:green; 
}