const rows = "abcdefghilmopqrst".split("")

async function on_content_loaded() {
    const svg = d3.select("#chart")
        .append("svg")
        .style("width", "100%")
        .style("height", "100%")
        .style("background-color", "gray")
    
    const xx = await Promise.all(rows.map(row => d3.csv(`data/row_${row}.csv`)))

    var r = svg.selectAll(".riga")
        .data(xx)
        .enter()
        .append("g")
        .attr("class", "riga")
        
    const size = 40
    
    var x = r.selectAll(".cella")
        .data((d, i) => [d, i])
        .enter()
    
    x
        .append("rect")
        .attr("x", size) 
        .attr("y", (d, i) => i * size)
        .attr("width", size - 1)
        .attr("height", size - 1)
        .style("fill", "green")
    
    x
        .append("text")
        .text((d, i) => d)
        .attr("text-anchor", "middle") 
        .attr("x", size + size / 2) 
        .attr("y", (d, i) => i * size + size / 2)

    console.log(xx)
        
}

document.addEventListener("DOMContentLoaded", on_content_loaded)