Naive D3 rendering test

by jarandaf

JavaScript

var width = 500;
var height = 500;
var svg, g, circle;

var c = d3.scale.category10();

var data = d3.range(0,1000).map(function (el) {
    return {x: 0, y: 0, color: c(Math.floor(Math.random()*10)), xVel: 0, yVel: 0};
});

var xScale = d3.scale.linear()
    .domain([-5, 5])
    .range([0, width]);

var yScale = d3.scale.linear()
    .domain([-5,5])
    .range([0, height]);

var zoomed = function () {
    // console.log('zoomed', d3.event.translate, d3.event.scale);
    g.attr('transform', 'translate(' + d3.event.translate + ')scale(' + d3.event.scale + ')');
}

var zoom = d3.behavior.zoom()
    .on('zoom', zoomed);

svg = d3.select('body').append('svg')
    .attr('width', width)
    .attr('height', height)
    .call(zoom);

g = svg.append('g');

circle = g.selectAll('circle')
    .data(data)
    .enter()
    .append('circle')
    .attr('cx', 10)
    .attr('cy', 10)
    .attr('r', Math.random()*10)
    .style('fill', function (d) { return d.color; })
    .style('stroke', 'black')
    .style('stroke-width', '0.75px')

d3.timer(function () {
    data.forEach(function (d) {
        d.x += d.xVel;
        d.y += d.yVel;
        d.xVel += 0.04 * (Math.random() - .5) - 0.05 * d.xVel - 0.0005 * d.x;
        d.yVel += 0.04 * (Math.random() - .5) - 0.05 * d.yVel - 0.0005 * d.y;
    });
    circle
      .attr("transform", function(d) { return "translate(" + xScale(d.x) + "," + yScale(d.y) + ")"; })
      .attr("r", function(d) { return Math.min(1 + 1000 * Math.abs(d.xVel * d.yVel), 10); });
});