Color Interpolation test by zanarmstrong

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>

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>';