Animating Flowers

A little experiment to see if animating >500 SVG path elements really puts us in the "middle of screwed-up country" as Dominikus Baur puts it in his excellent write-up about the OECD Better Life Index HTML5 implementation.

forked from herrstucki's block: Animating Flowers

forked from anonymous's block: Animating Flowers

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://lab.interactivethings.com/lib/d3-grid.js"></script>
<script>

var width = 960,
    height = 500,
    petals = 12,
    halfRadius = 15;

var size = d3.scale.sqrt()
  .domain([0, 1])
  .range([0, halfRadius]);
  
var grid = d3.layout.grid()
  .size([width - halfRadius * 6, height - halfRadius * 6]);

var pie = d3.layout.pie()
  .sort(null)
  .value(function(d) { return d.size; });

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + halfRadius * 3 + "," + halfRadius * 3 + ")");

var data = d3.range(49).map(function(d) {
  return {
    id: d,
    petals: d3.range(petals).map(function(d) { return {size: 0.5}; })
  }
});

setInterval(update, 4000)

flower.data(grid(data), function(d) { return d.id; }).transition().delay(function(d, i) { return 1000 + i * 20; }).duration(1000)
    .attr("transform", function(d, i) { 
      return "translate(" + d.x + "," + d.y + ")"; 
    });
  
  petal.data(function(d) { return pie(d.petals); }).transition().duration(1000)
    .attr("transform", function(d) { return r((d.startAngle + d.endAngle) / 2); })
    .attr("d", petalPath);
}

function petalFill(d, i) {
  return d3.hcl(i / petals * 360, 60, 70);
};

function petalStroke(d, i) {
  return d3.hcl(i / petals * 360, 60, 40);
};

function flowerSum(d) {
  return d3.sum(d.petals, function(d) { return d.size; });
}

function r(angle) {
  return "rotate(" + (angle / Math.PI * 180) + ")";
}

function polarToCartesian(angle, radius) {
  return {
    x: Math.cos(angle) * radius,
    y: Math.sin(angle) * radius
  };
};

</script>

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

Modified http://lab.interactivethings.com/lib/d3-grid.js to a secure url

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

https://lab.interactivethings.com/lib/d3-grid.js