built-in color scales

_.md

[ Launch: built-in color scales ] 9587132 by k-izzo

config.json

{"description":"built-in color scales","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}},"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

d1 = d3.range(20)

s1 = d3.scale.category10()
s2 = d3.scale.category20()
s3 = d3.scale.category20b()
s4 = d3.scale.category20c()

svg = d3.select('svg').append('g')
	.attr('transform', 'translate(' + [10,37] + ')')

svg.selectAll('.ten')
	.data(d1)
  	.enter()
    .append('circle')
    .classed('ten', true)
    .attr({
		cx: (d, i) -> 30 + 25*d
		cy: 0
		r: 10
		fill: (d, i) -> s1(i)
	})

svg.selectAll('.twentyA')
	.data(d1)
  	.enter()
    .append('circle')
    .classed('twentyA', true)
    .attr({
		cx: (d, i) -> 30 + 25*i
		cy: 40
		r: 10
		fill: (d, i) -> s2(i)
	})
    
svg.selectAll('.twentyB')
	.data(d1)
  	.enter()
    .append('circle')
    .classed('twentyB', true)
    .attr({
		cx: (d, i) -> 30 + 25*i
		cy: 80
		r: 10
		fill: (d, i) -> s3(i)
	})
    
svg.selectAll('.twentyC')
	.data(d1)
  	.enter()
    .append('circle')
    .classed('twentyC', true)
    .attr({
		cx: (d, i) -> 30 + 25*i
		cy: 120
		r: 10
		fill: (d, i) -> s4(i)
	})