Tutorial Steps taken from interactive demo here: https://www.rtfmanual.io/d3garden

Step 2: Declare SVG

Define the canvas.

This can be done with the following statement:

var svg = d3.select('div.canvas').append('svg').attr('width', '648px').attr('height', '452px');

This takes advantage of D3’s chaining. Breaking the statement down:
1. Select the canvas. var svg = d3.select('div.class')
2. Append the svg. .append('svg')
3. Set width and height. .attr('width', '648px') .attr('height', '452px')

Step 4: selectAll() in action

How to use selectAll()

svg.selectAll('rect.colorBar')

This statement looks for all rect elements (SVG) with class 'colorBar'. If there are none, it creates an empty set.

Step 6: Add data()

Check out the properties of each element. These are what can be assigned to attributes of the SVG elements for your graph.

var tomatoes = [
  {"width":25,"height":86,"color":"red"},
  {"width":25,"height":84,"color":"red"},
  {"width":25,"height":98,"color":"red"},
  {"width":25,"height":93,"color":"red"},
  {"width":25,"height":68,"color":"red"},
  {"width":25,"height":70,"color":"red"},
  {"width":25,"height":76,"color":"red"},
  {"width":25,"height":77,"color":"red"},
  {"width":25,"height":95,"color":"red"},
  {"width":25,"height":100,"color":"red"},
  {"width":25,"height":90,"color":"red"},
  {"width":25,"height":75,"color":"red"},
  {"width":25,"height":65,"color":"red"},
  {"width":25,"height":80,"color":"red"},
  {"width":25,"height":78,"color":"red"},
  {"width":25,"height":76,"color":"red"},
  {"width":25,"height":94,"color":"red"},
  {"width":25,"height":78,"color":"red"},
  {"width":25,"height":69,"color":"red"},
  {"width":25,"height":93,"color":"red"},
  ]

How to use data()

svg.selectAll('rect.colorBar').data(tomatoes)

data() declares the object or array for iteration.

Step 8: append() the element

append() determines the type of visualization based on what it's passed.

What It Does

append() allows you to choose from the 7 basic SVG elements or a 'g' element. A 'g' element groups SVG shapes together.

In this case, we want a 'rect' element to build a bar graph.

 svg.selectAll('rect.colorBar').data(tomatoes)
    .enter().append('rect')   

Step 10: Define Bar Width

attr() statements define the properties of each bar. The attributes specific to each type of SVG element can be reviewed here.

What It Does

 .attr('width' , function (d,i) { return d.width }) 

attr() statements define how you want your bars to appear. Specifically, they can be assigned properties of data points.

Step 12: Put Bars In A Row

Separate bars from each other. When new bars are created from a dataset they are set to coordinates of (0, 0) so we have to set some attributes to separate them. You will likely want your bar graph data already ordered by your x-axis values.

What It Does

 .attr('x' , function (d,i) { return i * d.width }) 

The last statement created a bunch of bars stacked on top of each other. This is because of the default values for the attributes. We have to define x values for this type of bar chart for them to be spaced out appropriately. To space them out we can multiply the index of each bar by the width of the bars to spread them out.

Final Code for the Internal Portion of the Bar Graph

var w= 535;
var h= 250;
var svg= d3.select('.gardenDiv')
    .append('svg')
    .attr('width', w)
    .attr('height', h);

svg.selectAll('rect.colorBar')
    .data(data)
    .enter()
    .append('rect')
    .attr('width', function(d,i){
        return d.width
    })
    .attr('height', function(d,i){
        return d.height*2
    })
    .attr('x', function(d,i){
        return i * (d.width+2)
    })
    .attr('y', function(d,i){
        return h - d.height*2
    })
    .attr('fill', 'white')

This is not the code that creates the bar chart at the top of the page.

Step 14: Scale on X Axis

Before we add an axis to the graph, we need to define the start and end point of the graph.

How to define a scale

var xScale = d3.scale.linear()
.domain( [0, data.length] )
.range( [0, width] ); 

d3.scale.linear() = Indicates your scale will be linear across the range specified, as opposed to exponential etc.
.domain( [0, data.length] ) = Specifies that the scale ranges from 0 to the count of total number of items in the array.
.range( [0, width] ) = Maps the specified domain to corresponding spots on the SVG. In this case, extends the full width of the SVG.

Step 16: Create X Axis, Pt 1

Now that we have scales, we can append() them as elements in the DOM.

How to define an axis

 var xAxis = d3.svg.axis().scale(xScale) 

d3.svg.axis() = Indicates that we want to create an element with the characteristics of an axis i.e. can have labels and tick marks.
.scale(xScale) = Specifies that we want to use the xScale we already specified.

Step 18: Create Y Axis, Pt 1

Now that we have scales, we can turn them into elements in the DOM.

How to define an axis

 var yAxis = d3.svg.axis().scale(yScale)
.orient("left") 

d3.svg.axis() = Indicates that we want to create an element with the characteristics of an axis i.e. can have labels and tick marks.
.scale(yScale) = Specifies that we want to use the xScale we already specified.
.orient("left") = Specifies that this will be a vertical axis, from bottom to top.

Helpful Links

More information about axes, graphs, and D3 in general:

http://alignedleft.com/tutorials/d3/axes
http://alignedleft.com/tutorials/d3