block by nitaku 9d6faddf3cca02440a20

4 categories multihue linear color scales

Full Screen

-

index.js

(function() {
  var N, OFFSET, SPREAD, bands, height, palettes, svg;

  height = 468;

  N = 4;

  SPREAD = 120;

  OFFSET = -15;

  palettes = d3.range(N).map(function(n) {
    return d3.range(256).map(function(i) {
      return d3.hcl(OFFSET + 360 / N * n + SPREAD * i / 256, 44 - Math.pow(128 - i, 2) / 360, 5 + 90 * i / 256);
    });
  });

  svg = d3.select('svg');

  bands = svg.selectAll('.palette').data(palettes).enter().append('g').attr({
    "class": 'palette',
    transform: function(d, n) {
      return "translate(0," + (height / N * n) + ")";
    }
  });

  bands.selectAll('.band').data(function(palette) {
    return palette;
  }).enter().append('rect').attr({
    "class": 'band',
    x: function(d, i) {
      return 32 + 3.5 * i;
    },
    y: 21,
    width: 3.5,
    height: height / N - 10,
    fill: function(d) {
      return d;
    }
  });

}).call(this);

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="4 categories linear color scales" />
    <title>4 categories linear color scales</title>
    <link rel="stylesheet" href="index.css">
    <script src="//d3js.org/d3.v3.min.js"></script>
</head>
<body>
  <svg height="500" width="960"></svg>
  <script src="index.js"></script>
</body>
</html>

index.coffee

height = 468
N = 4
SPREAD = 120
OFFSET = -15

palettes = d3.range(N).map (n) ->
  return d3.range(256).map (i) ->
    return d3.hcl(OFFSET+360/N*n+SPREAD*i/256, 44-Math.pow(128-i,2)/360, 5+90*i/256)

svg = d3.select('svg')

bands = svg.selectAll('.palette')
    .data(palettes)
  .enter().append('g')
    .attr
      class: 'palette'
      transform: (d,n) -> "translate(0,#{height/N*n})"

bands.selectAll('.band')
    .data((palette) -> palette)
  .enter().append('rect')
    .attr
      class: 'band'
      x: (d,i) -> 32+3.5*i
      y: 21
      width: 3.5
      height: height/N-10
      fill: (d) -> d
    

index.css

body {
    background: #272822;
    margin: 0;
    padding: 0;
}
svg {
    background: white;
}
.label {
  text-anchor: middle;
  font-size: 24px;
}
rect {
  shape-rendering: crispEdges;
}
path {
  fill: none;
}
path.hue {
  stroke: white;
  stroke-width: 1;
}
path.chroma {
  stroke: #FF3D00;
  stroke-width: 1;
}
path.luminance {
  stroke: black;
  stroke-width: 0.6;
}

.axis .domain, .axis .tick line {
  stroke: black;
  shape-rendering: crispEdges;
}
.axis {
  font-size: 8px;
  font-family: sans-serif;
}