D3 Examples - The Grumpy Cat

The Grumpy Cat

A data driven grumpy cat

Because the Internet is made of cats. Because The Grumpy Cat is a legend. And because transforming my drawings into d3 with Python is just too much fun.

There is certainly no d3 magic here - it's all in the data: 812,578 svg circles that is. Maybe this even qualifies for a big data grumpy cat?

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
​
<head>
<script src="https://d3js.org/d3.v3.min.js"></script>
</head>
​
<body>
<script type="text/javascript">
​
    d3.json("grump.json", function(data) {
​
        var width = 1024;
        var height = 500;
​
        var grumpycat = d3.select("body").append("svg")
                            .attr("class", "grumpycat")
                            .attr("width", width)
                            .attr("height", height);
​
        grumpycat.selectAll("circle")
            .data(data).enter().append("circle")
            .attr("fill", "black")
            .attr("cx", function(d) { return d.x; })
            .attr("cy", function(d) { return d.y; })
            .attr("r", 1);
​
    });
​
</script>
</body>
​
</html>
    