Chroma JS

by taylorRichie

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.3.3/chroma.min.js"></script>
<div class="container-fluid" id='main'>
    <div class="row">
        <div class="col-md-12">
           <div id="palette"></div> 
        </div>
    </div>
</div>

CSS

#main{margin-top: 40px;}

CoffeeScript

colors = chroma
  .scale(['white','blue']).colors(15)
console.log chroma(colors[1]).alpha(0.5).css()
displayPalette = (data, f) ->
  if (f) 
    colors = data.map (d) -> f(d).css()
  else
    colors = data
  w = Math.floor(400/colors.length)
  console.log(w)
  pal = d3.select('#palette')
  svg = pal.append('svg')
    .attr('width', 400)
    .attr('height', w)
  square = svg.selectAll('rect').data(colors)
  square.enter().append('rect')
  square.attr
    x: (d, i) -> i*w
    y: 0
    height: w
    width: w
    fill: (d) -> d
    

#displayPalette(colors)
  
N = 5
colors2 = chroma
  .scale('PuRd')
  .domain([0, N])
    
colors4 = chroma
    .scale(['yellow', 'blue'])
    .domain([0, N])
    .mode('hcl')
    
colors5 = [
	"#6F0F4B",
	"#A2FF84",
	"#E11600",
	"#3D8CFF",
	"#FED3C1",
	"#18500F",
	"#316B8C",
	"#FCAD52",
	"#EF1968",
	"#9D3115"
]

colors3 = d3.range(N).map (d, i) -> colors2(i).css()

N = 10
colors5 = d3.scale.linear()
  .range(["yellow", "darkred"])
  .domain([0, N])
  .interpolate(d3.interpolateHcl)
colors6 = d3.range(N).map(colors5) 
displayPalette(colors6)