andreasplesch/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Use data binding to generate a defined number of colors interpolated between two colors in Lab, Hcl and rgb color space.

  
## index.html
<html>
  <style>
    body {
      font-family: monospace;
      font-size: 14;
    }

    table {
      border-spacing: 0px;
      border: 1px solid grey;
    }
    td {
      padding-top: 20;
      padding-left: 0;
      border: 0px;
    }
    #slider {
      width: 500px;
    }
  </style>
  <body>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <h1>Produce colors !</h1>
    <form>
      <label for=color1>pick  start color:</label>
      <input id=color1 type=color pattern="#[a-f0-9]{6}" title="hexadecimal color 1"
        placeholder="#000077" value='#000077' oninput='color1out.value=value;upDate();' />
      <output name=color1out for=color1>#000077</output>
      <label for=color2> and pick end color:</label>
      <input id=color2 type=color pattern="#[a-f0-9]{6}" title="hexadecimal color 2"
        placeholder="#ffffff" value='#ffffff' oninput='color2out.value=value;upDate();'/>
      <output name=color2out for=color2>#ffffff</output>
    </form>
    <form>
      <!--label for=slider>colors</label-->
      2 <input type=range min=2 max=50 value=5 id=slider list=sliderticks
        oninput='slidervalue.value=value;upDate()'/> 50
      <datalist id=sliderticks>
        <option>2</option>
        <option>5</option>
        <option>10</option>
        <option>15</option>
        <option>20</option>
        <option>25</option>
        <option>30</option>
        <option>35</option>
        <option>40</option>
        <option>45</option>
        <option>50</option>
      </datalist>

    <div>pick number of colors:
      <output name=slidervalue for=slider defaultValue=5>5</output>
    </div>
    </form>

    <div>colors as table cells:</div>
    <table id='colorbar'>
      <tr id='Lab-row'>
      </tr>
      <tr id='Hcl-row'>
      </tr>
      <tr id='RGB-row'>
      </tr>
    </table>
    <div>color list as pixel texture image:</div>
    <div id='Lab-list'></div>
    <div id='Hcl-list'></div>
    <div id='RGB-list'></div>

    <script>
      var bar_width = 500;
      var slider=d3.select('#slider');
      var colorsnode=slider.node();
      var color1node = d3.select('#color1').node();
      var color2node = d3.select('#color2').node();

      var labList=d3.select('#Lab-list');
      var hclList=d3.select('#Hcl-list');
      var rgbList=d3.select('#RGB-list');

      var labRow = d3.select('#Lab-row');
      var hclRow = d3.select('#Hcl-row');
      var rgbRow = d3.select('#RGB-row');

      upDate();

      function upDate() {
        var steps = colorsnode.value;
        var ave_cell_size = bar_width/steps;
        var cell_size = Math.floor(ave_cell_size);
        var cell_missing = ave_cell_size - cell_size;
        var labCols = 'Lab: ' + (steps - 1) + ' 1 3';
        var hclCols = 'Hcl: ' + (steps - 1) + ' 1 3';
        var rgbCols = 'rgb: ' + (steps - 1) + ' 1 3';
        var col1 = color1node.value;
        var col2 = color2node.value;
        var labScale=d3.scale.linear().domain([0,steps-1]).range([col1, col2]).interpolate(d3.interpolateLab);
        var hclScale=d3.scale.linear().domain([0,steps-1]).range([col1, col2]).interpolate(d3.interpolateHcl);
        var rgbScale=d3.scale.linear().domain([0,steps-1]).range([col1, col2]).interpolate(d3.interpolate);
        var int_cell_width = function(position) {
          //adjust width by 1 in positions which need to even out total width
          return ((position+1) * cell_missing)%1 < cell_missing ? cell_size+1 : cell_size;
        };
        var range = d3.range(0, steps);
        range.forEach(function (el, i)
          {
            labCols = labCols + ' 0x' + labScale(el).substring(1);
            hclCols = hclCols + ' 0x' + hclScale(el).substring(1);
            rgbCols = rgbCols + ' 0x' + rgbScale(el).substring(1);
          });
        labList.text(labCols);
        hclList.text(hclCols);
        rgbList.text(rgbCols);

        var cells = labRow.selectAll('td').data(range)
          .style({
          'background-color': function(d) {return labScale(d);},
          'padding-right': function(d) {
            return int_cell_width(d);}});
        cells.enter().append('td')
          .style({
          'background-color': function(d) {return labScale(d);},
          'padding-right': function(d) {
            return int_cell_width(d);}});
        cells.exit().remove();

        cells = hclRow.selectAll('td').data(range)
          .style({
          'background-color': function(d) {return hclScale(d);},
          'padding-right': function(d) {
            return int_cell_width(d);}});
        cells.enter().append('td')
          .style({
          'background-color': function(d) {return hclScale(d);},
          'padding-right': function(d) {
            return int_cell_width(d);}});
        cells.exit().remove();

        cells = rgbRow.selectAll('td').data(range)
          .style({
          'background-color': function(d) {return rgbScale(d);},
          'padding-right': function(d) {
            return int_cell_width(d);}});
        cells.enter().append('td')
          .style({
          'background-color': function(d) {return rgbScale(d);},
          'padding-right': function(d) {
            return int_cell_width(d);}});
        cells.exit().remove();

      }
    </script>
  </body>
