In this section, we will cover each file in detail and explain its importance in the overall package:

• index.html: This file is the starting point of the visualization and will launch automatically when you point your browser to http://localhost:8080. You will notice that the file contains many of the points already covered in the book in terms of loading up the proper assets. As we walk through the index.html file, we will identify the other directories and files used in the project.
• main.css: The main.css file is used to apply specific CSS styling to
  your visualization:

<link rel="stylesheet" type="text/css" href="main.css"> 

• vendor: This directory contains all the external libraries that we need to use in the visualization and is loaded at the bottom of the index.html file:

<script src="vendor/d3.min.js"></script> 
<script src="vendor/topojson.v1.min.js"></script> 

• We like to keep these to a minimum so that we have as few dependencies on the outside world as possible. In this case, we are only using the core D3 library and TopoJSON to help us with the GeoJSON encoding.

• scripts: This is another directory; there are some new additions to the files we are loading in order to create the visualization:

<!-- A base function for setting up the SVG and container --> 
<script src="scripts/base.js"></script> 
 
<!-- The main visualization code --> 
<script src="scripts/viz.js"></script> 

• The base.js script contains some common D3 patterns that are reused in many examples (such as containing the visualization in a chart area <g> with a predefined margin object, common methods to calculate height and width based on this margin object, and a handy utility to find the existing container and binding data). The base.js script is also an excellent location to keep the reusable code.
• The viz.js script is an example that leverages many of the concepts in Towards Reusable Charts with some inheritance gained from base.js. The viz.js script is the workhorse of the project and where most of the visualization code will reside.

• factories: This too is a directory. In order to show our work in the browser, we need a script to generate some data, select the element in the DOM, and initiate the visualization call. These scripts are organized in the factories directory. An example of this can be viewed in the viz_factory.js file:

<!-- The script acts as a proxy to call the visualization 
 and draw it with sample data --> 
<script src="factories/viz_factory.js"></script> 

• spec: The tests you write to validate the methods in the visualization code go here. A detailed example will be provided later in this chapter.