This script is another demonstration of the update, enter, and exit selections in D3. The script also makes use of key functions to bind data to each row, and transitions to animate opacity and delay the removal of rows. This script demonstrates nested data, where an array of values is bounded to each row (<tr>
), and then a single value is bound to each cell (<td>
) element in the row.
Each row of the table has a unique letter key, which is displayed as the first cell. The remainder of the row is an array of random digits. At each iteration:
- A new set of letter keys is randomly selected from the alphabet.
- For each letter in the set, a new row with random data will be inserted in the table if the letter is not already in the table.
- Any row in the table with a key which is not in the new set is removed.
- The number of columns in the table is randomly adjusted. If the new number of columns is larger than the current table, random data is appended to each row. Otherwise, cel