It's time for an example. Start by creating a new folder called chapter2/ in your lib/ directory, and then create a blank file in that called table-factory.js. We will not do much directly inside main.js from here on--instead, we will create modules that get loaded by main.js. This allows us to keep our code clean and split it into manageable pieces. Working with modules is a key skill both for organizing your code and reusing useful code you've written--getting into the practice of breaking your project into smaller components is something that will serve you well as you grow as a JavaScript developer.

Since we don't want to play around with HTML inside of our codebase too much, we will write a bunch of functions to build our tables. We're going to make the following table:

<table class="d3-table"> 
  <thead> 
    <tr> 
      <td>One</td> 
      <td>Two</td> 
      <td>Three</td> 
      <td>Four</td> 
      <td>Five</td> 
      <td>Six</td> 
    </tr> 
  </thead> 
  <tbody> 
    <tr> 
      <td>q</td> 
      <td>w</td> 
      <td>e</td> 
      <td>r</td> 
      <td>t</td> 
      <td>y</td> 
    </tr> 
  </tbody> 
</table>

Now, we could just copy that into index.html. However, remember, we're trying to avoid writing any HTML here? It's time to make a table using D3.

Open up table-factory.js and create the following factory function:

import * as d3 from 'd3'; 

export default function tableFactory(_rows) { 
  const rows = Array.from(_rows); 
  const header = rows.shift(); // Remove the first row for the header 
  const data = rows; // Everything else is a normal data row 

  const table = d3.select('body') 
    .append('table') 
    .attr('class', 'table'); 

  return { 
    table, 
    header, 
    data, 
  }; 
}

This will give us the outer container. First, we create a copy of our _rows argument variable using Array.from, which we'd prefixed with an underscore so that we don't have two variables with the same name. We could have technically just done everything with _rows, but that would have mutated the data going into our function, which is known as a side effect. When writing code using a functional style, you try to avoid side effects where possible, as they make your code harder to debug.

We then pull off the first row for our header, instantiate our table, and return the table, header, and remaining rows as an object.

In order to see this work, we need to tell main.js to load our new class. Open that up now, and you'll note that all of our code from the preceding chapter is still there. How messy! Let's start by cleaning that up using ES2015 modules. Move all that code into chapter1/index.js, leaving main.js empty.

You should now have an empty main.js and all your code from Chapter 1, Getting Started with D3, ES2017 and Node.js, in its own file. This is how we'll organize our code from now on, and this is a good practice to get into. By making your code modular, it not only helps you reuse your old code, but also trains you to think in a more extensible manner.

Let's go back to index.js, and finally get back to creating that table.
In main.js, add the following code:

import tableFactory from './chapter2/table-factory'; 
const header = ['one', 'two', 'three', 'four', 'five', 'six']; 
const rows = [ 
  header, 
  ['q', 'w', 'e', 'r', 't', 'y'], 
]; 

const table = tableFactory(rows);

Go to the command line and type the following:

$ npm start

Then, go to http://127.0.0.1:8080 in your browser. Right-click on the page, go to Inspect Element, and you'll see our table element:

Woo! A table element!

Let's go back to our tableFactory function and add the rest of the table:

export default function tableFactory(_rows) { 
  const rows = Array.from(_rows); 
  const header = rows.shift(); // Remove the first row for the header 
  const data = rows; // Everything else is a normal data row 

  const table = d3.select('body') 
    .append('table') 
    .attr('class', 'table'); 

  const tableHeader = table.append('thead') 
    .append('tr'); 

  const tableBody = table.append('tbody'); 

  // Each element in "header" is a string. 
  header.forEach(value => { 
    tableHeader.append('th') 
      .text(value); 
  }); 

  // Each element in "data" is an array 
  data.forEach(row => { 
    const tableRow = tableBody.append('tr'); 

    row.forEach(value => { 
      // Now, each element in "row" is a string 
      tableRow.append('td') 
        .text(value); 
    }); 
  }); 


  return { 
    table, 
    header, 
    data, 
  }; 
}

Now, your table should look like this: