zanarmstrong/colorInterpolation.css

## colorInterpolation.css
 #svgContainer {
     width:2000px;
     height:3000px;
     background-color:white;
 }
 p, h2 {
     font-family:'Oxygen';
     max-width: 2000px;
 }
 .verticalLine {
     border-top:thin solid #aaa;
     line-height: 140%;
 }

## colorInterpolation.js
var w = 1000;
var h = 500;
var num = 20;
var radius = w / num / 6;
var ylevel = 30;
var color = 'darkred'

// change colors in colorlist to interpolate between different colors!
var colorlist = [color, 'blue'];

var functionlist = [d3.interpolateRgb, d3.interpolateHsl, d3.interpolateHcl];

//Create SVG elements
var createsvg = function (w, h) {
    svg = d3.select("#forSVG")
        .append("svg")
        .attr("width", w)
        .attr("height", h);
}

// create array of color interpolating functions
var s = [];
for (var i = 0; i < functionlist.length; i++) {
    s.push(d3.scale.linear()
        .domain([0, num])
        .interpolate(functionlist[i])
        .range([colorlist[0], colorlist[1]]));
}

var expanddata = function (arrayoffunc, num, startingX, startingY, radius, ySep) {
    var data = [];
    for (var i = 0; i < arrayoffunc.length; i++) {
        var ylevel = startingY + i * ySep;
        for (var j = 0; j < num; j++) {
            data.push([arrayoffunc[i](j), startingX + j * 2 * radius, ylevel]);
        }
    }
    return data;
}

// draw the circles!
createsvg()
svg.selectAll('x')
    .data(expanddata(s, num, radius, ylevel, radius, 4 * radius))
    .enter()
    .append("circle")
    .attr("cx", function (d) {
    return d[1]
})
    .attr("cy", function (d) {
    return d[2]
})
    .attr("r", radius)
    .attr("opacity", 1)
    .attr("fill", function (d) {
    return d[0]
});

// add html
var overview = document.getElementById('overview');
overview.innerHTML = '<p>Interpolation between ' + colorlist[0] +
    ' and ' + colorlist[1] +
    '  using RGB, HSL, or HCL</p>';

## index.html
<!-- note: this code is one of the first things I wrote in D3... which I just moved from jsfiddle to github, so there may be weirdness is how things are implemented -->

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Color Interpolation</title>
<link href='https://fonts.googleapis.com/css?family=Oxygen:300normal,400normal,700normal' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="colorInterpolation.css">
<body>
<h2>Interpolating Between Colors</h2>
<p id="overview"></p>
<div id="forSVG"></div>
<p>To try different colors, use the jsfiddle example <a href="https://fiddle.jshell.net/HvTcN/6/">here</a>.</p>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="colorInterpolation.js"></script>
</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	#svgContainer {
	width:2000px;
	height:3000px;
	background-color:white;
	}
	p, h2 {
	font-family:'Oxygen';
	max-width: 2000px;
	}
	.verticalLine {
	border-top:thin solid #aaa;
	line-height: 140%;
	}
	var w = 1000;
	var h = 500;
	var num = 20;
	var radius = w / num / 6;
	var ylevel = 30;
	var color = 'darkred'

	// change colors in colorlist to interpolate between different colors!
	var colorlist = [color, 'blue'];

	var functionlist = [d3.interpolateRgb, d3.interpolateHsl, d3.interpolateHcl];

	//Create SVG elements
	var createsvg = function (w, h) {
	svg = d3.select("#forSVG")
	.append("svg")
	.attr("width", w)
	.attr("height", h);
	}

	// create array of color interpolating functions
	var s = [];
	for (var i = 0; i < functionlist.length; i++) {
	s.push(d3.scale.linear()
	.domain([0, num])
	.interpolate(functionlist[i])
	.range([colorlist[0], colorlist[1]]));
	}

	var expanddata = function (arrayoffunc, num, startingX, startingY, radius, ySep) {
	var data = [];
	for (var i = 0; i < arrayoffunc.length; i++) {
	var ylevel = startingY + i * ySep;
	for (var j = 0; j < num; j++) {
	data.push([arrayoffunc[i](j), startingX + j * 2 * radius, ylevel]);
	}
	}
	return data;
	}

	// draw the circles!
	createsvg()
	svg.selectAll('x')
	.data(expanddata(s, num, radius, ylevel, radius, 4 * radius))
	.enter()
	.append("circle")
	.attr("cx", function (d) {
	return d[1]
	})
	.attr("cy", function (d) {
	return d[2]
	})
	.attr("r", radius)
	.attr("opacity", 1)
	.attr("fill", function (d) {
	return d[0]
	});

	// add html
	var overview = document.getElementById('overview');
	overview.innerHTML = '<p>Interpolation between ' + colorlist[0] +
	' and ' + colorlist[1] +
	' using RGB, HSL, or HCL</p>';
	<!-- note: this code is one of the first things I wrote in D3... which I just moved from jsfiddle to github, so there may be weirdness is how things are implemented -->

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Color Interpolation</title>
	<link href='https://fonts.googleapis.com/css?family=Oxygen:300normal,400normal,700normal' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="colorInterpolation.css">
	<body>
	<h2>Interpolating Between Colors</h2>
	<p id="overview"></p>
	<div id="forSVG"></div>
	<p>To try different colors, use the jsfiddle example <a href="https://fiddle.jshell.net/HvTcN/6/">here</a>.</p>
	<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script src="colorInterpolation.js"></script>
	</body>