davestaab/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <!--<script type="application/javascript" src="file:///Users/davestaab/Projects/timekeeper/bower_components/d3/d3.min.js"></script>-->
    <!--<script type="text/javascript" src="d3.v2.min.js"></script>-->
    <style>
        .circle {
            fill: rgba(33, 33, 33, .2);
        }

        .axis path {
            fill: none;
            stroke: #000;
            shape-rendering: crispEdges;
        }
        /*.projects circle {*/
            /*fill: rgba(100, 0, 100, .2);*/
        /*}*/
        .new {
            fill: hsla(90, 100%, 50%, .5);
        }
        .updated {
            fill: hsla(180, 100%, 50%, .5);
        }
        a {
            text-decoration:  underline;
            cursor: pointer;
        }

    </style>
</head>
<body>
<a onclick="public.timer()">Start/Stop Timer</a>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
    var public = {};
    (function () {
        var absoluteWidth = 480, absoluteHeight = 480, padding = 30;
        var margin = {top: padding, right: padding, bottom: padding, left: padding},
                width = absoluteWidth - margin.left - margin.right,
                height = absoluteHeight - margin.top - margin.bottom;

        var svg = d3.select("body").append("svg")
                .attr("width", absoluteWidth)
                .attr("height", absoluteHeight)
                .append("g")
                .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
                .append("g")
                .attr("transform", 'translate(' + width / 2 + ',' + height / 2 + ')');

        svg.append('circle').attr('r', 50).classed('circle circle--inner', true);
        svg.append('circle').attr('r', 75).classed('circle circle--outer', true);

//        var scale = d3.scale.ordinal()
//                .domain([-1000, 1000])
////                .range([-220, 220])
//                ;
        var x = d3.scale.identity()
                .domain([-1 * width / 2, width / 2]);
        var y = d3.scale.identity()
                .domain([-1 * height / 2, height / 2]);

        var xAxis = d3.svg.axis()
                .scale(x)
                .ticks(0)
                .orient('bottom');
        var yAxis = d3.svg.axis()
                .scale(y)
                .ticks(0)
                .orient('left');


        svg.append("g")
                .attr("class", "x axis")
                .call(xAxis);
        svg.append("g")
                .attr("class", "y axis")
                .call(yAxis);
        var data = randomData(20);
        svg.on('click', function (event) {
            console.log('click');
            data = updateData(20);
            update(data);
        });
        var projectsGroup = svg.append('g').classed('projects-group', true);

        function update(data) {

            var projects = projectsGroup
                    .selectAll('.projects')
                    .data(data);
            // update
            // move to new positions
            projects
                    .classed('updated', true)
                    .classed('new', false)
                    .transition()
                    .attr('cx', function (d) {
                        return d.x;
                    })
                    .attr('cy', function (d) {
                        return d.y;
                    })
            ;
            // enter
            projects.enter()
                    .append('circle')
                    .classed('projects', true)
                    .classed('new', true)
                    .attr('r', 0)
                    .attr('cx', function (d) {
                        return d.x;
                    })
                    .attr('cy', function (d) {
                        return d.y;
                    })
                    .on('click', function(d) {
                        console.log(d);
                    })
                    .transition()
                    .attr('r', function (d) {
                        return d.size;
                    });
            // exit
            projects
                    .exit()
                    .transition()
                    .attr('r', 0)
                    .remove();


        }

        update(data);

        var cancelTimer;

        public.timer = function(){
            if(cancelTimer){
                clearInterval(cancelTimer);
                cancelTimer = null;
            } else {
                cancelTimer = setInterval(function() {
                    data = updateData(20);
                    update(data);
                }, 1500);
            }
        }

        function randomData(amount) {
            amount = amount || 25;
            return d3.range(amount).map(function (d, i) {
                return {
                    size: Math.floor(Math.random() * 50),
                    x: Math.floor(Math.random() * width - width / 2),
                    y: Math.floor(Math.random() * height - height / 2)
                };
            });
        }
        function updateData(amount){
//            debugger;
            data = data.concat(randomData(amount));
            return shuffle(data)
                    .slice(0, Math.floor(Math.random() * data.length));
        }
        // Shuffles the input array.
        function shuffle(array) {
            var m = array.length, t, i;
            while (m) {
                i = Math.floor(Math.random() * m--);
                t = array[m], array[m] = array[i], array[i] = t;
            }
            return array;
        }
    })();

