D3.js donut chart

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<div id="chart"></div>

JavaScript

function init() {
     width = 300,
        height = 300,
        margin = 10;

    chart = d3.select('#chart')
                .append('svg:svg')
                .attr('width', width)
                .attr('height', height);
}


function do_update(data) {
    console.log(data)

    var yMin = d3.min(data.map( function(x) {return x.y;} ));
	var yMax = d3.max(data.map( function(x) {return x.y;} ));
	var xMin = d3.min(data.map( function(x) {return x.x;} ));
	var xMax = d3.max(data.map( function(x) {return x.x;} ));

	var y = d3.scale.linear()
				.domain([yMin, yMax])
				.range([height - margin, margin]);

	var x = d3.scale.linear()
				.domain([xMin, xMax])
				.range([width - margin, margin]);
   
    chart.selectAll('rect')
        .data(data)
        .enter()
        .append('svg:rect')
        .attr('x', function(d) { return x(d.x); })
        .attr('y', function(d) { return y(d.y); })
        .attr('height', function(d) { return d.value; })
        .attr('width', function(d) { return 5 });
}

function fetch_latest_top3() {
    result = [{x:1, y:1, value:30}, {x:5, y:1, value:30}, {x:10, y:1, value:30}];
    return result;
}

function fetch_latest_top3_again() {
    result = [{x:10, y:1, value:30}, {x:25, y:1, value:5}, {x:30, y:1, value:5}, {x:35, y:1, value:5},];
    return result;
}

init();
do_update(fetch_latest_top3());
do_update(fetch_latest_top3_again());