Skip to content

Instantly share code, notes, and snippets.

@henryjameslau

henryjameslau/.block

Last active January 10, 2019 17:47
Show Gist options
  • Save henryjameslau/4e399f7c55f67d72d6fa6d33fa7a1021 to your computer and use it in GitHub Desktop.
Save henryjameslau/4e399f7c55f67d72d6fa6d33fa7a1021 to your computer and use it in GitHub Desktop.
Download ZIP
Categorical colours cube helix scale generator
Raw
.block
license: mit
scrolling: no
border: no
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
<script src="https://npmcdn.com/[email protected]/browser.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/gka/chroma.js/master/chroma.min.js"></script>
<style>
svg {
width: 800px;
height: 800px;
}
</style>
</head>
<body>
<svg></svg>
<script>
//inspire by brian cort, you can maximise angular separation by using the golden angle
//https://briancort.com/colour-in-data-visualization-part-2-applications/
var goldenangle = Math.round(180*(3-Math.sqrt(5)))
var numberofcolours = 8
var colors = chroma.cubehelix()
.hue(1.1)
.start(268)
.rotations(numberofcolours*0.5*goldenangle)
.gamma(1)
.lightness([0.4,0.75])
.scale() // convert to chroma.scale
.correctLightness()
.colors(numberofcolours);
var svg = d3.select('svg');
var perRow = 4;
var size = 150;
var g = svg.selectAll('g')
.data(colors).enter().append('g')
.attr('transform', (d, i) => {
var x = (i % perRow + 1) * size;
var y = (Math.floor(i / perRow) + 1) * size;
return 'translate(' + [x, y] + ')';
}).attr('fill', d => d);
g.append('circle')
.attr('r', size / 4);
g.append('text')
.attr('y', size / 4 + 15)
.attr('text-anchor', 'middle')
.attr('dy', '.35em')
.text((d, i) => d);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment