From e9b820e77a102f51c0351547aadfca188dacd5c1 Mon Sep 17 00:00:00 2001
From: Matt Huntington <matt.huntington@gmail.com>
Date: Mon, 18 Sep 2017 04:17:42 -0700
Subject: [PATCH] Create axes

---
 BUILD.md | 38 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/BUILD.md b/BUILD.md
index 5034510..4aae642 100644
--- a/BUILD.md
+++ b/BUILD.md
@@ -13,6 +13,7 @@
 1. Parse and format times
 1. Set dynamic domains
 1. Dynamically generate svg elements
+1. Create axes
 
 ## Add link to d3 library
 
@@ -296,3 +297,40 @@ d3.select('svg').selectAll('circle') //since no circles exist, we need to select
     .enter() //find the data objects that have not yet been attached to visual elements
     .append('circle'); //for each data object that hasn't been attached, append a <circle> to the <svg>
 ```
+
+## Create axes
+
+D3 can automatically generate axes for you:
+
+```javascript
+var bottomAxis = d3.axisBottom(xScale); //pass the appropriate scale in as a parameter
+d3.select('svg')
+	.append('g') //put everything inside a group
+	.call(bottomAxis) //generate the axis within the group
+    .attr('transform', 'translate(0,'+HEIGHT+')'); //move it to the bottom
+```
+
+Currently, our SVG clips the axis.  Let's change some CSS so it doesn't:
+
+```css
+svg {
+    overflow: visible;    
+}
+```
+
+The left axis is pretty similar:
+
+```javascript
+var leftAxis = d3.axisLeft(yScale);
+d3.select('svg')
+	.append('g')
+	.call(leftAxis); //no need to transform, since it's placed correctly initially
+```
+
+It's a little tough, so let's adding some margin to the body:
+
+```css
+body {
+    margin: 20px 40px;
+}
+```