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

displayPalette = (data, f) ->
  if (f) 
    colors = data.map (d) -> f(d).css()
  else
    colors = data
  w = Math.floor(400/colors.length)
  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

pCool = ['#041959','#005AA5','#0B7D8C','#FAF4C3']

#bezInterpolator = chroma.interpolate.bezier([pCool])

N = 10

#console.log chroma.scale(['#fafa6e','#2A4858']).mode('lch').colors(6)

#displayPalette chroma.scale(['#0D1851','#0B7D8C','#FBE647']).mode('lch').colors(N)

displayPalette chroma.scale(pCool).correctLightness(true).colors(N)
displayPalette chroma.bezier(pCool).scale().correctLightness(true).colors(N)


displayPalette chroma.scale(['#33023F','#580178','#B6256C','#FFDC6C','#FAF4C3']).correctLightness(true).colors(N)