dots

_.md

[ Launch: dots ] 2288a335f53690179fef by poezn

config.json

{"description":"dots","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inline.svg":{"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}

inlet.js

var n = 233,
    val = 72,
    numPerRow = 20,
    numPerColumn = Math.ceil(n/numPerRow),
    r = 3,
    padding = 3;


g = g.append("g").attr("transform", "translate(50, 200)");

g
.selectAll("circle")
.data(d3.range(0, n))
.enter()
.append("circle")
.attr({
  "cx": function(d, i) {
    return Math.floor(i / numPerColumn) * (2 * r + padding);
  },
  "cy": function(d, i) {
    return (i % numPerColumn) * (2 * r + padding);
  },
  "r": r,
  "fill": function(d, i) {
    return i < val ? "#006538" : "#999999"
  }
})