mbostock/.block

## .block
license: gpl-3.0

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.axis text {
  font: 10px sans-serif;
}

.channel canvas {
  float: left;
  margin: 40px 30px 0 30px;
  width: 900px;
  height: 90px;
}

</style>
<div class="channel" id="r">
  <canvas width="900" height="1"></canvas>
  <svg width="960" height="20"><g class="axis" transform="translate(30,.5)"></g></svg>
</div>
<div class="channel" id="g">
  <canvas width="900" height="1"></canvas>
  <svg width="960" height="20"><g class="axis" transform="translate(30,.5)"></g></svg>
</div>
<div class="channel" id="b">
  <canvas width="900" height="1"></canvas>
  <svg width="960" height="20"><g class="axis" transform="translate(30,.5)"></g></svg>
</div>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var white = d3.rgb("white"),
    black = d3.rgb("black"),
    width = d3.select("canvas").property("width");

var channels = {
  r: {scale: d3.scale.linear().domain([0, 255]).range([0, width]).interpolate(d3.interpolateRound), x: width / 2},
  g: {scale: d3.scale.linear().domain([0, 255]).range([0, width]).interpolate(d3.interpolateRound), x: width / 2},
  b: {scale: d3.scale.linear().domain([0, 255]).range([0, width]).interpolate(d3.interpolateRound), x: width / 2}
};

var channel = d3.selectAll(".channel")
    .data(d3.entries(channels));

channel.select(".axis")
    .each(function(d) { d3.select(this).call(d3.svg.axis().scale(d.value.scale).orient("bottom")); })
  .append("text")
    .attr("x", width)
    .attr("y", 9)
    .attr("dy", ".72em")
    .style("text-anchor", "middle")
    .style("text-transform", "uppercase")
    .text(function(d) { return d.key; });

var canvas = channel.select("canvas")
    .call(d3.behavior.drag().on("drag", dragged))
    .each(render);

function dragged(d) {
  d.value.x = Math.max(0, Math.min(this.width - 1, d3.mouse(this)[0]));
  canvas.each(render);
}

function render(d) {
  var width = this.width,
      context = this.getContext("2d"),
      image = context.createImageData(width, 1),
      i = -1;

  var current = d3.rgb(
    channels.r.scale.invert(channels.r.x),
    channels.g.scale.invert(channels.g.x),
    channels.b.scale.invert(channels.b.x)
  );

  for (var x = 0, v, c; x < width; ++x) {
    if (x === d.value.x) {
      c = white;
    } else if (x === d.value.x - 1) {
      c = black;
    } else {
      current[d.key] = d.value.scale.invert(x);
      c = current;
    }
    image.data[++i] = c.r;
    image.data[++i] = c.g;
    image.data[++i] = c.b;
    image.data[++i] = 255;
  }

  context.putImageData(image, 0, 0);
}

</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.axis text {
	font: 10px sans-serif;
	}

	.channel canvas {
	float: left;
	margin: 40px 30px 0 30px;
	width: 900px;
	height: 90px;
	}

	</style>
	<div class="channel" id="r">
	<canvas width="900" height="1"></canvas>
	<svg width="960" height="20"><g class="axis" transform="translate(30,.5)"></g></svg>
	</div>
	<div class="channel" id="g">
	<canvas width="900" height="1"></canvas>
	<svg width="960" height="20"><g class="axis" transform="translate(30,.5)"></g></svg>
	</div>
	<div class="channel" id="b">
	<canvas width="900" height="1"></canvas>
	<svg width="960" height="20"><g class="axis" transform="translate(30,.5)"></g></svg>
	</div>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script>

	var white = d3.rgb("white"),
	black = d3.rgb("black"),
	width = d3.select("canvas").property("width");

	var channels = {
	r: {scale: d3.scale.linear().domain([0, 255]).range([0, width]).interpolate(d3.interpolateRound), x: width / 2},
	g: {scale: d3.scale.linear().domain([0, 255]).range([0, width]).interpolate(d3.interpolateRound), x: width / 2},
	b: {scale: d3.scale.linear().domain([0, 255]).range([0, width]).interpolate(d3.interpolateRound), x: width / 2}
	};

	var channel = d3.selectAll(".channel")
	.data(d3.entries(channels));

	channel.select(".axis")
	.each(function(d) { d3.select(this).call(d3.svg.axis().scale(d.value.scale).orient("bottom")); })
	.append("text")
	.attr("x", width)
	.attr("y", 9)
	.attr("dy", ".72em")
	.style("text-anchor", "middle")
	.style("text-transform", "uppercase")
	.text(function(d) { return d.key; });

	var canvas = channel.select("canvas")
	.call(d3.behavior.drag().on("drag", dragged))
	.each(render);

	function dragged(d) {
	d.value.x = Math.max(0, Math.min(this.width - 1, d3.mouse(this)[0]));
	canvas.each(render);
	}

	function render(d) {
	var width = this.width,
	context = this.getContext("2d"),
	image = context.createImageData(width, 1),
	i = -1;

	var current = d3.rgb(
	channels.r.scale.invert(channels.r.x),
	channels.g.scale.invert(channels.g.x),
	channels.b.scale.invert(channels.b.x)
	);

	for (var x = 0, v, c; x < width; ++x) {
	if (x === d.value.x) {
	c = white;
	} else if (x === d.value.x - 1) {
	c = black;
	} else {
	current[d.key] = d.value.scale.invert(x);
	c = current;
	}
	image.data[++i] = c.r;
	image.data[++i] = c.g;
	image.data[++i] = c.b;
	image.data[++i] = 255;
	}

	context.putImageData(image, 0, 0);
	}

	</script>