Dijktra's Algorithm Visualizer A couple months ago I made an interactive dijktra visualizer that allowed the user to setup the map nodes and run the algorithm. I thought it was a good way to solidify my algorithm and html/css knowledge. I'd like for you guys to test my application out and give any advice in any way I could make it better.
One particular element that i'd like to improve is the map rendering, which I did by making a table and updating it's rows and columns. This solution worked out good but I found it to be slow with maps with larger dimensions.
function render () {
    let html = ''

    for (let row = 0; row &lt; mapHeight; row++) {
        html += '&lt;tr&gt;'

        for (let column = 0; column &lt; mapWidth; column++) {
            // Ignore &quot;nodeIndex&quot;, &quot;colorIndex&quot; and such
            nodeIndex = column + ( row * mapWidth )
            let colorIndex = myNodes[nodeIndex].colorIndex

            html += `&lt;td style=&quot;background-color:${nodeColors[colorIndex]};&quot;&gt;&lt;/td&gt;`
        }

        html += '&lt;/tr&gt;'
    }

    //&quot;mapTable&quot; being the element in which this table is rendered
    mapTable.innerHTML = html 
}

Hope you guys like it and please feel welcome to give any criticism, have fun!
My page: https://github.com/Tlomoloko/Dijkstra_Visualizer
I don't know if there is a way to avoid the nested loop in this case because you need to do a calc that involves every inner loop index with every outer loop index.
But I think that is not necessary to calculate row * mapWidth in every iteration in the inner loop, once that both variables are available outside it
for (let row = 0; row &lt; mapHeight; row++) {
    //...
    let cached = row * mapWidth;

    for (let column = 0; column &lt; mapWidth; column++) {
        nodeIndex = column + cached;
        let colorIndex = myNodes[nodeIndex].colorIndex;

        //...
    }
//...
}