</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<!--<script type="application/javascript" src="file:///Users/davestaab/Projects/timekeeper/bower_components/d3/d3.min.js"></script>-->
	<!--<script type="text/javascript" src="d3.v2.min.js"></script>-->
	<style>
	.circle {
	fill: rgba(33, 33, 33, .2);
	}

	.axis path {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}
	/.projects circle {/
	/fill: rgba(100, 0, 100, .2);/
	/}/
	.new {
	fill: hsla(90, 100%, 50%, .5);
	}
	.updated {
	fill: hsla(180, 100%, 50%, .5);
	}
	a {
	text-decoration: underline;
	cursor: pointer;
	}

	</style>
	</head>
	<body>
	<a onclick="public.timer()">Start/Stop Timer</a>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>
	var public = {};
	(function () {
	var absoluteWidth = 480, absoluteHeight = 480, padding = 30;
	var margin = {top: padding, right: padding, bottom: padding, left: padding},
	width = absoluteWidth - margin.left - margin.right,
	height = absoluteHeight - margin.top - margin.bottom;

	var svg = d3.select("body").append("svg")
	.attr("width", absoluteWidth)
	.attr("height", absoluteHeight)
	.append("g")
	.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
	.append("g")
	.attr("transform", 'translate(' + width / 2 + ',' + height / 2 + ')');

	svg.append('circle').attr('r', 50).classed('circle circle--inner', true);
	svg.append('circle').attr('r', 75).classed('circle circle--outer', true);

	// var scale = d3.scale.ordinal()
	// .domain([-1000, 1000])
	//// .range([-220, 220])
	// ;
	var x = d3.scale.identity()
	.domain([-1 * width / 2, width / 2]);
	var y = d3.scale.identity()
	.domain([-1 * height / 2, height / 2]);

	var xAxis = d3.svg.axis()
	.scale(x)
	.ticks(0)
	.orient('bottom');
	var yAxis = d3.svg.axis()
	.scale(y)
	.ticks(0)
	.orient('left');


	svg.append("g")
	.attr("class", "x axis")
	.call(xAxis);
	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis);
	var data = randomData(20);
	svg.on('click', function (event) {
	console.log('click');
	data = updateData(20);
	update(data);
	});
	var projectsGroup = svg.append('g').classed('projects-group', true);

	function update(data) {

	var projects = projectsGroup
	.selectAll('.projects')
	.data(data);
	// update
	// move to new positions
	projects
	.classed('updated', true)
	.classed('new', false)
	.transition()
	.attr('cx', function (d) {
	return d.x;
	})
	.attr('cy', function (d) {
	return d.y;
	})
	;
	// enter
	projects.enter()
	.append('circle')
	.classed('projects', true)
	.classed('new', true)
	.attr('r', 0)
	.attr('cx', function (d) {
	return d.x;
	})
	.attr('cy', function (d) {
	return d.y;
	})
	.on('click', function(d) {
	console.log(d);
	})
	.transition()
	.attr('r', function (d) {
	return d.size;
	});
	// exit
	projects
	.exit()
	.transition()
	.attr('r', 0)
	.remove();


	}

	update(data);

	var cancelTimer;

	public.timer = function(){
	if(cancelTimer){
	clearInterval(cancelTimer);
	cancelTimer = null;
	} else {
	cancelTimer = setInterval(function() {
	data = updateData(20);
	update(data);
	}, 1500);
	}
	}

	function randomData(amount) {
	amount = amount \|\| 25;
	return d3.range(amount).map(function (d, i) {
	return {
	size: Math.floor(Math.random() * 50),
	x: Math.floor(Math.random() * width - width / 2),
	y: Math.floor(Math.random() * height - height / 2)
	};
	});
	}
	function updateData(amount){
	// debugger;
	data = data.concat(randomData(amount));
	return shuffle(data)
	.slice(0, Math.floor(Math.random() * data.length));
	}
	// Shuffles the input array.
	function shuffle(array) {
	var m = array.length, t, i;
	while (m) {
	i = Math.floor(Math.random() * m--);
	t = array[m], array[m] = array[i], array[i] = t;
	}
	return array;
	}
	})();

	</script>
	</body>
	</html>