D3 Examples - HSL Qualitative Palette Generator

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <style>
    * { box-sizing: border-box; }
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    p, svg text, label {
      font-size: 13px;
      font-family: sans-serif; }
    svg { overflow: visible; }
    .left-container {
      display: inline-block;
      width: 360px;
      vertical-align: top;
    }
    .right-container {
      display: inline-block;
      width: 540px;
      padding-left: 16px;
    }
    input[type="number"] {
      outline: none;
      border: none;
      border-bottom: 1px solid #DDD;
      text-align: right;
      font-size: 13px;
      width: 32px; }
    input[type="range"] {
      width: 100%;
    }
    svg.gradient {
      width: 360px;
      height: 20px;
    }
    svg.gradient {
      stroke: none;
    }
    svg.hue-ctrl .hue-ticks circle {
      stroke: #999;
      stroke-width: 1.5px;
    }
    svg.hue-ctrl .hue-ticks circle:first-of-type {
        stroke: black;
      cursor: move;
    }
    .color-list {
      font-family: monospace;
      padding: 8px;
      background: #F9F9F9;
    }
    
    .state-map .state {
      stroke: #666;
      stroke-width: 0.5px;
    }
    .sparklines path {
      stroke-width: 2px;
      fill: none;
    }
    .axis {
      stroke: black;
      shape-rendering: crispEdges;
    }
  </style>
  
  <div class='left-container'>
    <p>
      Build a palette of
      <input type='number'
             dimension='nColors'
             value='6' min='1' max='360' /> colors, with<br />
      Saturation:&nbsp;<span class='s-value'>50</span>%
      <svg class='gradient saturation'></svg>
        <input class='s-ctrl'
             dimension='saturation'
             type='range'
             min='0' max='1' step='0.01' value='0.66'><br />
      Lightness:&nbsp;&nbsp;<span class='l-value'>66</span>%
      <svg class='gradient lightness'></svg>
        <input class='l-ctrl'
             dimension='lightness'
             type='range'
             min='0' max='1' step='0.01' value='0.66'>
      
    </p>
    <svg class='hue-ctrl' width='360' height='360'></svg>
  </div>
  <div class='right-container'>
    <p class='color-list'></p>
    <svg class='state-map' width='540' height='300'></svg>
    <svg width='540' height='140'>
      <line class='axis' x1='0' x2='540' y1='70' y2='70' />
      <line class='axis' x1='0' x2='0' y1='0' y2='140' />
      <g class='sparklines'></g>
    </svg>
  </div>
</head>
​
<body>
  <script>
    
    // equidistant hues, same saturation and lightness
    function palette(nColors, dHue, saturation, lightness) {
      return d3.range((0 + dHue), (360 + dHue), (360 / nColors))
        .map(function(hue) {
            hue = hue % 360;
            var hslObj = d3.hsl(hue, saturation, lightness);
            return {
            h: hue,
            s: saturation,
            l: lightness,
            _: hslObj,
            rgb: hslObj.toString()
          };
        });
    }
    
    //
    // state, data
    var _palette = [], 
            _input = {
            nColors: 5,
            dHue: 0,
            saturation: 0.80,
            lightness: 0.80
            };
    
    //
    // misc constants
    var radToDeg = 180 / Math.PI,
        tau = Math.PI * 2;
        
    //
    // rendering
    var hueCtrl = d3.select('svg.hue-ctrl'),
            hueWidth = 360,
        hueCenter = hueWidth / 2,
            r0 = 170,
            r1 = r0 - 32,
        arcs = 360,
        gradientWidth = 360,
        gradientRects = 100,
        hueDrag = d3.behavior.drag();
        hueCtrl.append('g')
        .attr('class', 'hue-arcs')
        .selectAll("path")
            .data(d3.range(0, tau, tau / arcs))
        .enter().append("path")
            .attr("d", d3.svg.arc().innerRadius(r0).outerRadius(r1)
            .startAngle(function(d) { return d; })
            .endAngle(function(d) { return d + tau / arcs * 1.1; }));
    hueCtrl.append('g').attr('class', 'hue-ticks');
    hueCtrl.append('text').attr('text-anchor', 'middle');
