Skip to content

Instantly share code, notes, and snippets.

@nitaku
Last active August 29, 2015 14:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nitaku/9d6faddf3cca02440a20 to your computer and use it in GitHub Desktop.
Save nitaku/9d6faddf3cca02440a20 to your computer and use it in GitHub Desktop.
4 categories multihue linear color scales
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
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;
}
<!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="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<svg height="500" width="960"></svg>
<script src="index.js"></script>
</body>
</html>
(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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment