In this section, we will use the barcode chart with a more complex dataset and learn how to use the chart that is integrated within a table. Imagine that we have an application that monitors the mention of stocks on Twitter. One element of this fictional application might be a table that displays the aggregated information about the stock's mentions and the barcode chart with the mentions of the last day. We will assume that the data is already loaded on the page. Each data item will have the name of the stock, an array with mentions, and the average of mentions by hour. Refer to the following code:

var data = [
    {name: 'AAPL', mentions: [...], byHour: 34.3},
    {name: 'MSFT', mentions: [...], byHour: 11.1},
    {name: 'GOOG', mentions: [...], byHour: 19.2},
    {name: 'NFLX', mentions: [...], byHour:  6.7}
];

The mentions array will have objects with the date attribute. These items can have other attributes as well. We will create the table structure with D3, binding the rows of the table body to the data array. We create the table by binding the table element with a single element array as follows:

// Create a table element.
var table = d3.select('#chart').selectAll('table')
    .data([data])
    .enter()
    .append('table')
    .attr('class', 'table table-condensed'),

We append the table head and body:

// Append the table head and body to the table.
var tableHead = table.append('thead'),
    tableBody = table.append('tbody'),

We add three cells in the row header to display the column headers:

// Add the table header content.
tableHead.append('tr').selectAll('th')
    .data(['Name', 'Today Mentions', 'mentions/hour'])
    .enter()
    .append('th')
    .text(function(d) { return d; });

We append one row to the table body for each element in the data array:

// Add the table body rows.
var rows = tableBody.selectAll('tr')
    .data(data)
    .enter()
    .append('tr'),

For each row, we need to add three cells, one with the stock name, one with the barcode chart, and the last one with the hourly average of mentions. To add the name, we simply add a cell and set the text:

// Add the stock name cell.
rows.append('td')
    .text(function(d) { return d.name; });

Now, we add a cell with the chart. The data item bound to the row is not an array with dates, so we can't call the barcode function directly. Using the datum method, we can bind the data item to the td element. Note that this method does not perform a join, and thus, it doesn't have the enter and exit selections:

// Add the barcode chart.
rows.append('td')
    .datum(function(d) { return d.mentions; })
    .call(barcode);

The datum method receives a data item directly; it doesn't require an array like the data method. Finally, we add the last cell with the hourly average of mentions. The content of this cell is a number, so it must be aligned to the right-hand side:

// Add the number of mentions by hour, aligned to the right.
rows.append('td').append('p')
    .attr('class', 'pull-right')
    .html(function(d) { return d.byHour; });

The barcode charts are integrated in the table, along with other information about the stock mentions as shown in the following screenshot:

The barcode chart, integrated within a table, displaying fictional Twitter mentions of stocks

We used D3 to create a data-bound table with a chart in each row. We could have created the structure and header of the table in the HTML document and bound the data array to the rows in the table body, but we created the entire table with D3, instead.

If the table will be used in more than one page, we can also think of creating the table as a reusable chart, using the structure presented in the previous section. We could even add an attribute and an accessor to set the charting function and use the table chart with a different chart without having to change the code of the table chart.