document.getElementById("demo").innerHTML = data.matrix[17][20].count
let board = ''
board += '<g  text-anchor="middle" font-size="6pt" font-family="monospace">'
for(let i = 0; i <= 73; i++){
  board += `<text alignment-baseline="middle" y="5" x="${10*(i+1.5)}">${i}</text>`
  }
for(let i = 0; i <= 51; i++){ // i is losing score
board += `<text alignment-baseline="middle" x="5" y="${10*(i+1.5)}">${i}</text>`
}
board += '</g>'
for(let i = 0; i <= 51; i++){
board += `<rect width="${(i == 1) ? 60: 10*i}" height="10" x="10" y="${10*(i+1)}" fill="black"/>`
for(let j = i; j <= 73; j++){ // j is winning score
if(data.matrix[i][j].count > 0){
board += `<rect width="10" height="10" x="${(j+1)*10}" y="${(i+1)*10}" fill="#0c0" />`
}
}
}
board += '<rect width="10" height="10" x="80" y="20"/>'
board += '<rect width="10" height="10" x="20" y="10"/>'
document.getElementById("demo").innerHTML = board.length
document.getElementById("svg").innerHTML = board