2D Array Visualizer

Think of a cinema. One number is not enough to find your seat. You need a row and a seat number. A 2D array is that seating plan in code: values laid out in rows and columns, where every value has a two-part address.

Under the hood it is simply an array whose items are arrays. Each inner array is one row of the grid, which is why you write it with two sets of square brackets.

The first index picks the row. The second index picks the column inside that row. Counting starts at 0, so matrix[1][2] means the second row, third column.

[[5, 8, 2],
 [7, 1, 9]]

matrix[0][1] → 8
matrix[1][2] → 9

Try it above: switch on Show indices and hover any cell to see its address. Row first, then column. Mixing the two up is the mistake everyone makes exactly once.

To touch every value you need two loops. The outer loop walks down the rows, and the inner loop walks across the columns of the current row. Count the steps on a grid with 3 rows and 4 columns: 4 steps for the first row, 4 for the second, 4 for the third. That is 12 steps for 12 cells.

So the work grows with the number of cells. For a grid with r rows and c columns, visiting everything takes r × c steps, which is written O(r · c). Reading or changing a single cell is different: you jump straight to its address, one step, no matter how big the grid is. Watch the loops run on the traversal pages: row by row, down the columns, in a spiral or along the diagonals. New to this notation? The Big-O Playground starts from zero →

Computer memory is one long line, not a grid. In C and C++ a 2D array is stored row by row: all of row 0, then all of row 1, and so on. This is called row-major order, and it explains a classic tip. Walking a grid row by row is usually faster than walking it column by column, because the next value you need is sitting right beside the one you just read.

In Python and JavaScript each row is its own separate list, and the outer array just points to them. That is why rows there can have different lengths, and why the bug below exists.

• Swapping row and column. matrix[col][row] works on a square grid and then crashes on a rectangular one.
• Going one past the end. With 3 rows the valid row numbers are 0, 1 and 2. The last row is always rows - 1.
• The shared-row bug. In Python, [[0] * 3] * 3 builds one row and points to it three times, so changing one cell changes a whole column. JavaScript's fill does the same. The Code tab above shows the safe way to build a grid.
• Assuming every row is the same length. Always loop to the length of the current row, not the first one.

• Paste a grid in square-bracket form, like [[1, 0], [0, 1]], or start from a preset such as the chess board.
• A plain 1D array such as [3, 1, 4] works too. It is drawn as a single row.
• Other formats are read as well: rows of values separated by spaces, commas or tabs, one row per line (with an optional first line giving the size, the way judge input does), Python lists with single quotes and True / False / None, and a stray trailing comma. The badge above the input shows how your text was understood.
• Cells can hold numbers, text in quotes, true, false or null.
• Give each value its own color to make patterns jump out: walls and paths in a maze, the 1s in an adjacency matrix, or the pieces on a board.
• Rows of different lengths are padded so you can see where they end.
• Working with a single list? The 1D Array Visualizer animates insert, delete, search and reverse on it, one read and write at a time.

Share a grid with your class. Press Copy link above the input to get a link that opens this exact grid, with your colours and index labels. Put it in a slide, a worksheet or a group chat and everyone sees the same thing. The grid travels inside the link itself, so nothing is stored on a server.

Teaching with this tool? Tell me what would help your class →