Force FizzBuzz

Force FizzBuzz

by Igor Cuckovic

CSS

.node {
    stroke: #fff;
    stroke-width: 1px;
}
.node-active {
    stroke: #555;
    stroke-width: 1px;
}
.link {
    stroke: #555;
    stroke-opacity: .3;
}
.link-active {
    stroke-opacity: 1;
}
.overlay {
    fill: none;
    pointer-events: all;
}


.nodetext { 
    color: #000;
    pointer-events: none;
  font-size: 20pt;
  font-weight: bold;
  font-family: Helvetica, sans-serif;
}

JavaScript

d3.selection.prototype.moveToFront = function () {
    return this.each(function () {
        this.parentNode.appendChild(this);
    });
};

var fizzBuzz = function (count) {
    var arr = [];
    for (var i = 1; i <= count; i += 1) {
        if ((i % 3 === 0) && (i % 5 === 0)) {
            var fizzbuzz = {};
            fizzbuzz.label = 'FizzBuzz';
            fizzbuzz.value = i;
            arr.push(fizzbuzz);
        } else if (i % 3 === 0) {
            var fizz = {};
            fizz.label = 'Fizz';
            fizz.value = i;
            arr.push(fizz);
        } else if (i % 5 === 0) {
            var buzz = {};
            buzz.label = 'Buzz';
            buzz.value = i;
            arr.push(buzz);
        } else {
            var obj = {};
            obj.label = i;
            obj.value = i;
            arr.push(obj);
        }
    }
    return arr;
}(100);

//console.log(fizzBuzz);

var width = 900,
    height = 600;

var rScale = d3.scale.linear()
    .domain([1, 100])
    .range([10, 30]);

fizzBuzz.forEach(function (item) {
    item.radius = rScale(item.value);
});

var force = d3.layout.force()
    .gravity(0.05)
    .charge(function (d, i) {
    return d.radius * -1;
})
    .nodes(fizzBuzz)
    .size([width, height]);


var root = fizzBuzz[0];

var drag = d3.behavior.drag()
    .origin(function (d) {
    return d;
})
    .on("dragstart", dragstarted)
    .on("drag", dragged)
    .on("dragend", dragended);


force.start();

var svg = d3.select('body')
    .append('svg')
    .attr({
    "width": width,
        "height": height
});

var node = svg.append("g")
    .attr("class", "nodes")
    .selectAll(".node")
    .data(fizzBuzz)
    .enter().append("g")
    .attr("class", "node").call(drag);

var circles = node.append('circle')
    .style('fill', function (d, i) {
    return d3.rgb(200, 255 - (i * 2.55), 20);
})
    .attr('r', function (d, i) {
    return rScale(d.value);
});


var labels = node.append('text')
    
    .text(function (d, i) {
   ...