Histogram Equalization on a Map

forked from anonymous's block: Histogram Equalization

forked from biovisualize's block: Histogram Equalization

forked from anonymous's block: Histogram Equalization on a Map

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    canvas { width:50%; float: left}
  </style>
</head>
<body>
  <canvas id="imageOriginalCanvas"></canvas>
	<canvas id="imageCanvas"></canvas>

var cnv = document.getElementById('imageCanvas');
    var ctx = cnv.getContext('2d');
    var cnvori = document.getElementById('imageOriginalCanvas');
    var ctxori = cnvori.getContext('2d');

var colorBrewerSpectral11 = ["#9e0142","#d53e4f","#f46d43","#fdae61","#fee08b","#ffffbf","#e6f598","#abdda4","#66c2a5","#3288bd","#5e4fa2"].reverse();
		var colorScales = {
      'linearBlackAndWhite': function(values){
        return d3.scale.linear()
          .domain(d3.extent(values))
          .range(['#000', '#fff']);
      },
      'histogramEqualize': function(values){
        var buckets = 100;
        var quantiles = d3.scale.quantile()
        	.domain(values)
        	.range(d3.range(buckets))
        	.quantiles();

var stopCount = quantiles.length;
        var linearScale = d3.scale.linear()
        	.domain([0, stopCount - 1])
        	.range([d3.rgb('rgb(0, 0, 0)'), d3.rgb('rgb(255, 255, 255)')]);
        
        var grayScale = d3.range(stopCount).map(function(d){
          return linearScale(d);
        });

return d3.scale.linear().domain(quantiles).range(grayScale);
      },
      'histogramEqualizeColorBrewerSpectral11': function(values){
                var buckets = colorBrewerSpectral11.length;
                var quantiles = d3.scale.quantile()
                	.domain(values)
                	.range(d3.range(buckets))
                	.quantiles();
                return d3.scale.linear()
                  .domain(quantiles)
                  .range(colorBrewerSpectral11);
            },
    };

var img = new Image;
    img.onload = function(){

cnvori.width = cnv.width = img.width;
      cnvori.height = cnv.height = img.height;
      ctx.drawImage(img, 0, 0, img.width, img.height);
      ctxori.drawImage(img, 0, 0, img.width, img.height);

var imgData = ctx.getImageData(0, 0, img.width, img.height);

var rasterData = [];
      for(j = 0; j < (imgData.data.length / 4); j++){
        var brightness = d3.lab(d3.rgb(imgData.data[j * 4], 
                            imgData.data[j * 4 + 1], 
                            imgData.data[j * 4 + 2])).l;
        rasterData.push(imgData.data[j * 4] === 0 ? null : brightness);
      }

//       var scale = colorScales.histogramEqualize(rasterData);
      var scale = colorScales.histogramEqualizeColorBrewerSpectral11(rasterData);

for(j = 0; j < rasterData.length; j++){
        var scaledColor = scale(rasterData[j]);
        var color = d3.rgb(scaledColor);
        imgData.data[j * 4] = color.r;
        imgData.data[j * 4 + 1] = color.g;
        imgData.data[j * 4 + 2] = color.b;
//         imgData.data[j * 4 + 3] = 255;
      }

ctx.putImageData(imgData, 0, 0);
    };
    img.crossOrigin = '';   
    img.src = 'https://lh3.googleusercontent.com/-bOn4aarMiQY/VpfMqUx6MUI/AAAAAAAAC5I/IYmhHf9q8a0/s800-Ic42/linear_black_and_white_c.png';

</script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js