Randomness

_.md

[ Launch: Tributary inlet ] e7ad9e2ae8936639d17a by poezn

config.json

{"description":"Randomness","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/HTCd3kK.png","inline-console":true}

inlet.js

var w = 25;
var numPerRow = 30;
var numSegments = 30;
var numRows = 30;   

var backgroundColors = ["#F3C744", "#0B2A8F", "#FFFFFF"];
var wedgeColors = ["#FB9B34", "#131954", "#FFFFFF"]

var data = _.map(d3.range(numPerRow * numRows), function(d, i) {
  var numRings = Math.round(Math.random() + 3);
  var numWedges = Math.round(Math.random() * numSegments);
  var wedgeRadius = w/6 + Math.random() * w/6*2;                   
  var wedgeSpacing = Math.random() / 3 * 2;
  var colorIdx = Math.floor(backgroundColors.length * Math.random())
  return {
    rings: [w/2].concat(d3.range(numRings).map(function(d, i) { return Math.random() * w/2 / numRings * (numRings - i) })),
    segments: d3.range(numWedges).map(function(d, i) {
      return {
        "startAngle": Math.PI*2 / numWedges * i,
        "endAngle": Math.PI*2 / numWedges * (i + wedgeSpacing),
        "innerRadius": 0,
        "outerRadius": wedgeRadius,
        "color": wedgeColors[colorIdx]
      }
    })
  }
});


var snowflakes = g.selectAll("g.snowflake")
.data(data)
.enter().append("g")
.attr({
  "class": "snowflake",
  "transform": function(d, i) {
    var tx = (i % numPerRow) * w * 1.1,
        ty = Math.floor(i / numPerRow) * w * 1.1;
    return "translate(" + [tx, ty] + ")";
  }
});

snowflakes.selectAll(".ring")
.data(function(d) {
  return d.rings;
})
.enter().append("circle")
.attr({
  "class": "ring",
  "cx": w/2,
  "cy": w/2,
  "r": function(d, i) { return d },
  "fill": function() {
    return backgroundColors[Math.floor(Math.random() * 2)]
  }
})

snowflakes.append("circle")
.attr({
  "cx": w/2,
  "cy": w/2,
  "r": function(d) { return (0.6 + Math.random() / 4) * w/2 },
  "fill": function(d, i) {    
    var idx = Math.floor(backgroundColors.length * Math.random())
    return backgroundColors[(i + idx) % backgroundColors.length]
  }
});


var arc = d3.svg.arc()
.outerRadius(function(d) { return d.outerRadius; })
.innerRadius(function(d) { return d.innerRadius; })
.startAngle(function(d) { return d.startAngle; })
.endAngle(function(d) { return d.endAngle; })

var segments = snowflakes.selectAll("path")
.data(function(d) { return d.segments; });

segments.exit().remove();

segments.enter().append("path")
.attr({
  "d": arc,
  "transform": "translate(" + [w/2, w/2] + ")",
  "fill": function(d, i	) {
    return d.color
  }
})
.style("opacity", function(d, i) { return 1/d.length*i; });

snowflakes.append("circle")
.attr({
  "cx": w/2,
  "cy": w/2,
  "r": function(d) { return w/10 },
  "fill": function(d, i) {    
    var idx = Math.floor(backgroundColors.length * Math.random())
    return backgroundColors[(i + idx) % backgroundColors.length]
  }
});


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

var data = function() {
  return d3.range(Math.ceil(Math.random() * numSegments)).map(function(d) { return 1});
};

var segments = snowflakes.selectAll("g")
.data(data)
.enter().append("g")

segments.selectAll("path")
.data(function(d) { console.log(d);return pie(d); })
.enter().append("path")
.attr("d", function(d, i) { return arc(d) })
  .style("opacity", function(d, i) { return 1/d.length*i; });
*/