D3 Examples - Paint by colours

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
</style>
<svg>
</svg>
<script src="https://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>
​
    