Old school D3 from simpler times

All examples By author By category About

ngopal

Full window Github gist

Just making silly pretty pictures. I guess you might be able to learn a thing or two about D3 transitions if you don't already know how they work.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>
    <script src="https://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<script type="text/javascript">
    var margin = {"left":20, "top":10, "right":20, "bottom":20}
    var info = d3.range(1000).map(function(k) {return Math.random()*100;});
    var colors = d3.scale.category20();
    var colorsb = d3.scale.category20b();
    var canvas = d3.select("body")
            .append("svg")
            .attr("width", 800)
            .attr("height", 800)
            .attr("transform", "translate("+margin.left+","+margin.top+")");

var circles = canvas.selectAll("circle")
            .data(info)
            .enter()
            .append("circle")
                .attr("cx", function(d) { return d*Math.random()*40;})
                .attr("cy", function(d) { return d*Math.random()*40;})
                .attr("r", function(d) { return d;})
                .attr("fill", function(d) { return colors(d);})
            .transition()
                .attr("cx", function(d) { return d*Math.random()*40;})
                .delay(3000)
                .duration(3000)
            .transition()
                .attr("cy", function(d) { return d*Math.random()*40;})
                .duration(3000)
            .transition()
                .attr("fill", function(d) { return colorsb(d);})
                .duration(3000)
            .transition()
                .attr("r", function(d) { return d/2;})
                .duration(3000);

var emmy = d3.selectAll("circle")
            .on("mouseover", function(d,i) {
                console.log(d,i);
                d3.select(this)
                        .transition()
                        .attr("r", function(d) { return d*4;})
                        .duration(function(d) { return d*100;})
                        .transition()
                        .attr("r", function(d) { return d;})
                        .duration(function(d) { return d*100;})
            });

</script>
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js