ordinal scale compare

_.md

[ Launch: ordinal scale compare ] 9585991 by k-izzo

config.json

{"description":"ordinal scale compare","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.coffee":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"a.style":{"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}

inlet.coffee

data = [0, 9, 11, 3, 4, 7]

svg = d3.select('svg')

xsP = d3.scale.ordinal()
	.domain(d3.range(data.length))
  	.rangePoints([100, 400])

xsB = d3.scale.ordinal()
	.domain(d3.range(data.length))
  	.rangeBands([100, 400])
    
svg.selectAll('.blues')
	.data(data)
  	.enter()
    .append('circle')
    .classed('blues', true)
    .attr({
           cx: (d, i) -> xsP(i)
           cy: 100
           r: 9
	})

svg.selectAll('.reds')
	.data(data)
  	.enter()
    .append('circle')
	.classed('reds', true)
    .attr({
           cx: (d, i) -> xsB(i)
           cy: 150
           r: 9
	})
    

style.css

circle.blues {
  fill: blue;
}

circle.reds {
  fill: red;
}