Old school D3 from simpler times

All examples By author By category About

henryjameslau

Full window Github gist

Categorical colours cube helix scale generator

Built with blockbuilder.org

forked from sxywu's block: Color scale

forked from henryjameslau's block: Categorical colour scale generator

<!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/babel-core@5.8.34/browser.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/gka/chroma.js/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>

xxxxxxxxxx
 
<!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/babel-core@5.8.34/browser.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/gka/chroma.js/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>
​
    

Updated missing url https://cdn.rawgit.com/gka/chroma.js/master/chroma.min.js to https://cdn.jsdelivr.net/gh/gka/chroma.js/chroma.min.js

https://d3js.org/d3.v4.min.js

https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js

https://npmcdn.com/babel-core@5.8.34/browser.min.js

https://cdn.rawgit.com/gka/chroma.js/master/chroma.min.js