Paint by colours by arrayjam

index.html

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

</style>
<svg>
</svg>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="cubehelix.min.js"></script>
<script>
var width = 1504,
    height = 564,
    strokeWidth = 2,
    squaresAlongX = 16,
    halfWidth = width / squaresAlongX / 2,
    squaresAlongY = (height / (halfWidth * 2)) | 0,
    selectedColor;


var svg = d3.select("svg").attr("width", width).attr("height", height);
var verticals = svg.selectAll("g").data(d3.range(squaresAlongY * 2 + 1))
    .enter().append("g")
        .attr("transform", function(d, i) { return "translate(" + [i % 2 === 0 ? -halfWidth : 0, i * halfWidth - halfWidth] + ")"; });

var horizontals = verticals.selectAll("g").data(d3.range(squaresAlongX + 1))
    .enter().append("g")
        .attr("transform", function(d, i) { return "translate(" + [i * halfWidth * 2, 0] + ")"; });

var color = d3.scale.cubehelix()
        .domain([0, 0.5, 1])
        .range([
          d3.hsl(-100, 0.75, 0.35),
          d3.hsl(  80, 1.50, 0.80),
          d3.hsl( 260, 0.75, 0.35)
        ]);


horizontals.append("path")
        .attr("d", "M" + halfWidth + ",0L" + halfWidth*2 + "," + halfWidth + "L" + halfWidth + "," + halfWidth*2 + "L0," + halfWidth + "Z")
        .attr("fill", function(d) { return color(d / squaresAlongX); })
        .attr("fill", "#333")
        .attr("stroke", "#231f20")
        .attr("stroke-width", strokeWidth)
        .on("click", function() {
            if(selectedColor) {
                this.style.fill = selectedColor;
            }
        });


var starPoints = 5,
    innerRadius = 8,
    outerRadius = 21,
    xCenter = halfWidth,
    yCenter = halfWidth;

var starGenerator = d3.svg.line()
        .x(function (d,i) {
            var angle = i * Math.PI / starPoints - Math.PI / 2;
            var radius = i % 2 === 0 ? outerRadius : innerRadius;
            return xCenter + radius * Math.cos(angle);
        })
        .y(function (d,i) {
            var angle = i * Math.PI / starPoints - Math.PI / 2;
            var radius = i % 2 === 0 ? outerRadius : innerRadius;
            return yCenter + radius * Math.sin(angle);
        });


horizontals.filter(function(d, i, v) { return ((v > 0) &&
                                               (v < (squaresAlongY * 2)) &&
                                               (((v % 2) === 0) ? d > 0 : d >= 0) &&
                                               (d < squaresAlongX)); })
    .append("path")
        .datum(d3.range(10))
        .attr("d", starGenerator)
        .attr("class", "star")
        .style("pointer-events", "none")
        .style("fill", "#231f20");


var swatches = d3.select("body").append("div").selectAll("div").data(d3.range(squaresAlongX))
    .enter().append("div")
        .style("display", "inline-block")
        .style("width", "50px")
        .style("height", "50px")
        .style("background-color", function(d) { return color(d/squaresAlongX); })
        .style("cursor", "pointer")
        .style("opacity", 0.2)
        .style("line-height", "50px")
        .style("text-align", "center")
        .on("click", function(d) {
            swatches.style("opacity", 0.2);
            selectedColor = color(d/squaresAlongX);
            this.style.opacity = 1;
        })
        .text(String);


d3.select(self.frameElement)
        .style("height", (height + 100) + "px")
        .style("width", width + "px");

d3.select(self.frameElement.parentElement).style("width", "1400px")
</script>

cubehelix.min.js

!function(){function e(e){return function(a,i){a=d3.hsl(a),i=d3.hsl(i);var r=(a.h+120)*t,l=(i.h+120)*t-r,h=a.s,s=i.s-h,u=a.l,o=i.l-u;return isNaN(s)&&(s=0,h=isNaN(h)?i.s:h),isNaN(l)&&(l=0,r=isNaN(r)?i.h:r),function(t){var a=r+l*t,i=Math.pow(u+o*t,e),c=(h+s*t)*i*(1-i),d=Math.cos(a),N=Math.sin(a);return"#"+n(i+c*(-.14861*d+1.78277*N))+n(i+c*(-.29227*d-.90649*N))+n(i+1.97294*c*d)}}}function n(e){var n=(e=0>=e?0:e>=1?255:255*e|0).toString(16);return 16>e?"0"+n:n}var t=Math.PI/180;d3.scale.cubehelix=function(){return d3.scale.linear().range([d3.hsl(300,.5,0),d3.hsl(-240,.5,1)]).interpolate(d3.interpolateCubehelix)},d3.interpolateCubehelix=e(1),d3.interpolateCubehelix.gamma=e}();