d3 chart example

<!DOCTYPE html>
<html>
<head>
    
    
    <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="https://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) {

}

update(data);

var cancelTimer;

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

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

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js