​
    hueCtrl.selectAll('g, text').attr('transform',
                                'translate(' + hueCenter + ',' + hueCenter + ')');
    var lGradient = d3.select('svg.gradient.lightness'),
        sGradient = d3.select('svg.gradient.saturation'),
        gradientDx = 360 / gradientRects;
    
    d3.selectAll('svg.gradient').selectAll('rect')
      .data(d3.range(0, gradientWidth, gradientDx))
        .enter().append('rect')
            .attr('x', function(d) { return d; })
            .attr('height', 20)
            .attr('width', gradientDx + 0.33);
    
    //
    // drag to change initial hue
    var _theta0, _dHue0;
    hueDrag
        .on('dragstart', function() {
        var x = d3.mouse(this)[0] - hueCenter,
              y = d3.mouse(this)[1] - hueCenter;
        _theta0 = Math.atan2(-y, x) * radToDeg;
        _dHue0 = _input.dHue;
        d3.event.sourceEvent.stopPropagation(); 
        })
      .on('drag', function() {
        var x = d3.mouse(this)[0] - hueCenter,
              y = d3.mouse(this)[1] - hueCenter,
            theta = Math.atan2(-y, x) * radToDeg,
            dTheta = _theta0 - theta;
        _input.dHue = _dHue0 + dTheta;
        update();
        });
    hueCtrl.call(hueDrag);
    
    // bind <input> controls
    d3.selectAll('input[dimension]')
      .on('input', function() {
        _input[this.getAttribute('dimension')] = +this.value;
        update();
        });
    
    //
    // cache selectors, make updates
    var hueArcSel = hueCtrl.selectAll('.hue-arcs path'),
        hueTicks = hueCtrl.select('.hue-ticks'),
        sValues = d3.selectAll('.s-value'),
        lValues = d3.selectAll('.l-value'),
        lTicks = lGradient.selectAll('rect'),
        sTicks = sGradient.selectAll('rect'),
        hueValue = hueCtrl.select('text'),
        colorList = d3.selectAll('.color-list');
    
    // render sparklines
    var sparkSvg = d3.select('.sparklines'),
        sparkWidth = 540,
        sparkHeight = 140,
        nPoints = 20,
        sparkdX = sparkWidth / nPoints;
        sparkPath = function() {
            return 'M0,'+(sparkHeight / 2)+' '+
              d3.range(0, nPoints)
                    .map(function() {
                    return 'l'+sparkdX +','+((0.5 - Math.random())* sparkHeight / 8); })
                    .join(' ');
        };
    function update() {
      hueArcSel.style('fill', function(d) { return d3.hsl((d * 360) / tau,
                                                     _input.saturation,
                                                     _input.lightness); });
      lTicks.style('fill', function(d, ndx) { return d3.hsl(_input.dHue,
                                                     _input.saturation,
                                                     (ndx * .01)); });
      sTicks.style('fill', function(d, ndx) { return d3.hsl(_input.dHue,
                                                     (ndx * .01),
                                                     _input.lightness); });
      sValues.text(Math.round(_input.saturation * 100));
      lValues.text(Math.round(_input.lightness * 100));
      hueValue.text(Math.round(_input.dHue) + '° base hue, ' +
                                        Math.round(360/_input.nColors) + '° between swatches');
      
      _palette = palette(_input.nColors,
                         _input.dHue,
                                                 _input.saturation,
                                                 _input.lightness);
      
      colorList.text('var swatches = [' +
                     _palette.map(function(d) { return d.rgb; }).join(', ') +
                     '];');
      var tickSel = hueTicks.selectAll('circle').data(_palette);
      tickSel.exit().remove();
      tickSel.enter().append('circle')
        .attr('r', 9.5)
        .attr('cx', 0)
        .attr('cy', (r0 + r1) / -2);
      tickSel
        .style('fill', function(d) { return d.rgb; })
        .attr('transform', function(d) { 
            return 'rotate('+(d.h)+' 0 0)'
        });
      
      var sparkSel = sparkSvg.selectAll('path').data(_palette);
      sparkSel.exit().remove();
      sparkSel.enter().append('path').attr('d', sparkPath);
      sparkSel.style('stroke', function(d) { return d.rgb; });
      
      d3.select('.state-map').selectAll('path.state')
        .style('fill', function(d, ndx) {
            // return _palette[Math.floor(Math.random() * _palette.length)].rgb;
            // ^^ warning, can induce seizures
            return _palette[ndx % _palette.length].rgb;
        });
    }
    update();
    
    //
    // states
    d3.json('us_states.json', function(err, statejson) {
        var mapWidth = 580, 
            mapHeight = 300, 
            projection = d3.geo.albersUsa()
                        .scale(mapWidth)
                        .translate([mapWidth / 2, mapHeight / 2]);
            var path = d3.geo.path().projection(projection);
            d3.select('.state-map').selectAll('path.state')
                .data(statejson.features).enter()
                .append('path')
                    .attr('class', 'state')
              .attr('d', function(d) { return path(d); });
      update();
    });
    
  </script>
</body>     
​
    