   for member in [0...COUNCIL_SIZE]
     x = DX * (member+1)
     y = DY * (level+1)
-    drawCircle(x, y, 3.5)
+    drawCircle(x, y, 7)
 
 context.fillStyle = 'black'
+context.font = FONT
 for level in [0...EXP]
    y = DY * (level+1)
-   context.fillText(labels[level], 5, y+17)
+   context.fillText(labels[level], 10, y+FONTSIZE+5)

context.fillRect(0, 0, WIDTH, HEIGHT)

context.strokeStyle = 'rgba(0, 0, 0, 0.5)'
for level in [0...EXP]
  for member in [0...COUNCIL_SIZE]
    x = DX * (member+1)

# See it: http://jsbin.com/xiheveh/9/edit?js,output

WIDTH = 1000
HEIGHT = 1000

TAU = Math.PI * 2
COUNCIL_SIZE = 51
EXP = 5
DX = WIDTH/(COUNCIL_SIZE+1)
DY = HEIGHT/(EXP+1)
FONTSIZE = 25
FONT =  FONTSIZE + 'px sans-serif'

representative = [0,15,25,35,45]
labels = [
  'nation - 51 rep 345M'
  'state* - 51 represent 6.8M'
  'region - 51 represent 132,651'
  'local council - 51 represent 2,601'
  'neighbor council - 51 people - you are here👆. send one rep to local council'
]

canvas = document.createElement 'canvas'
document.body.appendChild canvas
canvas.style.maxWidth = '100%'
context = canvas.getContext '2d'
canvas.width = WIDTH
canvas.height = HEIGHT