</html>
	<html>
	<style>
	body {
	font-family: monospace;
	font-size: 14;
	}

	table {
	border-spacing: 0px;
	border: 1px solid grey;
	}
	td {
	padding-top: 20;
	padding-left: 0;
	border: 0px;
	}
	#slider {
	width: 500px;
	}
	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<h1>Produce colors !</h1>
	<form>
	<label for=color1>pick start color:</label>
	<input id=color1 type=color pattern="#[a-f0-9]{6}" title="hexadecimal color 1"
	placeholder="#000077" value='#000077' oninput='color1out.value=value;upDate();' />
	<output name=color1out for=color1>#000077</output>
	<label for=color2> and pick end color:</label>
	<input id=color2 type=color pattern="#[a-f0-9]{6}" title="hexadecimal color 2"
	placeholder="#ffffff" value='#ffffff' oninput='color2out.value=value;upDate();'/>
	<output name=color2out for=color2>#ffffff</output>
	</form>
	<form>
	<!--label for=slider>colors</label-->
	2 <input type=range min=2 max=50 value=5 id=slider list=sliderticks
	oninput='slidervalue.value=value;upDate()'/> 50
	<datalist id=sliderticks>
	<option>2</option>
	<option>5</option>
	<option>10</option>
	<option>15</option>
	<option>20</option>
	<option>25</option>
	<option>30</option>
	<option>35</option>
	<option>40</option>
	<option>45</option>
	<option>50</option>
	</datalist>

	<div>pick number of colors:
	<output name=slidervalue for=slider defaultValue=5>5</output>
	</div>
	</form>

	<div>colors as table cells:</div>
	<table id='colorbar'>
	<tr id='Lab-row'>
	</tr>
	<tr id='Hcl-row'>
	</tr>
	<tr id='RGB-row'>
	</tr>
	</table>
	<div>color list as pixel texture image:</div>
	<div id='Lab-list'></div>
	<div id='Hcl-list'></div>
	<div id='RGB-list'></div>

	<script>
	var bar_width = 500;
	var slider=d3.select('#slider');
	var colorsnode=slider.node();
	var color1node = d3.select('#color1').node();
	var color2node = d3.select('#color2').node();

	var labList=d3.select('#Lab-list');
	var hclList=d3.select('#Hcl-list');
	var rgbList=d3.select('#RGB-list');

	var labRow = d3.select('#Lab-row');
	var hclRow = d3.select('#Hcl-row');
	var rgbRow = d3.select('#RGB-row');

	upDate();

	function upDate() {
	var steps = colorsnode.value;
	var ave_cell_size = bar_width/steps;
	var cell_size = Math.floor(ave_cell_size);
	var cell_missing = ave_cell_size - cell_size;
	var labCols = 'Lab: ' + (steps - 1) + ' 1 3';
	var hclCols = 'Hcl: ' + (steps - 1) + ' 1 3';
	var rgbCols = 'rgb: ' + (steps - 1) + ' 1 3';
	var col1 = color1node.value;
	var col2 = color2node.value;
	var labScale=d3.scale.linear().domain([0,steps-1]).range([col1, col2]).interpolate(d3.interpolateLab);
	var hclScale=d3.scale.linear().domain([0,steps-1]).range([col1, col2]).interpolate(d3.interpolateHcl);
	var rgbScale=d3.scale.linear().domain([0,steps-1]).range([col1, col2]).interpolate(d3.interpolate);
	var int_cell_width = function(position) {
	//adjust width by 1 in positions which need to even out total width
	return ((position+1) * cell_missing)%1 < cell_missing ? cell_size+1 : cell_size;
	};
	var range = d3.range(0, steps);
	range.forEach(function (el, i)
	{
	labCols = labCols + ' 0x' + labScale(el).substring(1);
	hclCols = hclCols + ' 0x' + hclScale(el).substring(1);
	rgbCols = rgbCols + ' 0x' + rgbScale(el).substring(1);
	});
	labList.text(labCols);
	hclList.text(hclCols);
	rgbList.text(rgbCols);

	var cells = labRow.selectAll('td').data(range)
	.style({
	'background-color': function(d) {return labScale(d);},
	'padding-right': function(d) {
	return int_cell_width(d);}});
	cells.enter().append('td')
	.style({
	'background-color': function(d) {return labScale(d);},
	'padding-right': function(d) {
	return int_cell_width(d);}});
	cells.exit().remove();

	cells = hclRow.selectAll('td').data(range)
	.style({
	'background-color': function(d) {return hclScale(d);},
	'padding-right': function(d) {
	return int_cell_width(d);}});
	cells.enter().append('td')
	.style({
	'background-color': function(d) {return hclScale(d);},
	'padding-right': function(d) {
	return int_cell_width(d);}});
	cells.exit().remove();

	cells = rgbRow.selectAll('td').data(range)
	.style({
	'background-color': function(d) {return rgbScale(d);},
	'padding-right': function(d) {
	return int_cell_width(d);}});
	cells.enter().append('td')
	.style({
	'background-color': function(d) {return rgbScale(d);},
	'padding-right': function(d) {
	return int_cell_width(d);}});
	cells.exit().remove();

	}
	</script>
	</body>
	</html>