D3 Examples - canvas spheres

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinycolor/1.1.2/tinycolor.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
​
<script>
    function cSphere(ctx, x, y, radius, baseColor, highlightColor) {
        // Coloured radial gradient in circle shape
​
        baseColor = baseColor || "black";
        highlightColor = highlightColor || "white";
​
        var c = tinycolor(baseColor).toHsv(),
            stop1 = tinycolor({h: c.h, s: c.s + (255 - c.s)* 0.8, v: c.v * 0.6}),
            stop2 = tinycolor({
                h: c.h,
                s: c.s,
                v: c.v * 0.01 //0.65
            });
​
        var startAngle = 0;
        var endAngle = Math.PI * 2;
        var antiClockwise = false;
​
        var radialGradient = ctx.createRadialGradient(
            -0.5 * radius + x, -0.5 * radius + y,
            .0 * radius,
            x, y, 1.5 * radius
        );
        radialGradient.addColorStop(0, highlightColor);
        radialGradient.addColorStop(0.6, stop1.toHexString());
        radialGradient.addColorStop(0.9, stop2.toHexString());
        radialGradient.addColorStop(1, stop2.toHexString());
​
        ctx.fillStyle = radialGradient;
​
        ctx.beginPath();
        ctx.arc(x, y, radius, startAngle, endAngle);
        ctx.closePath();
​
        ctx.fill();
    }
    var ctx = canvas = d3.select("body").append("canvas").attr({width: 1200, height: 1000}).node().getContext("2d");
    ctx.shadowColor = "steelblue";
    ctx.shadowOffsetX = 10; ctx.shadowOffsetY = 10; ctx.shadowBlur = 10;
    var colors = d3.range(20).map(d3.scale.category20()).map(function(c, i) {
        var r = 50, columns = 5;
        cSphere(ctx, (i  % columns) * 2 * r + r, r + 2 * r * Math.floor(i/columns), r, c)
    });
​
</script>
</body>
</html>
    