# Edit in JSFiddle

```//define
var deputies = 460; //how many deputies
var x0 = 500;
var y0 = 500;
var rows = deputies/10; //how many rows
var maxInRow = 10; //max people in single row
var rowsAvoid = 4; //better not start from the center
var maxDepLoop = maxInRow + rowsAvoid;
var deputy = 1;

//background
var c = document.getElementById("parlament");
var context = c.getContext("2d");
context.beginPath();
context.arc(500, 480, 500, 0,  Math.PI);
context.fillStyle ="#eeeeee";
context.fill();
//title
context.font = 'normal 60pt Calibri';
context.textAlign = 'center';
context.fillStyle = "red";
context.fillText(deputies,500,560);
context.closePath();

for (j=0;j<rows;j++){
for(i=rowsAvoid; i<maxDepLoop;i++){

var x = x0 - ( i * (radius/(maxInRow+rowsAvoid-1)) * Math.cos( j * (Math.PI/(rows-1) ) ));
var y = y0 + ( i * (radius/(maxInRow+rowsAvoid-1)) * Math.sin( j * (Math.PI/(rows-1) ) ));

context.beginPath();
context.arc(x,y, radiusSingleDep, 0, 2 * Math.PI, true);

var fillColor = "#ffffff";
context.lineWidth = .1;
if (deputy <= 235){
fillColor = '#2635DA';
} else if (deputy > 235 && deputy <= 373) {
fillColor = '#23A721';
} else if (deputy > 373 && deputy <= 415) {
} else if (deputy > 415 && deputy <= 443) {
fillColor = '#DF261C';
} else if (deputy > 443 && deputy <= 459) {
fillColor = '#000000';
} else if (deputy > 459 && deputy <= 460) {
fillColor = '#A77866';
}
context.fillStyle = fillColor;
context.strokeStyle = '#000000';
context.fill();
context.stroke();
context.closePath();
deputy++;
}
}```
```<canvas id="parlament" width="1000" height="1000" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

```